CODEWITHSUNDEEP
javascriptreactjsaxios
Karl
Karl

Reputation: 111

How to specify JSON data from WEB API in React Axios

Just a simple question here, I'm using ASP.NET Web API and ReactJS, and the instrument for reading JSON I'm currently using Axios, this is my JSON data:

[
    {
        "id": 1,
        "name": "Count Duck",
        "age": 3
    },
    {
        "id": 4,
        "name": "Count Dracula",
        "age": 288
    },
    {
        "id": 5,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 6,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 7,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 8,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 9,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 10,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 11,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 12,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 13,
        "name": "Frankenstein",
        "age": 45
    }
]

This is my axios request:

async getDataAxios(){
    const response = await axios.get("https://localhost:5001/monsters");
    const data = await response.data;
    this.setState({ monsters: data, loading: false });
    console.log(data);
  } catch(err) {
      console.log(err)
 }
}

currently I'm using this, but I get an error: (Uncaught TypeError: Cannot read property 'name' of undefined)

static renderMonstersTable(monsters) {
    return (
      <table className='table table-striped' aria-labelledby="tabelLabel">
        <thead>
          <tr>
            <th>Username</th>
            <th>Image</th>
          </tr>
        </thead>
        <tbody>
          {monsters.map(({items}) =>
            <tr key="">
              <td>{items.name}</td>
              <td>{items.age}</td>
            </tr>
          )}
        </tbody>
      </table>
    );
  }

Any help or correction would be appreciated!

Upvotes: 1

Views: 311

Answers (3)

Nicolas Hevia
Nicolas Hevia

Reputation: 15857

It's possible to do what you're trying to do. If you still want to de-structure your array items, you need to change {items} to what you're using. In this case {id, name, age}.

The difference between both ways would be:

{monsters.map(({ id, name, age}) => (
  <tr key={id}>
  <td>{name}</td>
  <td>{age}</td>
  </tr>
))}

And

{monsters.map(monster => (
  <tr key={monster.id}>
  <td>{monster.name}</td>
  <td>{monster.age}</td>
  </tr>
))}

Here is a working example, using a placeholder API: Codesandbox

Upvotes: 0

Devel JD
Devel JD

Reputation: 53

async getDataAxios(){
  try{
    const response = await axios.get("https://localhost:5001/monsters");
    const data = response.data; /// you don't really need await here
    this.setState({ monsters: data, loading: false });
  } catch(err) {
      console.log(err)
 }
}

loop through like this. Do not use curly braces {} on monster parameter will fix ur issue.

monsters.map( monster =>
            `<tr key=${monster.id}>
              <td>${monster.name}</td>
              <td>${monster.age}</td>`

Upvotes: 1

Viktor Garba
Viktor Garba

Reputation: 313

So your the data your working with (monsters / on the component actually this.state.monsters because it looks like you're using react) is an array of objects. When you do monsters.map you are looping over each element in your monsters array. The function you pass to monsters.map will take a parameter (your first '???') which will point to each object as it loops over the array. Inside that function you can use that parameter to access keys on the monster object. Which is how we fill out the rest of the '???'

It would look like this:

(
  monsters.map(monster => (
    <tr key={monster.id}>
      <td>{monster.name}</td>
      <td>{monster.age}</td>
    <tr/>
  )
)

Upvotes: 3

Related Questions