将 JS 对象转换为 HTML [关闭]答案

【问题标题】：Transforming JS object into HTML [closed]将 JS 对象转换为 HTML [关闭]
【发布时间】：2015-10-01 17:21:11
【问题描述】：

我收到以下 JSON

[
   {
      "fields": {
         "url": "http://www.domain_name.co.uk/MP3/SF560783-01-01-01.mp3\n",
         "track_name": "Lion City ",
         "release_id": 560783,
         "m3u_link": "http://www.domain_name.co.uk/playlists/builder/560783-01.m3u",
         "track_number": 1
      },
      "model": "soundshelterapp.audiolinks",
      "pk": 234422
   },
   {
      "fields": {
         "url": "http://www.domain_name.co.uk/MP3/SF560783-01-02-01.mp3\n",
         "track_name": "Lion City (dub)  ",
         "release_id": 560783,
         "m3u_link": "http://www.domain_name.co.uk/playlists/builder/560783-01.m3u",
         "track_number": 2
      },
      "model": "soundshelterapp.audiolinks",
      "pk": 234423
   }
]

我想将其转换为 HTML，如下所示： (href 来自fields['url'] 和h3 来自fields['track_name']

<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
    <source type="audio/mp3" src="#">
</audio>

<ul id="playlist" style="display:none;">
    <li class="active"><a href="http://www.domain_name.co.uk/MP3/SF560783-01-01-01.mp3"><h3>Lion City</h3></a></li>
    <li class="active"><a href="http://www.domain_name.co.uk/MP3/SF560783-01-02-01.mp3"><h3>Lion City (dub)</h3></a></li>
</ul>

我知道我可以使用var newJ= $.parseJSON(data); 读取 JSON，但是如何将其解析为上面的 HTML 格式？

【问题讨论】：

这不是一项简单的任务。 StackOverflow 用于询问您在编写代码时遇到的问题。不是要求别人为你写代码。
不找人写代码，只是一个起点。

标签： javascript jquery html json

【解决方案1】：

var arr = [{
    "fields": {
        "url": "http://www.domain_name.co.uk/MP3/SF560783-01-01-01.mp3\n",
            "track_name": "Lion City ",
            "release_id": 560783,
            "m3u_link": "http://www.domain_name.co.uk/playlists/builder/560783-01.m3u",
            "track_number": 1
    },
        "model": "soundshelterapp.audiolinks",
        "pk": 234422
}, {
    "fields": {
        "url": "http://www.domain_name.co.uk/MP3/SF560783-01-02-01.mp3\n",
            "track_name": "Lion City (dub)  ",
            "release_id": 560783,
            "m3u_link": "http://www.domain_name.co.uk/playlists/builder/560783-01.m3u",
            "track_number": 2
    },
        "model": "soundshelterapp.audiolinks",
        "pk": 234423
}];
var html = '';
for (var i = 0; i < arr.length; ++i) {
    html += '<li class="active"><a href=' + arr[i].fields.url + '><h3>' + arr[i].fields.track_name + '</h3></a></li>';
}

$("#playlist").append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
    <source type="audio/mp3" src="#">
</audio>
<ul id="playlist"></ul>

【讨论】：

完美运行，谢谢。

【解决方案2】：

使用 jQuery 你可以这样做

var data = [
   {
      "fields": {
         "url": "http://www.domain_name.co.uk/MP3/SF560783-01-01-01.mp3\n",
         "track_name": "Lion City ",
         "release_id": 560783,
         "m3u_link": "http://www.domain_name.co.uk/playlists/builder/560783-01.m3u",
         "track_number": 1
      },
      "model": "soundshelterapp.audiolinks",
      "pk": 234422
   },
   {
      "fields": {
         "url": "http://www.domain_name.co.uk/MP3/SF560783-01-02-01.mp3\n",
         "track_name": "Lion City (dub)  ",
         "release_id": 560783,
         "m3u_link": "http://www.domain_name.co.uk/playlists/builder/560783-01.m3u",
         "track_number": 2
      },
      "model": "soundshelterapp.audiolinks",
      "pk": 234423
   }
];

var list = [];

$(data).each(function (index, el) {
   var li = $('<li />').attr('class', 'active'),
        a = $('<a />').attr('href', el.fields.url),
        h3 = $('<h3 />').text(el.fields.track_name);
    
    list.push(li.html(a.html(h3)));
});

$('#playlist').html(list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="playlist"></ul>

【讨论】：

【解决方案3】：

您可以使用 AngularJS ng-repeat 指令来监听您的 JSON 对象并在列表更新时更新列表 -

(function() {

  var app = angular.module('playlist', []);

  app.controller('playlistController', ['$scope',
    function($scope) {

      $scope.myplaylist = [{
        "fields": {
          "url": "http://www.domain_name.co.uk/MP3/SF560783-01-01-01.mp3\n",
          "track_name": "Lion City ",
          "release_id": 560783,
          "m3u_link": "http://www.domain_name.co.uk/playlists/builder/560783-01.m3u",
          "track_number": 1
        },
        "model": "soundshelterapp.audiolinks",
        "pk": 234422
      }, {
        "fields": {
          "url": "http://www.domain_name.co.uk/MP3/SF560783-01-02-01.mp3\n",
          "track_name": "Lion City (dub)  ",
          "release_id": 560783,
          "m3u_link": "http://www.domain_name.co.uk/playlists/builder/560783-01.m3u",
          "track_number": 2
        },
        "model": "soundshelterapp.audiolinks",
        "pk": 234423
      }];

      $scope.addEntry = function() {
        var newEntry = {
          "fields": {
            "url": "http://www.domain_name.co.uk/MP3/othersong",
            "track_name": "Other song",
            "release_id": 560783,
            "m3u_link": "http://www.domain_name.co.uk/playlists/builder/560783-01.m3u",
            "track_number": 2
          },
          "model": "soundshelterapp.audiolinks",
          "pk": 234423
        }
        $scope.myplaylist.push(newEntry);
      }
    }
  ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="playlist" ng-controller="playlistController as listCtrl">
  My Playlist
  <ul id="playlist">
    <li ng-repeat="song in myplaylist" class="active">
      <a href="{{song.fields.url}}"><h3>{{song.fields.track_name}}</h3></a>
    </li>
  </ul>
  <button ng-click="addEntry()">Add another Entry</button>
</div>

【讨论】：