Make table from Json response

I have an API which has return this Json Response in my blade view, I want to know how can i make a table base on response i have

Json Response

        {
           "n":0,
           "i1":0,
           "i2":3,
           "t1":1681297305,
           "t2":1681498547,
           "d":4,
           "c":[
              
           ],
           "r":[
              {
                 "n":0,
                 "i1":0,
                 "i2":0,
                 "t1":1681297305,
                 "t2":1681297305,
                 "d":0,
                 "c":[
                    "1.1",
                    "8010601138-RRA",
                    {
                       "t":"2023-04-12 11:01:45",
                       "v":1681297305,
                       "y":-6.84530333333,
                       "x":39.29357,
                       "u":600066264
                    },
                    "2023-04-12 11:03:54",
                    {
                       "t":"8010601138-RRA: BACK CAP OPEN. At 12.04.2023 14:01:45 it moved with speed 0 km/h near 'Nelson Mandela Road, Dar Es Salaam, Kurasini, Tanzania'.",
                       "y":-6.84530333333,
                       "x":39.29357,
                       "u":600066264
                    },
                    {
                       "t":"Nelson Mandela Road, Dar Es Salaam, Kurasini, Tanzania",
                       "y":-6.84530333333,
                       "x":39.29357,
                       "u":600066264
                    },
                    "1"
                 ]
              },
              {
                 
              },
              {
                 
              },
              {
                 
              }
           ]
        }

Am expect to have this table

              Time                                                       events Text                                      
              "2023-04-12 11:03:54",                        "t":"8010601138-RRA: BACK CAP OPEN. At 12.04.2023 14:01:45 it moved with speed 0 km/h near 'Nelson Mandela Road, Dar Es Salaam, Kurasini, Tanzania'.",

see above response

I have tried like this but am not get good output table

        function get_report() {
            $.ajax({
                type: "get",
                url: "{{ route('get_report') }}",
                data: {
                    from_date: from_date,
                    to_date: to_date
                },
            }).done(function(response) {
                // console.log('Report',response)
                collection = response.rows.original.data[0].r[0].c
                // console.log('rows',collection.c)
                $.each(collection.slice(2), function(i, row) {

                    text = row.t
                    x = row.x
                    y = row.y
                    html = `
                    <tr>

                        <td>${i}</td>
                        <td>${text}</td>
                        <td>${x} ,${y}</td>

                    </tr>
                    `
                    console.log(html)
                    $("#rows").append(html)

                });

            }).fail(function(data) {
                console.log(data)
            });
        }

Thanks

Tray2

3 years ago

Level 73

The esiest would be doing something like this

flows.map(function (flow) {
  tableBody +=(`<tr>
                  <td>${flow.flow}</td>
                  <td>${flow.to_pick}</td>
                  <td>${flow.shortage_qty}</td>
                  <td>${flow.created}</td>
                </tr>`);
});

document.querySelector('#flow-page table tbody').innerHTML = tableBody;

melx

3 years ago

Level 4

@Tray2 not understand sir,,,

Tray2

3 years ago

Level 73

@melx What is there not to understand?

You loop through the json adding a table row on each iteration and then you add the the result to the table body.

Please or to participate in this conversation.