объекта Преобразование JS в HTML

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> 

Я знаю, что могу читать в JSON, используя var newJ= $.parseJSON(data);, но как его разобрать в формате HTML выше?

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

Answer 2

Вы можете использовать любой связывающий techinique, как AngularJs, VueJs и т.д.

Проверить эти ссылки

Angular

Vue

Answer 3

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

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>