Question

我正在接受以下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格式？

Answer 1

您可以使用任何绑定技术，如AngularJs，VueJs等。

检查这些链接

Angular

Vue

Answer 2

使用jQuery，你可以这样做

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您可以使用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>

将JS对象转换为HTML

4 个答案: