在Ajax调用(Async)之后显示JSON

时间:2016-12-16 18:36:37

标签: javascript json ajax html5

我不断得到一个" undifiend"尝试使用JSON.parse(result)显示原始json时出错。



function decodeVin(result)
{
var vinArray = JSON.parse(result);
var results = "<h4>Vehicle Information Result:</h4>";
results += "Year: " + vinArray.years.id + "<br>";
results += "Make: " + vinArray.make.name + "<br>";
results += "Model: " + vinArray.model.name + "<br>";
results += "Sub-Model: " + vinArray.years.trim + "<br>";
results += "Engine: " + vinArray.engine.name + "<br>";
results += "Transmission: " + vinArray.transmission.transmissionType + "<br>";
results += "Platform: " + vinArray.categories.vehicleStyle + "<br>";
results += "Drive Train: " + vinArray.drivenWheels + "<br>";
results += "Exterior Color: " + vinArray.colors.category + "<br>";
&#13;
&#13;
&#13;

&#13;
&#13;
function clearVin()
{
document.getElementById("vin").value = "";
document.getElementById("vin_result").innerHTML = "";
}

function decodeVin(result)
{
var vinArray = JSON.parse(result);
var results = "<h4>Vehicle Information Result:</h4>";
results += "Year: " + vinArray.years.id + "<br>";
results += "Make: " + vinArray.make.name + "<br>";
results += "Model: " + vinArray.model.name + "<br>";
results += "Sub-Model: " + vinArray.years.trim + "<br>";
results += "Engine: " + vinArray.engine.name + "<br>";
results += "Transmission: " + vinArray.transmission.transmissionType + "<br>";
results += "Platform: " + vinArray.categories.vehicleStyle + "<br>";
results += "Drive Train: " + vinArray.drivenWheels + "<br>";
results += "Exterior Color: " + vinArray.colors.category + "<br>";



document.getElementById("vin_result").innerHTML = results;
}

function submitVin(vin, callback)
{
if(vin != "")
{
  var url_prefix = "https://api.edmunds.com/api/vehicle/v2/vins/";
  var url_suffix = "?fmt=json&api_key=zazv2waqgs96hcvfp37dhc22";
  var ajax = null;
  if(window.XMLHttpRequest) // for IE7+, Firefox, Chrome, Opera, Safari
  {
   ajax = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) // for IE5 and IE6
  {
   ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else // a browser not equipped to handle XMLHttp
  {
   window.alert("ERROR: Cound not create XmlHttpRequest Object. Consider upgrading your browser.");
   return(false);
  }
  ajax.onreadystatechange = function()
  {
   if(ajax.readyState == 4 && ajax.status == 200)
   {
    callback(ajax.responseText);
   }
  }
  ajax.open("GET", url_prefix + vin + url_suffix, true);
  ajax.send();
}
}
&#13;
<font size="+3"></font>
  <input type="text" id="vin" maxlength="17" placeholder="Enter Vin">
</p>
<button onclick="clearVin();">Clear</button>
<button onclick="submitVin(document.getElementById('vin').value.toUpperCase(), decodeVin);">Decode</button>
</center>
<br>
<div id="vin_result"></div>
&#13;
&#13;
&#13;

这是JSON原始数据,我将信息显示在..

{  
   "make":{  
      "id":200004491,
      "name":"Subaru",
      "niceName":"subaru"
   },
   "model":{  
      "id":"Subaru_Outback",
      "name":"Outback",
      "niceName":"outback"
   },
   "engine":{  
      "id":"200738672",
      "name":"2.5i",
      "equipmentType":"ENGINE",
      "availability":"STANDARD",
      "compressionRatio":10.3,
      "cylinder":4,
      "size":2.5,
      "displacement":2498.0,
      "configuration":"flat",
      "fuelType":"regular unleaded",
      "horsepower":175,
      "torque":174,
      "totalValves":16,
      "type":"gas",
      "code":"4HNAG2.5",
      "compressorType":"NA",
      "rpm":{  
         "horsepower":5800,
         "torque":4000
      },
      "valve":{  
         "timing":"variable valve timing",
         "gear":"double overhead camshaft"
      }
   },
   "transmission":{  
      "id":"200738674",
      "name":"continuously variableA",
      "equipmentType":"TRANSMISSION",
      "availability":"STANDARD",
      "automaticType":"Continuously variable",
      "transmissionType":"AUTOMATIC",
      "numberOfSpeeds":"continuously variable"
   },
   "drivenWheels":"all wheel drive",
   "numOfDoors":"4",
   "options":[  
      {  
         "category":"Interior",
         "options":[  
            {  
               "id":"200738761",
               "name":"Power Outlet - 120V",
               "equipmentType":"OPTION",
               "availability":"All except Base"
            },
            {  
               "id":"200738733",
               "name":"All Weather Mats",
               "equipmentType":"OPTION",
               "availability":"All"
            }
         ]
      },
      {  
         "category":"Exterior",
         "options":[  
            {  
               "id":"200738749",
               "name":"Bumper Cover Rear (Rear)",
               "equipmentType":"OPTION",
               "availability":"All"
            },
            {  
               "id":"200738738",
               "name":"Exterior Auto Dimming Mirror Kit W/Approach Lighting",
               "equipmentType":"OPTION",
               "availability":"Base/Premium/Limited 3.6R"
            }
         ]
      }
   ],
   "colors":[  
      {  
         "category":"Interior",
         "options":[  
            {  
               "id":"200738692",
               "name":"Slate Black Cloth",
               "equipmentType":"COLOR",
               "availability":"USED"
            }
         ]
      },
      {  
         "category":"Exterior",
         "options":[  
            {  
               "id":"200738679",
               "name":"Twilight Blue Metallic",
               "equipmentType":"COLOR",
               "availability":"USED"
            }
         ]
      }
   ],
   "manufacturerCode":"GDD",
   "price":{  
      "baseMSRP":27695.0,
      "baseInvoice":26076.0,
      "deliveryCharges":850.0,
      "usedTmvRetail":24546.0,
      "usedPrivateParty":23208.0,
      "usedTradeIn":21435.0,
      "estimateTmv":false
   },
   "categories":{  
      "market":"Crossover",
      "EPAClass":"Sport Utility Vehicles",
      "vehicleSize":"Midsize",
      "crossover":"Car",
      "primaryBodyType":"SUV",
      "vehicleStyle":"4dr SUV",
      "vehicleType":"SUV"
   },
   "vin":"4S4BSAEC6G3280541",
   "squishVin":"4S4BSAECG3",
   "years":[  
      {  
         "id":200738662,
         "year":2016,
         "styles":[  
            {  
               "id":200738667,
               "name":"2.5i Premium PZEV 4dr SUV AWD (2.5L 4cyl CVT)",
               "submodel":{  
                  "body":"SUV",
                  "modelName":"Outback SUV",
                  "niceName":"suv"
               },
               "trim":"2.5i Premium PZEV"
            }
         ]
      }
   ],
   "matchingType":"SQUISHVIN",
   "MPG":{  
      "highway":"33",
      "city":"25"
   }
}

1 个答案:

答案 0 :(得分:0)

在你的json中,岁月是一个数组。您必须以这种方式访问​​它:

VinArray.years[0].id;

请检查这个小提琴:

https://jsfiddle.net/8wzz22b7/

对不起答案格式。我在打电话。