JavaScript code isn't returning data from the API

Question

import React, { Component } from 'react';

export class FetchData extends Component {
  static displayName = FetchData.name;

  constructor(props) {
    super(props);
    this.state = { users: [], loading: true };
  }

  componentDidMount() {
    this.populateUserData();
  }

  static renderUsersTable(users) {
    return (
      <table className='table table-striped' aria-labelledby="tabelLabel">
        <thead>
          <tr>
            <th>Username</th>
            <th>Likes</th>
            <th>Image Url</th>
          </tr>
        </thead>
        <tbody>
          {users.map(id =>
            <tr key={id.user}>
              <td>{id.username}</td>
              <td>{id.likes}</td>
              <td>{id.imageUrl}</td>
            </tr>
          )}
        </tbody>
      </table>
    );
  }

  render() {
    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : FetchData.renderUsersTable(this.state.users);

    return (
      <div>
        <h1 id="tabelLabel" >API info</h1>
        <p>This component demonstrates fetching data from the api.</p>
        {contents}
      </div>
    );
  }

  async populateUserData() {
    const response = await fetch('http://api.myjson.com/bins/1ge417');
    const data = await response.json();
    this.setState({ users: data, loading: false });
  }
}

Why isn't my JavaScript code returning any data from the JSON API ? I have specified an Array type, and it still doesn't return anything. Any help/correction will be appreciated!

P.S. This is a template which I'm using from "dotnet new react -o my-new-app"

Its good practice to use a trycatch block or something similar for error handling — Kevin.a
– Kevin.a, Commented Nov 5, 2019 at 9:37
what is the format of the incoming data ... an example would help — Bravo
– Bravo, Commented Nov 5, 2019 at 9:38

Mischa · Accepted Answer · 2019-11-05 09:38:25Z

The problem is in your map-function. You need to extract the id as key, the user which holds the actual user-information and the post for the likes and the imageUrl:

import React, { Component } from 'react';

export class FetchData extends Component {
  static displayName = FetchData.name;

  constructor(props) {
    super(props);
    this.state = { users: [], loading: true };
  }

  componentDidMount() {
    this.populateUserData();
  }

  static renderUsersTable(users) {
    return (
      <table className='table table-striped' aria-labelledby="tabelLabel">
        <thead>
          <tr>
            <th>Username</th>
            <th>Likes</th>
            <th>Image Url</th>
          </tr>
        </thead>
        <tbody>
          {users.map(({id, user, post}) =>
            <tr key={id}>
              <td>{user.username}</td>
              <td>{post.likes}</td>
              <td>{post.imageUrl}</td>
            </tr>
          )}
        </tbody>
      </table>
    );
  }

  render() {
    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : FetchData.renderUsersTable(this.state.users);

    return (
      <div>
        <h1 id="tabelLabel" >API info</h1>
        <p>This component demonstrates fetching data from the api.</p>
        {contents}
      </div>
    );
  }

  async populateUserData() {
    const response = await fetch('http://api.myjson.com/bins/1ge417');
    const data = await response.json();
    this.setState({ users: data, loading: false });
  }
}

take a look at your json:

[
    {
        "id": 1,
        "user": {
            "username": "Ola Nordmann",
            "profileImageUrl": "https://randomuser.me/api/portraits/men/43.jpg"
        },
        "post": {
            "text": "En post-tekst!",
            "likes": 123,
            "imageUrl": "https://picsum.photos/id/1023/500/500"
        }
    },
    {
        "id": 2,
        "user": {
            "username": "Kari Nordmann",
            "profileImageUrl": "https://randomuser.me/api/portraits/men/42.jpg"
        },
        "post": {
            "text": "Sjekk bildet mitt!",
            "likes": 233,
            "imageUrl": "https://picsum.photos/id/1018/500/500"
        }
    },
    {
        "id": 3,
        "user": {
            "username": "Henrik Wergeland",
            "profileImageUrl": "https://randomuser.me/api/portraits/men/41.jpg"
        },
        "post": {
            "text": "Meget posei!",
            "likes": 300,
            "imageUrl": "https://picsum.photos/id/1002/500/500"
        }
    }
]

user11910739 · Accepted Answer · 2019-11-05 09:42:29Z

0

Can you please use SSL URL. If your application is running on https then your API should be in https.

I guess that's the problem for you. Can you update below line in your code and check it.

const response = await fetch('https://api.myjson.com/bins/1ge417'); // use https instead of http

Hope this will work for you!

Here have created demo for you. https://stackblitz.com/edit/react-wd8o27

answered Nov 5, 2019 at 9:42

user11910739

Collectives™ on Stack Overflow

JavaScript code isn't returning data from the API

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related