JSON multidimentional array to HTML table Laravel

Question

I have a multidimensional JSON array (see array)

               {
  "items" : [ {
    "track" : {
      "album" : {
        "name" : "Pressure Makes Diamonds"
      },
      "artists" : [ {
        "name" : "Danny Vera"
      } ],
      "href" : "https://api.spotify.com/v1/tracks/7rO7Pc5dkC2EIW1OKsCJtQ",
      "name" : "Roller Coaster"
    }
  }, {
    "track" : {
      "album" : {
        "name" : "Another Day"
      },
      "artists" : [ {
        "name" : "Racoon"
      } ],
      "href" : "https://api.spotify.com/v1/tracks/64SLdE6sV5g4uQIbVIuRCq",
      "name" : "Love You More"
    }
  }, {
    "track" : {
      "album" : {
        "name" : "De Echte Vent"
      },
      "artists" : [ {
        "name" : "Racoon"
      } ],
      "href" : "https://api.spotify.com/v1/tracks/01MCHGtGZHtYVeVUNqgMbC",
      "name" : "De Echte Vent"
    }
  },

but I can't seem to succeed in making this a nice HTML table. I tried several things with jQuery (see code beneath), but none of them work.

var data = {!! $response !!};

    var tbl=$("<table/>").attr("id","mytable");
    $("#div1").append(tbl);
    for(var i=0;i<data.length;i++)
    {
        var tr="<tr>";
        var td1="<td>"+data[i]["tracks"]["album"]["name"]+"</td>";

        $("#mytable").append(tr+td1);

    }

It is built in Laravel8 Little help would be nice :D

Can you please copy and paste the JSON in to the question so we can use it to create a working example of your issue. Images of code are largely useless for this reason. — Rory McCrossan
– Rory McCrossan, Commented Jan 8, 2021 at 14:48
No problem, thanks for editing. I've added an answer for you — Rory McCrossan
– Rory McCrossan, Commented Jan 8, 2021 at 14:54

Rory McCrossan · Accepted Answer · 2021-01-08 14:56:54Z

1

The main issue is because you're looping through data, which is the object, not data.items which is the array. In addition there is no tracks property, it's named track.

Once that's corrected the code works:

var data = {"items":[{"track":{"album":{"name":"Pressure Makes Diamonds"},"artists":[{"name":"Danny Vera"}],"href":"https://api.spotify.com/v1/tracks/7rO7Pc5dkC2EIW1OKsCJtQ","name":"Roller Coaster"}},{"track":{"album":{"name":"Another Day"},"artists":[{"name":"Racoon"}],"href":"https://api.spotify.com/v1/tracks/64SLdE6sV5g4uQIbVIuRCq","name":"Love You More"}},{"track":{"album":{"name":"De Echte Vent"},"artists":[{"name":"Racoon"}],"href":"https://api.spotify.com/v1/tracks/01MCHGtGZHtYVeVUNqgMbC","name":"De Echte Vent"}}]}

var tbl = $("<table/>").prop("id", "mytable");
$("#div1").append(tbl);

for (var i = 0; i < data.items.length; i++) {
  var tr = "<tr>";
  var td1 = "<td>" + data.items[i]["track"]["album"]["name"] + "</td>";
  $("#mytable").append(tr + td1);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1"></div>

It's worth noting that this can be simplified using map():

var data = {"items":[{"track":{"album":{"name":"Pressure Makes Diamonds"},"artists":[{"name":"Danny Vera"}],"href":"https://api.spotify.com/v1/tracks/7rO7Pc5dkC2EIW1OKsCJtQ","name":"Roller Coaster"}},{"track":{"album":{"name":"Another Day"},"artists":[{"name":"Racoon"}],"href":"https://api.spotify.com/v1/tracks/64SLdE6sV5g4uQIbVIuRCq","name":"Love You More"}},{"track":{"album":{"name":"De Echte Vent"},"artists":[{"name":"Racoon"}],"href":"https://api.spotify.com/v1/tracks/01MCHGtGZHtYVeVUNqgMbC","name":"De Echte Vent"}}]}

let rows = data.items.map(item => `<tr><td>${item.track.album.name}</td></tr>`);
var $tbl = $("<table/>").prop("id", "mytable").html(rows).appendTo('#div1')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1"></div>

edited Jan 8, 2021 at 14:56

answered Jan 8, 2021 at 14:54

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

8 Comments

Rory McCrossan Over a year ago

No problem, glad to help. I updated the answer to show you a simplified version too.

MrDucky Over a year ago

Thanks!, now I have to figure out how to make this nice with Bootstrap :d

MrDucky Over a year ago

Okay last question :). I can't reach the name of the artist? I tried: item.track.artists.name, but I get an "undefined" back in the table?

Rory McCrossan Over a year ago

artists is an array, so you can access them by index (eg.item.track.artists[0].name would get the first one), or by looping through to get them all

Rory McCrossan Over a year ago

I'd suggest starting a new question if you're getting in to Datatables

|

Collectives™ on Stack Overflow

JSON multidimentional array to HTML table Laravel

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related