title: rest api get an array of javascript objects
body: <p>I am consuming this public api, the problem I have is that it is selecting an array of objects within the object field and I cannot access these values in the console, it shows me this (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]</p>
  <p>const url = <code>https://catfact.ninja/facts</code>;</p>
  <pre><code>    const getFact = () =&gt; {
      return fetch('https://catfact.ninja/facts' ,
      {
          method: 'GET',
          headers: {
              'Content-Type': 'application/json'
          }})
      .then(res =&gt; res.json())
      }
      const createFactDiv = (fact) =&gt; {
          const factContainer = document.createElement('div');
          const setup = document.createElement('p');
        
          setup.innerText = fact.data
          console.log(fact.data);
          factContainer.append(setup);
        
          return factContainer
        }
      const appendFact = (factDiv) =&gt; {
      const factContainer = document.getElementById('factContainer');
      factContainer.append(factDiv);
      }
  
      //This is unused
      /*
      document.addEventListener('DOMContentLoaded', () =&gt; {
      })
      */
  
      getFact().then ((fact) =&gt; {
      const factDiv = createFactDiv(fact);
      appendFact(factDiv);
      })
  </code></pre>
  <p><a href="https://i.stack.imgur.com/6UMd9.png" rel="nofollow noreferrer">enter image description here</a></p>