Getting data from JSON with React mapping

Question

I know this is probably a question that is easily answered, but I cannot figure it out after a few hours. I am trying to map over this JSON but it keeps saying "props.shows.map" is not a function, however the same works for another bit of data. I am trying to get things like 'id' and 'name' from the data.

The mapping works with this link: https://api.tvmaze.com/search/shows?q=\%22Terrance%20House\%22

Here is the JSON that doesn't work/can't seem to get the information from: https://api.tvmaze.com/shows/34275/episodes

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


const ShowLink = ({ show }) => (
    <li key={show.id}>
          <Link as={`/episode/${show.id}`} href={`/episodes/id=${show.id}`}>
            <a>{show.name}</a>
          </Link>
             <style jsx>{`
                li {
                    list-style: none;
                    margin: 5px 0;
                }

                a { 
                    text-decoration: none;
                    color: blue;
                    font-family: "Arial";
                }

                a:hover {
                    opacity: 0.6;
                }
             `}</style>
   </li>
)
/*
    <h1>{props.show.name}</h1>
         <p>{props.show.summary.replace(/<[/]?p>/g, '')}</p>
         <img src={props.show.image.medium}/>
*/
const Post =  (props) => (
    <Layout>
    <h1>Terrace House Episodes</h1>
        <ul>
            {props.shows.map(({show}) => (
                <ShowLink key={show} value={show} />
            ))}
        </ul>
    </Layout>
)

Post.getInitialProps = async function () {
   //const { id } = context.query
   //const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
   //const show = await res.json()
   //const res = await fetch(`http://api.tvmaze.com/seasons/34275/episodes`);
    const res = await fetch('https://api.tvmaze.com/shows/34275/episodes');
    const data = await res.json()

    return {
      shows: data
    }
}

export default Post

JSON stands for JavaScript Object Notation, so your props.shows was probably returned as an object. It needs to be an array if you want to use the .map function. Try console.log(typeof props.shows) and let me know what it comes back as — MEnf
– MEnf, Commented Mar 30, 2018 at 21:04
I have two sites listed above, both are json, and one works and one doesn't. I'm trying to figure why the second one doesn't. — asdfghjklm
– asdfghjklm, Commented Mar 30, 2018 at 21:06
It is an object though, yes. how can I change that into an array? — asdfghjklm
– asdfghjklm, Commented Mar 30, 2018 at 21:09

DannyMoshe · Accepted Answer · 2018-04-04 01:40:18Z

The problem is you are attempting to destructure a property (namely the 'show' property) which doesnt exist in your json object when you make your map call.

Heres an example of destructuring (in case you arent familiar):

const example= {
  show: 'Seinfeld',
};

const { show } = example;

In the last line the show property is being taken from the example object and assigned to a variable named show (so the variable show would hold the value 'Seinfeld').

In your code below you are also destructuring a property named show from each json object in the map function call:

props.shows.map(({show}) => (
            <ShowLink key={show} value={show} />
        ));

In the working json each object has a show: property which itself is an object containing data you want.

In the not working json there is no show: property so you are attempting to access a property that doesnt exist which would return null.

So to solve the issue in the case of the not working url, you simply need to remove the destructuring:

props.shows.map((show) => (
            <ShowLink key={show} value={show} />
        ));

Collectives™ on Stack Overflow

Getting data from JSON with React mapping

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related