JSON多维数组到HTML表格Laravel

Question

我有一个多维JSON数组(参见数组)

               {
  "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"
    }
  },

但是我似乎不能成功地使它成为一个很好的HTML表。我用jQuery尝试了几种方法(参见下面的代码)，但都不起作用。

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

    }

它是在Laravel8中构建的，只要有一点帮助就好了:D

Answer 1

主要问题是因为您循环通过的是data，它是对象，而不是data.items，它是数组。此外，没有tracks属性，它被命名为track。

一旦纠正了这个错误，代码就可以正常工作了：

​

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>

​

值得注意的是，可以使用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>

​