2015-02-24 3 views
0

Привет У меня есть следующий массив JSON, я хотел бы знать, как отображать элемент в div с помощью jquery.Доступ к массиву JSON и отображение JQuery

, например, первый cloudcover в объекте погоды

Следующая не работает для меня

document.getElementById ("examplediv"). InnerHTML = данные [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" 
     } 
    ] 
} 
} 

Большое спасибо за вашу помощь

ответ

1

назначение не работает, так как данные не является массивом, и вам не нужно, чтобы получить доступ к первому элементу, изменение кода будет:

document.getElementById("examplediv").innerHTML = data.weather[0].hourly[0].cloudcover; 

Основная проблема с этим громоздким запроса является то, что это не null безопасно, и я рекомендовал бы добавить null проверки для всех суб-значений.

1

Данные - это объект, а не массив.

Попробуйте

document.getElementById("examplediv").innerHTML = data.weather[0].hourly[0].cloudcover; 

вместо

document.getElementById("examplediv").innerHTML = data[0].weather[0].hourly[0].cloudcover; 
1

Вы можете использовать jquery.parseJson для разбора JSON в объект яваскрипта и использовать его для различных целей. Следующий jquery может дать вам представление о том, как это делается.

http://api.jquery.com/jquery.parsejson/  
http://stackoverflow.com/questions/5071115/parse-json-string 
Смежные вопросы