CODEWITHSUNDEEP
jqueryjsonlaravel
MrDucky
MrDucky

Reputation: 51

JSON multidimentional array to HTML table Laravel

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

Upvotes: 0

Views: 192

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Related Questions