javascript - 设置循环以解析 JSON 响应

Question

我目前正在使用 wunderground api 作为学习 JS 的工具。我有下面的代码来解析我得到的 JSON 响应中的数据，但这是每小时的预测，我想解析 36 小时，下面的代码只解析 1 小时。我知道除了为所有 36 小时创建变量之外，还有一种更简单的方法可以做到这一点。如果有人能指出我正确的方向，我将不胜感激。

我目前如何解析 JSON:

$(document).ready(function(){
$("#hourly").click(function() {
var t = document.getElementById("zip").value;

  $.ajax({
  url : "http://api.wunderground.com/api/MYKEY/hourly/q/" + t + ".json",
  dataType : "jsonp",
  success : function(parsed_json) {
var h0day = parsed_json['hourly_forecast']["0"]["FCTTIME"]['weekday_name_abbrev'];
 var h0time = parsed_json['hourly_forecast']["0"]["FCTTIME"]["civil"]; 
     var h0temp = parsed_json['hourly_forecast']["0"]["temp"]["english"];
     var h0icon = parsed_json['hourly_forecast']["0"]["icon_url"];
     var h0condition = parsed_json['hourly_forecast']["0"]["condition"];

我正在解析的示例 JSON 响应:

{
  "response": {
  "version":"0.1",
  "termsofService":"http://www.wunderground.com/weather/api/d/terms.html",
  "features": {
  "hourly": 1
  }
    }
        ,
    "hourly_forecast": [
        {
        "FCTTIME": {
        "hour": "21","hour_padded": "21","min": "00","sec": "0","year": "2014","mon": "1","mon_padded": "01","mon_abbrev": "Jan","mday": "26","mday_padded": "26","yday": "25","isdst": "0","epoch": "1390788000","pretty": "9:00 PM EST on January 26, 2014","civil": "9:00 PM","month_name": "January","month_name_abbrev": "Jan","weekday_name": "Sunday","weekday_name_night": "Sunday Night","weekday_name_abbrev": "Sun","weekday_name_unlang": "Sunday","weekday_name_night_unlang": "Sunday Night","ampm": "PM","tz": "","age": ""
        },
        "temp": {"english": "24", "metric": "-3"},
        "dewpoint": {"english": "15", "metric": "-9"},
        "condition": "Overcast",
        "icon": "cloudy",
        "icon_url":"http://icons-ak.wxug.com/i/c/k/nt_cloudy.gif",
        "fctcode": "4",
        "sky": "94",
        "wspd": {"english": "8", "metric": "13"},
        "wdir": {"dir": "South", "degrees": "190"},
        "wx": "",
        "uvi": "0",
        "humidity": "67",
        "windchill": {"english": "16", "metric": "-8"},
        "heatindex": {"english": "-9998", "metric": "-9998"},
        "feelslike": {"english": "16", "metric": "-8"},
        "qpf": {"english": "", "metric": ""},
        "snow": {"english": "", "metric": ""},
        "pop": "10",
        "mslp": {"english": "29.87", "metric": "1011"}
        }
        ,
        {
        "FCTTIME": {
        "hour": "22","hour_padded": "22","min": "00","sec": "0","year": "2014","mon": "1","mon_padded": "01","mon_abbrev": "Jan","mday": "26","mday_padded": "26","yday": "25","isdst": "0","epoch": "1390791600","pretty": "10:00 PM EST on January 26, 2014","civil": "10:00 PM","month_name": "January","month_name_abbrev": "Jan","weekday_name": "Sunday","weekday_name_night": "Sunday Night","weekday_name_abbrev": "Sun","weekday_name_unlang": "Sunday","weekday_name_night_unlang": "Sunday Night","ampm": "PM","tz": "","age": ""
        },
        "temp": {"english": "25", "metric": "-3"},
        "dewpoint": {"english": "16", "metric": "-8"},
        "condition": "Overcast",
        "icon": "cloudy",
        "icon_url":"http://icons-ak.wxug.com/i/c/k/nt_cloudy.gif",
        "fctcode": "4",
        "sky": "94",
        "wspd": {"english": "9", "metric": "14"},
        "wdir": {"dir": "SSW", "degrees": "199"},
        "wx": "",
        "uvi": "0",
        "humidity": "70",
        "windchill": {"english": "16", "metric": "-8"},
        "heatindex": {"english": "-9998", "metric": "-9998"},
        "feelslike": {"english": "16", "metric": "-8"},
        "qpf": {"english": "0.00", "metric": "0.00"},
        "snow": {"english": "", "metric": ""},
        "pop": "10",
        "mslp": {"english": "29.82", "metric": "1009"}
        }
        ,
        {
        "FCTTIME": {
        "hour": "23","hour_padded": "23","min": "00","sec": "0","year": "2014","mon": "1","mon_padded": "01","mon_abbrev": "Jan","mday": "26","mday_padded": "26","yday": "25","isdst": "0","epoch": "1390795200","pretty": "11:00 PM EST on January 26, 2014","civil": "11:00 PM","month_name": "January","month_name_abbrev": "Jan","weekday_name": "Sunday","weekday_name_night": "Sunday Night","weekday_name_abbrev": "Sun","weekday_name_unlang": "Sunday","weekday_name_night_unlang": "Sunday Night","ampm": "PM","tz": "","age": ""
        },
        "temp": {"english": "26", "metric": "-2"},
        "dewpoint": {"english": "17", "metric": "-7"},
        "condition": "Overcast",
        "icon": "cloudy",
        "icon_url":"http://icons-ak.wxug.com/i/c/k/nt_cloudy.gif",
        "fctcode": "4",
        "sky": "94",
        "wspd": {"english": "9", "metric": "14"},
        "wdir": {"dir": "SSW", "degrees": "199"},
        "wx": "",
        "uvi": "0",
        "humidity": "70",
        "windchill": {"english": "18", "metric": "-7"},
        "heatindex": {"english": "-9998", "metric": "-9998"},
        "feelslike": {"english": "18", "metric": "-7"},
        "qpf": {"english": "", "metric": ""},
        "snow": {"english": "", "metric": ""},
        "pop": "10",
        "mslp": {"english": "29.82", "metric": "1009"}
        }
        ,

...等等。

Answer 1

查看您的 json，它看起来像 hourly_forecast 是一个数组，因此您应该能够像任何其他数组一样对其进行索引。所以，而不是:

 var h0day = parsed_json['hourly_forecast']["0"]["FCTTIME"]['weekday_name_abbrev'];

你应该能够做到:

 var h0day = parsed_json.hourly_forecast[i].FCTTIME.weekday_name_abbrev;

其中 i 是 for 循环中的一个变量:

 success : function(parsed_json) {
     // check we have at least 36 entries
     var j = parsed_json.hourly_forcast.length < 36 ? parsed_json.hourly_forcast.length : 36;
     for(var i=0; i<j; i++) {
         var h0day = parsed_json.hourly_forecast[i].FCTTIME.weekday_name_abbrev;
         //...etc...
         // now do something with those parsed values...
     }
 }

现在，如果您确实需要存储这些值，那么我建议使用数组并将值插入数组...

var myParsedData = [];

现在在你的成功函数中，我会将值存储为对象:

     for(var i=0; i<j; i++) {
         myParsedData.push({
             hday: parsed_json.hourly_forecast[i].FCTTIME.weekday_name_abbrev,
             htime: parsed_json.hourly_forecast[i].FCTTIME.civil,
             htemp: parsed_json.hourly_forecast[i].temp.english,
             hicon: parsed_json.hourly_forecast[i].icon_url
             hcondition: parsed_json.hourly_forecast[i].condition
         });
     }

稍后您可以访问它们:

console.log(myParsedData[0].hday);