轉化JS對象轉換成HTML

-4

[ 
   { 
      "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格式？

來源

2015-10-01 Franco

這是不是一項簡單的任務。 StackOverflow用於詢問您正在編寫的代碼中遇到的問題。它不*請求人爲你寫代碼。 –

不尋找任何人編寫代碼，只是一個起點。 – Franco

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>

來源

2015-10-01 08:09:22 ozil

工作完美，謝謝。 – Franco

你可以使用任何約束力techinique，像AngularJs，VueJs等

檢查這些鏈接

Angular

Vue

來源

2015-10-01 07:53:53

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

來源

2015-10-01 07:55:55

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

來源

2015-10-01 08:49:24

轉化JS對象轉換成HTML

回答

相關問題