javascript - 无法使用 api 调用的 json 响应填充 html 表

标签 javascript json ajax

我尝试了以下代码的一些变体,用 json 数据填充 html 表。为了简化,我将 api 响应限制为 1。 json 数据似乎嵌套得很重,但我不知道如何实际解析和显示数据。关于我做错了什么有什么想法吗?首先,我只想显示“名称”。

这是回复:

{"list":[{"id":31,"name":".Scala_Test_Player 0696GS (RMS09061606)","uuid":"a363ef6c-4ea0-4835-bd98-03b27e9139fc","previewPlayer":false,"enabled":true,"mac":"00-00-00-00-00-00","type":"CHROMEBOX","distributionServer":{"id":2,"name":"Main","driver":"IP_P2P"},"playergroups":[{"id":2,"name":"GameStop","numberOfPlayers":24}],"playerDisplays":[{"id":31,"name":"Display 1","channel":{"id":51,"name":"Test Channel 2 videos"},"screenCounter":1}],"requestLogs":false,"downloadThreads":1,"unusedFilesCache":24,"planDeliveryMethod":"CONTENT_MANAGER_DIRECT","pollingInterval":1,"pollingUnit":"MINUTES","logLevel":"normal","metadataValue":[{"id":551,"value":"12","playerMetadata":{"id":18,"name":"Player.ScreenOnOff_Model","datatype":"STRING","valueType":"PICKLIST","order":2,"predefinedValues":[{"id":7,"value":"SONYFWD-40LX2F","sortOrder":1},{"id":8,"value":"NECLCD4215","sortOrder":2},{"id":10,"value":"PANASONIC","sortOrder":3},{"id":11,"value":"PHILIPS","sortOrder":4},{"id":12,"value":"SAMSUNG","sortOrder":5}]}},{"id":457,"value":"21:15","playerMetadata":{"id":10,"name":"Player.ScreenOff_Wednesday","datatype":"STRING","valueType":"ANY","order":11}},{"id":548,"value":"09:00","playerMetadata":{"id":12,"name":"Player.ScreenOn_Monday","datatype":"STRING","valueType":"ANY","order":6}},{"id":455,"value":"21:00","playerMetadata":{"id":7,"name":"Player.ScreenOff_Sunday","datatype":"STRING","valueType":"ANY","order":5}},{"id":546,"value":"09:05","playerMetadata":{"id":11,"name":"Player.ScreenOn_Friday","datatype":"STRING","valueType":"ANY","order":14}},{"id":547,"value":"21:15","playerMetadata":{"id":4,"name":"Player.ScreenOff_Friday","datatype":"STRING","valueType":"ANY","order":15}},{"id":453,"value":"100","playerMetadata":{"id":2,"name":"Player.ChromeVolume","datatype":"INTEGER","valueType":"ANY","order":3}},{"id":456,"value":"09:05","playerMetadata":{"id":17,"name":"Player.ScreenOn_Wednesday","datatype":"STRING","valueType":"ANY","order":10}},{"id":550,"value":"13","playerMetadata":{"id":25,"name":"Player.Screen_Input","datatype":"STRING","valueType":"PICKLIST","order":24,"predefinedValues":[{"id":15,"value":"DP","sortOrder":1},{"id":16,"value":"DVI","sortOrder":2},{"id":34,"value":"HD15","sortOrder":3},{"id":13,"value":"HDMI1","sortOrder":4},{"id":14,"value":"HDMI2","sortOrder":5},{"id":17,"value":"PC","sortOrder":6}]}},{"id":549,"value":"21:05","playerMetadata":{"id":5,"name":"Player.ScreenOff_Monday","datatype":"STRING","valueType":"ANY","order":7}},{"id":454,"value":"00:00","playerMetadata":{"id":14,"name":"Player.ScreenOn_Sunday","datatype":"STRING","valueType":"ANY","order":4}}],"usedPairingKey":"R3Y4N2","active":"HEARTBEAT_OVERDUE","lastModified":"2016-12-20 18:26:27"}],"offset":0,"count":36}

HTML:

<table>
<tbody id="scalaapi">
<tr><td></td></tr>
</tbody>
</table>

脚本:

function jsonData()
{

$.ajax({
    type:'GET',
    url:"https://avacmd25.scala.com:44335/ContentManager/api/rest/players?limit=1&offset=0&sort=name",
    datatype:'json',
    success:function(data)
    {
        var jdata=$.parseJSON(data);
        $(function(){
            $.each(jdata,function(i,item){
                var tr = $('<tr>').append(
                $('<td>').text(list.name),              
            $("#scalaapi tbody").append(tr));
            })
        })

    }
})
}

最佳答案

您以错误的方式实现.append,并且选择tbody似乎也是错误的。

如果您得到如上所述的正确响应,请在 success 回调中尝试此操作

success: function(data) {
  var list = data.list;
  $.each(list, function(i, item) {
    var tr = $('<tr>').append($('<td>').text(item.name)); //taking name
    $("#scalaapi").append(tr);
  });
}

关于javascript - 无法使用 api 调用的 json 响应填充 html 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41837630/

相关文章:

javascript - 显式 jquery indexOf()

javascript - 使用 css 的响应之字形布局?

javascript - 使用 DatePicker(仅月日,无年份)、Moment.js 和 JSON 来填充事件或报价

javascript - 使用 join 打印数组中所有对象的特定属性

javascript - Spring 不执行回调的 $.getJSON

php - 非常简单的ajax添加到购物车

javascript - 在 .net 中使用 ajax 切换不处理动态内容的数据

javascript - Dajaxice javascript 核心文件未被解析

javascript - jQuery 加载不同质量级别的图像

c# - 使用匹配的大括号拆分字符串的最佳方法