JSON数组访问并显示Jquery

时间:2015-02-24 02:42:31

标签: jquery json

您好我有以下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"
        }
    ]
}
}

非常感谢您的帮助

3 个答案:

答案 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