title: Fetching data in loop next js
body: <p>I am attempting to use the data from 1 endpoint to call another endpoint that is filtered by id. I am planning on fetching both calls using <code>getServerSideProps</code> and passing the data to another component.</p>
  <p>The first call will return an array of <code>categories</code> which then I am attempting to loop and fetch <code>articles</code> that is filtered by id.</p>
  <p>I am able to successfully get back the array of <code>categories</code> but when I am attempting to loop and fetch <code>articles</code> I am getting a value of <code>undefined</code> How can I achieve this?</p>
  <p>Here is an example of my <code>index.js</code></p>
  <pre><code>import ArticleList from &quot;../../components/ArticleList&quot;;
  
  
  const Index = ({ categories, articles }) =&gt; {
  
  
    return (
      &lt;&gt;
        &lt;ArticleList categories={categories} articles={articles} /&gt;
      &lt;/&gt;
    )
  }
  
  export async function getServerSideProps (context) {
     // console.log('index - getserversideprops() is called')
     try {
       let articles = []
      let response = await fetch('https://example.api/categories')
      const categories = await response.json()
  
      for (let i = 0; i &lt; categories.results.length; i++) {
        response = await fetch (`https://example.api/articleid/` + categories.results[i].id)
        articles = await response.json()
      }
  
      console.log(articles,'33')
  
  
      if (!categories ) {
          return {
              notFound: true,
          }
      }
  
      return { 
        props: { 
          categories: categories,
          articles: artices
        }
      }
    } catch (error) {
        console.error('runtime error: ', error)
    }
  }
  
  export default Index
  </code></pre>
  <p>Here is an example of my <code>console.log(categories.results)</code> array:</p>
  <pre><code>[ {
  &quot;id&quot;: 2,
  &quot;name&quot;: &quot;Online&quot;
  },
  {
  &quot;id&quot;: 11,
  &quot;name&quot;: &quot;Retail&quot;
  },
  {
  &quot;id&quot;: 14,
  &quot;name&quot;: &quot;E-Commerce&quot;
  }]
  </code></pre>
  <p>I am expecting <code>articles</code> to be 3 separate arrays of data. Is this something that is possible if I am passing the data to another component? If not what will be a better way of handling this?</p>