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": "[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?

@Konrad can you please explain and post the solution? that would be great for me — Sakib ovi
– Sakib ovi, Commented Dec 20, 2022 at 21:26

dreambold · Accepted Answer · 2022-12-20 22:10:18Z

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

edited Dec 20, 2022 at 22:10

answered Dec 20, 2022 at 21:29

dreambold

3,1001 gold badge16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sakib ovi Over a year ago

TypeError: Cannot read properties of undefined (reading 'json') at MainContent.jsx:17:29 I am getting this error.

dreambold Over a year ago

codesandbox.io/s/elated-herschel-w59dj6?file=/src/App.js please have a look at this

Sakib ovi Over a year ago

still not working with you code you posted

Sakib ovi Over a year ago

I did the same as you posted the code in the sandbox still the same :( @Dream Bold

Collectives™ on Stack Overflow

How can I loop through a nested loop and show data

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related