How to loop through four levels of a json array using jquery
Four layers of JSON data
{
"Asia": [
{
"continentCode": "GT113",
"regionList": [
{
"regionName": "Eastern Asia",
"regionCode": "GR128",
"Countrylist": [
{
"countryName": "China",
"countryCode": "GC302",
"subCountryList": [
{
"subCountryName": "Southern China",
"subCountryCode": "GR206"
}
]
},
{
"countryName": "Hong Kong",
"countryCode": "GC303"
}
]
},
{
"regionName": "Southern Asia",
"regionCode": "GR134",
"Countrylist": [
{
"countryName": "India",
"countryCode": "GC304"
},
{
"countryName": "Pakistan",
"countryCode": "GC309"
}
]
}
]
}
]
}
I downloaded the data to 3rd level and overclocked to 2nd level. But can't get 4th level data and display 3rd and 4th data levels.
$.each(json, function (i1, object) {
alert(i1);
$.each(object, function (i2, continent) {
$.each(continent.regionList, function (i3, region) {
alert(region.regionName);
$.each(region.Countrylist, function (i4, country) {
alert(country.countryName);
if (!$("ul." + i1).is("*")) {
$("<ul />", {
"class": i1,
"html": "<li>" + region.regionName + "</li>"
}).appendTo("div").before('<b class=' + i1 + ' ><a name="' + i1 + '" >' + i1 + '</a></b>');
}else{
$("b." + i1).each(function() {
var text = this.textContent || this.innerText;
if (text === i1) {
$(this).next("ul").append("<li>" + region.regionName + "</li>");
}
});
}
/* $.each(country.subCountryList, function (i5, subCountry) {
alert(subCountry.subCountryName);
}); */
});
});
});
});
})
<div>
<ul></ul>
</div>
How to display the rest as shown below
- Asia
-
East Asia
-
China -
-
South China
-
Hongkong
- South Asia
+3
source to share
2 answers
Try this using @dimitar's code:
var json = {
"Asia": [{
"continentCode": "GT113",
"regionList": [{
"regionName": "Eastern Asia",
"regionCode": "GR128",
"Countrylist": [{
"countryName": "China",
"countryCode": "GC302",
"subCountryList": [{
"subCountryName": "Northern China",
"subCountryCode": "GR207"
}, {
"subCountryName": "Southern China",
"subCountryCode": "GR206"
}]
}, {
"countryName": "Hong Kong",
"countryCode": "GC303"
}]
}, {
"regionName": "Southern Asia",
"regionCode": "GR134",
"Countrylist": [{
"countryName": "India",
"countryCode": "GC304"
}, {
"countryName": "Pakistan",
"countryCode": "GC309"
}]
}]
}]
};
var html = '';
$.each(json, function(i1, object) {
html += '<li><b>' + i1 + '</b>';
$.each(object, function(i2, continent) {
html += '<ul>';
$.each(continent.regionList, function(i3, region) {
html += '<li><b>' + region.regionName + '</b>';
$.each(region.Countrylist, function(i4, country) {
html += '<ul><li>' + country.countryName;
if (country.subCountryList) {
html += "<ul>";
$.each(country.subCountryList, function(i5, subCountry) {
html += '<li>' + subCountry.subCountryName + '</li>';
});
html += "</ul>";
};
html += '</li></ul>';
});
html += '</li>';
});
html += '</ul>';
});
html += '</li>';
});
$('#list').html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id='list'></ul>
+1
source to share
You will need to go through all of them and print something on each level.
Here's an example, customize it to your liking and customize it.
$.each(json, function (i1, object) {
console.log(i1);
$.each(object, function (i2, continent) {
$.each(continent.regionList, function (i3, region) {
console.log(region.regionName);
$.each(region.Countrylist, function (i4, country) {
console.log(country.countryName);
if(country.subCountryList){
$.each(country.subCountryList, function (i5, subCountry) {
console.log(subCountry.subCountryName);
});
};
});
});
});
});
Here json is your JSON that you provided and we print the list you want in the console.
Edited source code:
$.each(json, function (i1, object) {
$("ul").append("<li><strong>"+i1+"</li></strong>");
$.each(object, function (i2, continent) {
$.each(continent.regionList, function (i3, region) {
$("ul").append("<li><p><strong>"+region.regionName+"</li></p></strong>");
$.each(region.Countrylist, function (i4, country) {
$("ul").append("<li><p>"+country.countryName+"</li></p>");
if(country.subCountryList){
$.each(country.subCountryList, function (i5, subCountry) {
$("ul").append("<li><p>"+subCountry.subCountryName+"</li></p>");
});
};
});
});
});
});
Leave me a comment if there are still problems I am not getting them.
+1
source to share