Question

四级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级。但是无法获取第4级数据并显示第3和第4级数据。

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

如何获取其他人以显示如下

的亚
东亚
中国 -
中国南方
香港
南亚

Answer 1

您需要遍历所有这些内容并在每个级别打印出来。

这是一个例子，根据自己的喜好进行调整并设计风格。

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

如果仍有问题，请给我发表评论，我没有得到任何评论。

Answer 2

尝试使用@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>

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

2 个答案: