Question

我正在与一个将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",
   }
  ]
 }
}

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

如果查询成功，我打破了运行的函数：

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

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

Answer 1

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

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

首映“HTML”，

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

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

Answer 2

另外，第4行应该是：

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

你有：

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

以下功能应该：

使用class =＆＃34; results＆＃34;
在此div中放置几个p元素，每个元素包含一个2行条目
在元素内显示所有内容，ID为＆＃34; content＆＃34;

这是你想要的吗？您当前应用于.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

Answer 3

   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/

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

3 个答案: