使用 JQuery/Ajax 解析 JSON 的问题

Question

我正在通过 JQuery/JSON 访问 API。我可以使用以下命令将整个 JSON 块显示在页面上：

$.ajax({
    type: 'GET',
    url: url,
    dataType: 'json',
    contentType: 'application/json',
    headers: {'Access-Control-Allow-Origin': '*'},
    beforeSend: function (xhr){
        xhr.setRequestHeader('Authorization', 'Basic ' + btoa('un:pw'));
    },
    error: function(jqXHR, textStatus, data){
        console.log("(1)Static error message");
        console.log("(2)Output of textStatus " + textStatus);
        console.log("(3)Output of data " + data);
    },
    success: function(data) {
        var myData = data;
        $('#myData').html('<p>'+ myData +'<p>') 
    }
})

但是，当我尝试从该 JSON 访问键/值时，我得到未定义。我想我没有正确解析 JSON。这是我在成功函数中尝试的一些代码示例：

$.each(myData.blockOne, function(data){
    $('#myData').html('<p>'+ this.blockOne.id +'<p>')
});

这是 JSON 的一个示例：

[
    {
        "ItemName": {
            "id": "XYZ",
            "caseNumber": "123"
        },
        "blockOne": [
            {
                "id": "ABC",
                "subject": "321",
            }
        ],
        "blockTwo": [
            {
                "id": "EFG",
                "subject": "456",
            }
        ]
    },
    {
        "ItemName": {
            "id": "HIJ",
            "caseNumber": "333"
        },
        "blockOne": [
            {
                "id": "JIL",
                "subject": "999",
            }
        ],
        "blockTwo": [
            {
                "id": "OPE",
                "subject": "778",
            }
        ]
    },
]

我正在尝试输出如下内容：

物品

ID：XYZ

案例：123

第 1 块：

• ID：ABC
• 主题：321

第 2 块：

• ID：EFG
• 主题：456

---

物品

ID：HIJ

案例：333

第 1 块：

• ID：吉尔
• 主题：999

第 2 块：

• ID：OPE
• 主题：778

非常感谢任何帮助。

Answer 1

在$.each()内部，需要循环myData数组而不是myData.blockOne，因为myData.blockOne只返回blockOne对象的数据。

var myData = [{
    "ItemName": {
      "id": "XYZ",
      "caseNumber": "123"
    },
    "blockOne": [{
      "id": "ABC",
      "subject": "321",
    }],
    "blockTwo": [{
      "id": "EFG",
      "subject": "456",
    }]
  },
  {
    "ItemName": {
      "id": "HIJ",
      "caseNumber": "333"
    },
    "blockOne": [{
      "id": "JIL",
      "subject": "999",
    }],
    "blockTwo": [{
      "id": "OPE",
      "subject": "778",
    }]
  },
];

var html = "";

$.each(myData, function() {
  html += `
    <p>Item</p>
    <p>ID :${this.ItemName.id}</p>
    <p>Case :+${this.ItemName.caseNumber}</p>
    <p>Block 1:</p>
    <ul>
       <li>ID :${this.blockOne[0].id}</li>
       <li>Subject :${this.blockOne[0].subject}</li>
    </ul>
    <p>Block 2:</p>
    <ul>
       <li>ID :${this.blockTwo[0].id}</li>
       <li>Subject :${this.blockTwo[0].subject}</li>
    </ul>
    `
});

$('#myData').html(html)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myData"></div>