显示JSON对象数组内部的元素

时间:2019-12-04 14:22:51

标签: jquery html

我可以显示我的JSON对象的元素,但是如果它在数组中,则会卡住。

这是我的代码:

   $.ajax({
            method: "GET",
            url: api_url,
            // url: mock_url,
            contentType: "application/json",
            data: adminPrefData,
            success: function (res) {
                console.log(res);
                // callback(res);
                $('#module').text(res.module);  // i get this
                $('#networkId').text(res.networkId); // and this
                $('#adminPrefInfo.type').text(res.adminPrefInfo.type); // nothing happens on page
            },
            error: function () {
                $('#info').html('<p>An error has occured</p>');
            },
        });

这是我的HTML:

 <div class="content">
        <div class="nav-link-content home">
            <h1 class="text-center" id="module"></h1>
            <div class="text-center" id="networkId"></div>
            <div class="text-center" id="adminPrefInfo.type"></div>
        </div>
</div>

这是我得到的JSON:

{"module":"dnd","networkId":1,"adminPrefInfo":[{"id":1,"key":"teszt","value":"teszt","defValue":"teszt1","type":"checkbox","isActive":true}]}

3 个答案:

答案 0 :(得分:3)

第一个问题是因为HTML元素的id属性中有句点。您需要使用\\在jQuery选择器中对其进行转义。第二个问题是adminPrefInfo是一个数组。因此,您需要按索引访问它,然后获取type属性。试试这个:

$('#adminInfoList\\.type').text(res.adminPrefInfo[0].type);

答案 1 :(得分:0)

类型存在一个小错误,该错误/索引在0处可用

const ajaxResponse = {
  "module": "dnd",
  "networkId": 1,
  "adminPrefInfo": [
    {
      "id": 1,
      "key": "teszt",
      "value": "teszt",
      "defValue": "teszt1",
      "type": "checkbox",
      "isActive": true
    }
  ]
};

console.log(ajaxResponse);
console.log(ajaxResponse.module); // dnd
console.log(ajaxResponse.networkId); // 1
console.log(ajaxResponse.adminPrefInfo); //object type: "adminPrefInfoType"
console.log(ajaxResponse.adminPrefInfo[0].type); // checkbox

答案 2 :(得分:-1)

这是因为adminPrefInfo是对象数组。您需要遍历它才能访问type属性,如下所示:

res.adminPrefInfo.map(adminInfo => console.log(adminInfo.type));