使用 JQuery/Ajax 解析 JSON 的问题

Posted 2023-05-08

【中文标题】使用 JQuery/Ajax 解析 JSON 的问题

【英文标题】：Issues parsing JSON with JQuery/Ajax

【发布时间】：2021-03-13 22:38:57

【问题描述】：

我正在通过 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

非常感谢任何帮助。

【问题讨论】：

ajax 请求已经将响应从 json 解析到对象/数组。这是因为您有 dataType: 'json' 告诉 ajax 您希望返回 json，因此它会自动为您解析它。然后，您将获取已解析的对象并将其附加到段落字符串中。如果您希望它仍然是一个字符串，则需要将您的 dataType 声明更改为 text。

供参考：api.jquery.com/jQuery.ajax

看起来数据的外部容器是一个数组，您正试图从中访问“blockOne”属性。

我想你想要$.each(myData，而不是$.each(myData.blockOne

我认为 @CharlesBamford 正在做一些事情，但我不确定我的代码要更改什么。

【参考方案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>

【讨论】：

这很接近，但它只显示第一个实例。即使有你的例子。我把它放在 JSFiddle 这里 → jsfiddle.net/seg7vf69

实例是什么意思？数组中有多个元素吗？

是的，即使在您发布的示例中，也有两个“ItemName”块。您的代码只显示一个。

很抱歉。我更新了我的代码。请检查