This is the JSON object:
{
"temperatures": {
"city": [{
"name": "Riyadh",
"high": [35, 38, 32]
}, {
"name": "New York",
"high": [28, 36]
}, {
"name": "Dubai",
"high": [18, 20]
}]
}
}
On page load I get the object via AJAX. I need to loop through each city and get the name of the city and the high array as well.
This is the page code:
<html>
<head>
<title>the title</title>
<script type="text/javascript" src="tempj.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('temp.json', function(data) {
alert('<ul><li>'+ jd.city.name +':' + jd.high + '</ul> ');
});
});
</script>
</head>
<body>
</body>
</html>
This is the JSON object:
{
"temperatures": {
"city": [{
"name": "Riyadh",
"high": [35, 38, 32]
}, {
"name": "New York",
"high": [28, 36]
}, {
"name": "Dubai",
"high": [18, 20]
}]
}
}
On page load I get the object via AJAX. I need to loop through each city and get the name of the city and the high array as well.
This is the page code:
<html>
<head>
<title>the title</title>
<script type="text/javascript" src="tempj.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('temp.json', function(data) {
alert('<ul><li>'+ jd.city.name +':' + jd.high + '</ul> ');
});
});
</script>
</head>
<body>
</body>
</html>
- 1 stackoverflow./questions/1078118/… and stackoverflow./questions/2342371/… might help u – run Commented Nov 4, 2011 at 5:48
3 Answers
Reset to default 3I don't know what you mean in your question title about using an if statement, so I'm ignoring that.
Within your JSON, data.temperatures.city is an array of objects each of which has two properties, one for the city name and one an array of highs. I have no idea how you want to handle the fact that the highs arrays have different lengths, so I've just used the .join() method to form them into a ma-separated string on the end of the message in the alert.
Presumably you don't really want to pop up a bunch of alerts, but at least that's a starting place to see that you're getting the data you expect so the following should be enough to get you going:
$.getJSON('temp.json', function(data) {
for (var i = 0; i < data.temperatures.city.length; i++) {
alert("The temperatures in " + data.temperatures.city[i].name + " are "
+ data.temperatures.city[i].high.join(","));
}
});
I deliberately didn't use $.each() so that for learning purposes you can see what's going on. Obviously you can convert this to use $.each() if you prefer.
You should add error checking that the properties you are trying to use actually exist (i.e., that the JSON is in the expected format).
You can reach into the data to get to the city array and then loop through the city array to get the properties of each element in that array like this:
var data = {
"temperatures": {
"city": [{
"name": "Riyadh",
"high": [35, 38, 32]
}, {
"name": "New York",
"high": [28, 36]
}, {
"name": "Dubai",
"high": [18, 20]
}]
}
}
var cityArray = data.temperatures.city;
for (var i = 0; i < cityArray.length; i++) {
// cityArray[i].name (name of city)
// cityArray[i].high (array of high values for that city)
}
if you are using jQuery you can loop through the json elements as
jQuery.getJSON('js/jsonTest.js',function(data) {
$.each(data, function(key, val) {
if (key == 'general') {
// code here
}
}
}