如何使用jquery遍历一个四级json数组

how to loop through a four level json array using jquery

本文关键字：四级 数组 json 一个 何使用 jquery 遍历      更新时间：2023-09-26

四级JSON数据

{
"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"
                    }
                ]
            }
        ]
    }
]

}

我已经获取了高达3级的数据并显示了高达2级的数据。但无法获取第四级数据，并显示第三和第四级数据。

$.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>

如何获取其他显示如下

    亚洲

  • 东亚

  • 中国-

    • 中国南方

    • 香港

    • 亚洲南部

试试这个，使用一些代码@dimitar:

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>

您将需要循环遍历所有这些内容，并在每个级别上打印一些内容。

这是一个例子，根据你的喜好来调整它。

$.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);
                    });
                };
            });
        });
    });
});

这里的json是你提供的json，我们在控制台中打印出你想要的列表。

编辑原代码:

$.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>");
                    });
                };
            });
        });
    });
});

如果仍然有问题，请留下评论，我没有得到任何。

相关文章：