Как пройти через четырехуровневый массив JSON с помощью JQuery

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

Попробуйте это, используя некоторый код @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>

Answer 2

Вам захочется просмотреть их все и распечатать что-нибудь на каждом уровне.

Вот пример, настройте его по своему вкусу и стилизуйте.

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

Оставьте мне комментарий, если есть еще проблемы, я не получаю никаких.