How can I loop through a nested loop and show data

Question

Hey I am trying to show data from this api data

{
    "status": "success",
    "data": [
        {
            "id": 1,
            "created_at": "2022-12-20T15:20:42.000000Z",
            "updated_at": "2022-12-20T15:20:42.000000Z",
            "lp_campaign_id": "61c158df57694",
            "lp_campaign_key": "MQkGFrhcbtx4BDzq87TP",
            "lp_supplier_id": "asdasd",
            "first_name": "Test",
            "last_name": "test",
            "phone": "+1234567893",
            "email": "test@gmail.com",
            "zip_code": "2356"
        },
        {
            "id": 2,
            "created_at": "2022-12-20T15:20:57.000000Z",
            "updated_at": "2022-12-20T15:20:57.000000Z",
            "lp_campaign_id": "61c158df57694",
            "lp_campaign_key": "MQkGFrhcbtx4BDzq87TP",
            "lp_supplier_id": "asdasd",
            "first_name": "Test",
            "last_name": "test",
            "phone": "+1234567893",
            "email": "test@gmail.com",
            "zip_code": "2356"
        },
        {
            "id": 3,
            "created_at": "2022-12-20T15:22:18.000000Z",
            "updated_at": "2022-12-20T15:22:18.000000Z",
            "lp_campaign_id": "61c158df57694",
            "lp_campaign_key": "MQkGFrhcbtx4BDzq87TP",
            "lp_supplier_id": "asdasd",
            "first_name": "Test",
            "last_name": "test",
            "phone": "+1234567893",
            "email": "test@gmail.com",
            "zip_code": "2356"
        }
    ]
}

It has nested loop I guess. So how can I show data using react js. I tried using react js but failed to show data using my code I shown below.

Here what I tried

let [leads, setLeads] = useState([])

const url = "http://127.0.0.1:8000/api/data"

useEffect(() => {
    fetch(url).then(response => {
        console.log(response)
    })
    .then(result => {
        setLeads(result)
    })
    .catch(e => {
        console.log(e)
    })
})
 {
                            leads ?
                            leads.map(
                                (lead) => {
                                    return (
                                        <tr className="hover:bg-gray-100 p-3">
                                            <td>{lead.data.created_at}</td>
                                            <td>123</td>
                                            <td>123</td>
                                            <td>123</td>
                                            <td>123</td>
                                        </tr>
                                    )
                                }
                            ):

                            <>Data Not Found</>
                  
                        }

I am not familiar with react js at all. Som I have no idea about it. What is the easy way to show the data?

Answer 1

You can try this code, so you can get the response and use the array in data property in the response.

    let [leads, setLeads] = useState([]);
    
    const url = "http://127.0.0.1:8000/api/data";
    
    useEffect(() => {
      fetch(url)
        .then((response) => 
          (response.json())
        )
        .then((result) => {
          setLeads(result.data);
        })
        .catch((e) => {
          console.log(e);
        });
    },[]);
  return leads ? (
    leads.map((lead, index) => (
      <tr className="hover:bg-gray-100 p-3" key={lead.id}>
        <td>{lead.created_at}</td>
        <td>{lead.updated_at}</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
      </tr>
    ))
  ) : (
    <>Data Not Found</>
  );