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": "[email protected]",
            "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": "[email protected]",
            "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": "[email protected]",
            "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?

CodePudding user response：

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