Problems fetching data from an API

JavaScript
1

Hello! I’m trying to fetch an data from an API here is my code.

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      items: [],
      isLoaded: false,
      }
    }

    componentDidMount(){

      fetch('https://data.cityofnewyork.us/api/views/25th-nujf/rows.json')
        .then(res => res.json())
        .then(json => {
            this.setState({
              isLoaded: true,
              items: json,
            })
        });
    }

    render() {

      var { isLoaded, items } = this.state;

      if (!isLoaded) {
        return <div>Loading...</div>;
      }

      else {

        return (
          <div className="App">

          <ul>
             {items.map(item => (
                <li key={item.id}>
                      Name: {item.name} | Id: {item.id}
                </li>
             ))};
          </ul>

            </div>
        );

      }
    }
  }

export default App;`

And in the console, I’m getting

TypeError: items.map is not a function

 <div className="App">

<ul>
    {items.map(item => (
     <li key={item.id}>
           Name: {item.name} | Id: {item.id}
       </li>
3

The goal of this assignment is to pull a set of data, process it and show the results in a visual format. Query a set of data containing the most popular baby names in New York City. Then populate a list of filters: Year, Gender and Ethnicity. Generate a visual representation of the top 10 baby names that match the user’s criteria.

4

I tried…

import React, { Component } from 'react';
class App extends Component {

  constructor()
   {
    super();
    this.state = {
      data: null,
      }
      this.getData();
    }

    getData()
    {
      let data= fetch('https://data.cityofnewyork.us/api/views/25th-nujf/rows.json').then((resp) =>{
        resp.json().then((res)=>{
        console.log(res.view);
        this.setState({data:res.view})
        })
      })
    }

    render() {

      return (
        <div>
        {
        this.state.data ?
        this.state.data.map((item)=>
        <div>
        <h3>{item.name}</h3>
        </div>
        )
          :
          <h3>Wait... data is fetching</h3>

        }
        </div>


        )
    }
  }

But when I do i get the “Wait…data is fetching” h3 element, but the data doesn’t fetch.

7

Once you figure out how to assign the data array to a property in state named data, then you could use the following to display all the names and their corresponding sid number.

      <div className="App">
        <ul>
          {data.map(item => {
            const id = item[0],
                  name = item[item.length - 3];
            return (
              <li key={id}>
                Name: {name} | Id: {id}
              </li>
            );
          })}
        </ul>
      </div>
8 
<p>import React, { Component } from 'react';
class App extends Component {

  constructor()
   {
    super();
    this.state = {
      data: null,
      }
      this.getData();
    }

    getData()
    {
      let data= fetch('https://data.cityofnewyork.us/api/views/25th-nujf/rows.json').then((resp) =>{
        resp.json().then((res)=>{
        console.log(res.meta);
        this.setState({data:res.view})
        })
      })
    }

    render() {

      return (
        <div>
        {
        this.state.data ?
        this.state.data.map((item)=>
        <div>
        <h3>{item.name}</h3>
        </div>
        )
          :
          <h3>Wait... data is fetching</h3>

        }
        </div>


        )
    }
  }



    export default App;</p>

Like this?

9

Where is setState function?
im no react expert but …
and super() is not that the class above like the class it extends from?
props where is that?

10

I changed my code from that one. After the one I posted.

12

I appericate your help and knownledge Randell. I apologize making it hard to read my code. So this is what I came up with https://codepen.io/devgoi/pen/LJJMvN

Still new to React, literally started this week, so sorry if my questions seem dumb, lol.

14

I re-wrote

import React, { Component } from 'react';
export default App;

and changed it to

class App extends React.Component {
}

and also added the fetch inside the componentDidMount. I know this is very basic, but for some reason after a few days working on this, my mind can’t seem to wrap around it. I also copy and added your code. Here’s my update. My Code

16

Ok, after going back to the react docs, and a few videos, here is what I came up with. I did not get any errors, but the code you gave me to show the data in a ul, wouldn’t work. Updated code.