从 Ajax 请求中提取字段

时间:2021-01-17 18:45:26

标签: jquery json ajax

我有以下 Jquery Ajax 请求:

    function DoPaymentSearch() {
    var start,end;
    start=Date.now();
    var getQuotesSuccess = function(results){
    end=Date.now();

    alert(JSON.stringify(results));
    };

$.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: 'https://a-quote-server.com/',
    data: JSON.stringify(quoteRequest),
    success: getQuotesSuccess,
    dataType: 'json',
    processData : 'false',
    crossDomain : true
    });
}

$(document).ready(DoPaymentSearch);

它给出了一个看起来像这样的 JSON 字符串:

{"VehicleResults":[{"Id":"0","FinanceProductResults":[{"Term":48,"AnnualMileage":10000,"Deposits":1000,"ProductResults":[{"Key":"HP","Payment":358.9},{"Key":"PCP","Payment":267.53}]}]}]}

但是,我无法从中提取 HP 和 PCP 付款字段。我想将它们附加到页面上的某些文本中。

将警报替换为:

$('#content').append(results.VehicleResults.FinanceProductResults.ProductResults.Key.HP.Payment);

无法正常工作。

1 个答案:

答案 0 :(得分:1)

您的 ProductResultsJSON 数组,因此要从该数组中获取所有值,您需要使用某个循环对其进行迭代。

演示代码

var results = {
  "VehicleResults": [{
    "Id": "0",
    "FinanceProductResults": [{
      "Term": 48,
      "AnnualMileage": 10000,
      "Deposits": 1000,
      "ProductResults": [{
        "Key": "HP",
        "Payment": 358.9
      }, {
        "Key": "PCP",
        "Payment": 267.53
      }]
    }]
  }]
}
//if only first one to fetch
/*$('#content').append(results.VehicleResults[0].FinanceProductResults[0].ProductResults[0].Key);
$('#content').append(results.VehicleResults[0].FinanceProductResults[0].ProductResults[0].Payment);*/

//if all values from `ProductResults` need to be fetch
$(results.VehicleResults).each(function(i, value) {
  console.log(value.Id)
  $(value.FinanceProductResults).each(function(i, values) {
    console.log(values.Term)
    $(values.ProductResults).each(function(i, val) {
      $('#content').append("<p> Key : " + val.Key + " | Payment :" + val.Payment + "</p>")
    })
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
</div>