How to show array with objects from JSON on page?

Question

I have an array in JSON:

[
    {
        "id": 0,
        "type": "phone",
        "model": "Iphone 11"
    },
    {
        "id": 1,
        "type": "phone",
        "model": "Iphone 11 PRO"
    }
]

I have an 'axios' request :

const [phone,setPhone] = useState({}) // react-hook

const getPhones = () => {
      Axios.get('/phones.json').then(({data}) => {
      setPhone(data)
      console.log(data)
    })
  }

So I want to show, for example 'type' and 'model' from 1st and 2d objects? How i can do it?

It doesn't work

    <div>
      <div>{phone.type}</div>
      <button onClick={getPhones}>click</button>
    </div>

Does this answer your question? [Loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Ajeet Shah, May 03 '20 at 18:04

score 1 · Accepted Answer · answered May 03 '20 at 18:06

1

Try to loop and print out. like this:

<Table> <!-- or dl dd structure -->
<tr>
  <th>c1</th>
  ...
</tr>
{
   phone.map((p,index)=>(
      <tr key={index}>
        <td>{p.mtype}</td>
        ...
      </tr>

   )
}
</Table>

answered May 03 '20 at 18:06

Vahid Alimohamadi

4,900
2
22
37

How to show array with objects from JSON on page?

1 Answers1