从ajax调用访问嵌套的json数据

问题描述：

我与一个将JSON数据返回给我的API接口。由于结果并不存储在文件中，而是存储在服务器内存中，所以我很难弄清楚如何访问数据并将其写入到我的html网页。这里是我的$就调用看起来是这样的：从ajax调用访问嵌套的json数据

 $.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", 
    } 
    ] 
} 
}

我真正需要的是saleTotal每个tripOption。

爆发后运行，如果查询是这里的成功的功能：

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结果。

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

答

假设你有一个的content的ID在页面上的元素，它应该工作正常，你只要有一点点错字

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

capitlize的 'HTML'，

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

$('#content').load('resultsPage.html #content');看起来不正确，第一个参数应该只是一个URL。现在尝试对它进行评论，因为您正在改变它与另一行的内容。

哇，作出了巨大的差异！这是我第一次能够在屏幕上打印。现在我唯一的问题是saleTotal仍然不打印，它说它是“未定义的”。我怀疑这与它在数组中有什么关系 - 有什么建议？ – Quinn

没关系 - 我只是想通了，并发布了一个编辑到我的代码，我需要在tripOption后添加[0];） – Quinn

答

此外，4号线应该是：

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

您有：

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

了以下功能应该：

与类创建一个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; 
}

jsFiddle

感谢您的提示！这也帮助了一大堆，正如我在elzi的评论中提到的，我仍然在打印出saleTotal（可能是因为它在数组中）的问题上存在问题 - 有什么建议吗？ – Quinn

我想出了问题。对不起，我不能满足你的答案，我还没有足够的声望点，但我真的真的非常感谢你的帮助！ :) – Quinn

是的，那正是我所要做的。谢谢！ – Quinn

答

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/

感谢您的纯JavaScript版本 - 总是很好的知道如何做到这一点。 – Quinn

从ajax调用访问嵌套的json数据

相关推荐