您好我有以下JSON数组,我想知道如何使用jquery在div中显示元素。
例如天气对象中的第一个云层
以下对我不起作用
document.getElementById(“examplediv”)。innerHTML = data [0] .weather [0] .hourly [0] .cloudcover;
{
"data": {
"nearest_area": [
{
"distance_miles": "5.8",
"latitude": "-41.283",
"longitude": "174.783"
}
],
"request": [d
{
"query": "Lat -41.20 and Lon 174.80",
"type": "LatLon"
}
],
"weather": [
{
"date": "2015-02-24",
"hourly": [
{
"cloudcover": "19",
"humidity": "85",
"precipMM": "0.0",
"pressure": "1023",
"sigHeight_m": "0.6",
"swellDir": "185",
"swellHeight_m": "0.3",
"swellPeriod_secs": "6.3",
"tempC": "17",
"tempF": "63",
"time": "0",
"visibility": "10",
"waterTemp_C": "16",
"waterTemp_F": "60",
"weatherCode": "113",
"weatherDesc": [
{
"value": "Sunny"
}
],
"weatherIconUrl": [
{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0001_sunny.png"
}
],
"winddir16Point": "NW",
"winddirDegree": "309",
"windspeedKmph": "16",
"windspeedMiles": "10"
},
{
"cloudcover": "36",
"humidity": "84",
"precipMM": "0.0",
"pressure": "1023",
"sigHeight_m": "0.6",
"swellDir": "196",
"swellHeight_m": "0.3",
"swellPeriod_secs": "10.5",
"tempC": "14",
"tempF": "57",
"time": "300",
"visibility": "10",
"waterTemp_C": "15",
"waterTemp_F": "60",
"weatherCode": "116",
"weatherDesc": [
{
"value": "Partly Cloudy"
}
],
"weatherIconUrl": [
{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"
}
],
"winddir16Point": "NW",
"winddirDegree": "308",
"windspeedKmph": "18",
"windspeedMiles": "11"
},
{
"cloudcover": "42",
"humidity": "81",
"precipMM": "0.0",
"pressure": "1022",
"sigHeight_m": "0.5",
"swellDir": "190",
"swellHeight_m": "0.4",
"swellPeriod_secs": "10.3",
"tempC": "14",
"tempF": "56",
"time": "600",
"visibility": "10",
"waterTemp_C": "15",
"waterTemp_F": "59",
"weatherCode": "116",
"weatherDesc": [
{
"value": "Partly Cloudy"
}
],
"weatherIconUrl": [
{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"
}
],
"winddir16Point": "NNW",
"winddirDegree": "328",
"windspeedKmph": "19",
"windspeedMiles": "12"
},
{
"cloudcover": "100",
"humidity": "72",
"precipMM": "0.0",
"pressure": "1022",
"sigHeight_m": "0.5",
"swellDir": "189",
"swellHeight_m": "0.4",
"swellPeriod_secs": "10.1",
"tempC": "19",
"tempF": "67",
"time": "900",
"visibility": "10",
"waterTemp_C": "19",
"waterTemp_F": "66",
"weatherCode": "122",
"weatherDesc": [
{
"value": "Overcast"
}
],
"weatherIconUrl": [
{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"
}
],
"winddir16Point": "N",
"winddirDegree": "5",
"windspeedKmph": "20",
"windspeedMiles": "12"
},
{
"cloudcover": "64",
"humidity": "70",
"precipMM": "0.0",
"pressure": "1020",
"sigHeight_m": "0.4",
"swellDir": "189",
"swellHeight_m": "0.3",
"swellPeriod_secs": "9.8",
"tempC": "23",
"tempF": "74",
"time": "1200",
"visibility": "10",
"waterTemp_C": "22",
"waterTemp_F": "72",
"weatherCode": "119",
"weatherDesc": [
{
"value": "Cloudy"
}
],
"weatherIconUrl": [
{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0003_white_cloud.png"
}
],
"winddir16Point": "N",
"winddirDegree": "357",
"windspeedKmph": "24",
"windspeedMiles": "15"
},
{
"cloudcover": "50",
"humidity": "73",
"precipMM": "0.0",
"pressure": "1018",
"sigHeight_m": "0.4",
"swellDir": "188",
"swellHeight_m": "0.3",
"swellPeriod_secs": "9.6",
"tempC": "24",
"tempF": "75",
"time": "1500",
"visibility": "10",
"waterTemp_C": "22",
"waterTemp_F": "71",
"weatherCode": "116",
"weatherDesc": [
{
"value": "Partly Cloudy"
}
],
"weatherIconUrl": [
{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"
}
],
"winddir16Point": "NNW",
"winddirDegree": "344",
"windspeedKmph": "34",
"windspeedMiles": "21"
},
{
"cloudcover": "36",
"humidity": "78",
"precipMM": "0.0",
"pressure": "1017",
"sigHeight_m": "0.5",
"swellDir": "188",
"swellHeight_m": "0.3",
"swellPeriod_secs": "9.5",
"tempC": "20",
"tempF": "69",
"time": "1800",
"visibility": "10",
"waterTemp_C": "19",
"waterTemp_F": "66",
"weatherCode": "116",
"weatherDesc": [
{
"value": "Partly Cloudy"
}
],
"weatherIconUrl": [
{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"
}
],
"winddir16Point": "NNW",
"winddirDegree": "338",
"windspeedKmph": "43",
"windspeedMiles": "27"
},
{
"cloudcover": "28",
"humidity": "87",
"precipMM": "0.0",
"pressure": "1017",
"sigHeight_m": "0.5",
"swellDir": "187",
"swellHeight_m": "0.3",
"swellPeriod_secs": "9.3",
"tempC": "16",
"tempF": "60",
"time": "2100",
"visibility": "10",
"waterTemp_C": "16",
"waterTemp_F": "61",
"weatherCode": "116",
"weatherDesc": [
{
"value": "Partly Cloudy"
}
],
"weatherIconUrl": [
{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"
}
],
"winddir16Point": "NNW",
"winddirDegree": "330",
"windspeedKmph": "47",
"windspeedMiles": "29"
}
],
"maxtempC": "24",
"mintempC": "14"
}
]
}
}
非常感谢您的帮助
答案 0 :(得分:1)
分配不起作用,因为数据不是数组而您不需要访问第一个元素,代码更改将是:
document.getElementById("examplediv").innerHTML = data.weather[0].hourly[0].cloudcover;
这个庞大的查询的主要问题是它不是null
安全的,我建议您为所有子值添加null
检查。
答案 1 :(得分:1)
数据是对象而不是数组。
试试这个
document.getElementById("examplediv").innerHTML = data.weather[0].hourly[0].cloudcover;
而不是
document.getElementById("examplediv").innerHTML = data[0].weather[0].hourly[0].cloudcover;
答案 2 :(得分:1)
您可以使用jquery.parseJson将json解析为javascript对象并将其用于各种目的。以下jquery可能会让您了解它是如何完成的。
http://api.jquery.com/jquery.parsejson/
http://stackoverflow.com/questions/5071115/parse-json-string