从 AJAX 调用访问嵌套的 JSON 数据

access nested json data from ajax call

本文关键字：JSON 数据 嵌套 访问 AJAX 调用      更新时间：2023-09-26

我正在与一个将JSON数据返回给我的API接口。由于结果不是存储在文件中，而是存储在服务器内存中，因此我很难弄清楚如何访问数据并将其写入我的 html 网页。 这是我的 $.ajax 调用的样子：

        $.ajax({
            type: "post",
            url:"https://www.xxx/v1/trips/search?  key=xxxx",
            data:JSON.stringify({request : requestTrav1Dest1}),
            dataType:"json",
            success:successFunction,
            headers:{"Content-Type":"application/json"}
            });

以下是我从服务器返回的 JSON 的样子：

{
"kind": "#tripsSearch",
"trips": {
  "kind": "#tripOptions",
  "tripOption": [
   {
    "saleTotal": "USD294.10",
    "id": "DMfSXrkVQGKTVQsDD5l60N004",
   },
    "saleTotal": "USD333.10",
    "id": "DMfSXrkVQGKTVQsDD5l60N002",
   },
   {
    "saleTotal": "USD225.94",
    "id": "DMfSXrkVQGKTVQsDD5l60N005",
   }
  ]
 }
}

我真正需要的是每次旅行选项的销售总额。

我在这里分解了如果查询成功则运行的函数：

function successFunction(servResponse){
        $('#content').load('resultsPage.html #content');
        var newContent = '';
        for(var i = 0; i < servResponse.trips.tripOption[i].length; i++){
            newContent += '<div class="results">';
            newContent += '<p>' + "Option " + (i+1) + '<br>';
            newContent += servResponse.trips.tripOption[0].saleTotal + '<br>';
            newContent += '</div>';
            }
        document.getElementById('content').innerhtml = newContent;
 }

不幸的是，这不会向网页写出任何内容。 到目前为止，我只能在Chrome开发人员的工具栏控制台中查看原始JSON结果。

有人可以帮助确定我需要做什么不同吗？提前感谢！

假设页面上有一个 ID 为 content 的元素，它应该可以正常工作，你只是有一点错别字

document.getElementById('content').innerhtml = newContent;

投降"HTML"，

document.getElementById('content').innerHTML = newContent;

$('#content').load('resultsPage.html #content');看起来不正确，第一个参数应该只是一个 URL。现在尝试将其注释掉，因为您正在用另一行更改它的内容。

此外，第 4 行应为：

for(var i = 0; i < servResponse.trips.tripOption.length; i++){

你有： 

... tripOption[i].length ...

以下功能应：

  • 创建一个带有 class="results" 的div
  • 在这个div 中放置几个 p 元素，每个元素包含一个 2 行条目
  • 在元素中以"内容"的 id 显示所有这些内容

这是你想要的吗？您当前应用于.results的 CSS 可能需要改为应用于.results p。

function successFunction(servResponse){
  var tripOption = servResponse.trips.tripOption;
  var newContent = '<div class="results">';
  for(var i = 0; i < tripOption.length; i++){
    newContent += '<p>' + "Option " + (i+1) + '<br>';
    newContent += tripOption[i].saleTotal + '<p>';
  }
  newContent += '</div>';
  document.getElementById('content').innerHTML = newContent;
}

js小提琴

   var servResponse = {
                "kind": "#tripsSearch",
                "trips": {
                  "kind": "#tripOptions",
                  "tripOption": [
                   {
                    "saleTotal": "USD294.10",
                    "id": "DMfSXrkVQGKTVQsDD5l60N004",
                   },{
                    "saleTotal": "USD333.10",
                    "id": "DMfSXrkVQGKTVQsDD5l60N002",
                   },
                   {
                    "saleTotal": "USD225.94",
                    "id": "DMfSXrkVQGKTVQsDD5l60N005",
                   }
                  ]
                 }
};
function successFunction(servResponse) {
var newContent = '';
 servResponse.trips.tripOption.forEach(function(el,index){                                              
            newContent += '<div class="results">';
            newContent += '<p>' + "Option " + (index+1) + '<br>';
            newContent += el.saleTotal  + '<br>';
            newContent += '</div>';
            console.log(el.saleTotal);
});
document.getElementById('content').innerHTML = newContent;
}
successFunction(servResponse);
Using pure javascript forEach loop 
Example Link : http://jsfiddle.net/c1wzsqaf/1/
相关文章：