How to specify JSON data from WEB API in React Axios

Question

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!

Possible duplicate of [How to set state of response from axios in react](https://stackoverflow.com/questions/41194866/how-to-set-state-of-response-from-axios-in-react) — Emile Bergeron, Nov 06 '19 at 17:15
You are destructuring { items }, but there is not `items` property on your objects. take the curly brackets off from around your items object — skellertor, Nov 06 '19 at 17:24

score 3 · Accepted Answer · answered Nov 06 '19 at 17:25

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/>
  )
)

{users.map(items => {items.name} {items.age} )} – Viktor Garba Nov 06 '19 at 17:28 — Viktor Garba, Nov 06 '19 at 17:28

Devel JD · Answer 2 · 2019-11-06T17:30:17.680

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>`

score 0 · Answer 3 · answered Nov 06 '19 at 17:44

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

How to specify JSON data from WEB API in React Axios

3 Answers3