I am trying to access newsapi using nextjs/react but "TypeError: data.map is not a function".

I have tried the following some solutions provided on stackoverflow but did not work for my case.

Here is my code:

import Layout from '../ponents/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

const Index = (props) => (
  <Layout>
    <h1>Batman TV sources</h1>
    <ul>
      {props.sources.map(source => (
        <li key={source.id}>
          <Link as={`/p/${source.id}`} href={`/post?id=${source.id}`}>
            <a>{source.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = async function() {
  const res = await fetch('')
  //const res = await fetch('/?results=10')
  //const res = await fetch ('')
  const data = await res.json()

  //console.log(`source data fetched. Count: ${data.length}`)

  return {
    sources: data.map(entry => entry.source)
  }
}

export default Index

and here SHORTED api data looks like: {"status":"ok","totalResults":38,"articles":[{"source":{"id":"fox-news","name":"Fox News"},"author":"Frank Miles","title":....}]}

I know this is an object but not an array and map() is not valid for object. But how can I get around this based on my code above?

The expected result should be new headlines be displayed but always got "TypeError: data.map is not a function". I tried the solutions suggested here but did not work. I am kind of new to this.

I am trying to access newsapi using nextjs/react but "TypeError: data.map is not a function".

I have tried the following some solutions provided on stackoverflow but did not work for my case.

Here is my code:

import Layout from '../ponents/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

const Index = (props) => (
  <Layout>
    <h1>Batman TV sources</h1>
    <ul>
      {props.sources.map(source => (
        <li key={source.id}>
          <Link as={`/p/${source.id}`} href={`/post?id=${source.id}`}>
            <a>{source.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = async function() {
  const res = await fetch('https://api.tvmaze./search/sources?q=batman')
  //const res = await fetch('https://randomuser.me/api/?results=10')
  //const res = await fetch ('https://newsapi/v2/top-headlines?country=us')
  const data = await res.json()

  //console.log(`source data fetched. Count: ${data.length}`)

  return {
    sources: data.map(entry => entry.source)
  }
}

export default Index

and here SHORTED api data looks like: {"status":"ok","totalResults":38,"articles":[{"source":{"id":"fox-news","name":"Fox News"},"author":"Frank Miles","title":....}]}

I know this is an object but not an array and map() is not valid for object. But how can I get around this based on my code above?

The expected result should be new headlines be displayed but always got "TypeError: data.map is not a function". I tried the solutions suggested here but did not work. I am kind of new to this.

• javascript
• json

• I fixed using "data.articles.map(entry => entry.source)". – Henry Commented May 31, 2019 at 5:15

1 Answer 1

Since your data is an Object you can't use map on it as Object don't have map method, you're trying to map source property which is inside articles array

change this

data.map(entry => entry.source)

to this

data.articles.map(entry => entry.source)