如何获取 JSON 数据名称

Question

我的 HTML 中有一个带有数据属性的列表项。当用户单击其中一个列表项时，我想在另一个 ul 列表中显示/附加所选城市的郊区列表。我正在使用 ajax。

<ul id="cities">
  <li data-city="city-one">City One</li>
  <li data-city="city-two">City Two</li>
  <li data-city="city-three">City Three</li>
</ul>

<ul id="suburbs">
<ul>

这是我的 JSON 文件。

 {
   "city-one": [{
       "city one suburb 1": [
         {"name": "city one suburb 1 name 1"},
         {"name": "city one suburb 1 name 2"},
         {"name": "city one suburb 1 name 3"}
       ],
       "city one suburb 2": [
         { "name": "city one suburb 2 name 1"},
         {"name": "city one suburb 2 name 2"},
         {"name": "city one suburb 2 name 3"}],
       "city one suburb 3": [
         {"name": "city one suburb 3 name 1"},
         {"name": "city one suburb 3 name 2"},
         {"name": "city one suburb 3 name 3"}
       ]
   }],
    "city-two": [{
       "city two suburb 1": [
         {"name": "city two suburb 1 name 1"},
         {"name": "city two suburb 1 name 2"},
         {"name": "city two suburb 1 name 3"}
       ],
       "city two suburb 2": [
         {"name": "city two suburb 2 name 1"},
         {"name": "city two suburb 2 name 2"},
         {"name": "city two suburb 2 name 3"}
       ],
       "city two suburb 3": [
         {"name": "city two suburb 3 name 1"},
         {"name": "city two suburb 3 name 2"},
         {"name": "city two suburb 3 name 3"}
       ]
   }],
   "city-three": [{
      "city three suburb 1": [
        {"name": "city three suburb 1 name 1"},
        {"name": "city three suburb 1 name 2"},
        {"name": "city three suburb 1 name 3"}
      ],
      "city three suburb 2": [
        {"name": "city three suburb 2 name 1"},
        {"name": "city three suburb 2 name 2"},
        {"name": "city three suburb 2 name 3"}
      ],
      "city three suburb 3": [
        {"name": "city three suburb 3 name 1"},
        {"name": "city three suburb 3 name 2"},
        {"name": "city three suburb 3 name 3"}
      ]
   }]
}

这是我的 js 文件。

var getData = function(){
  $.get( 'locations.json', function( data ) {
   //loop through selected city object and show suburb names
    });
};

var selectCity = function(){
   var currentCity;
   currentCity = $(this).attr('data-city');
   //console.log(currentCity);
   getData();
};

$('#cities li a').on('click', selectCity);

例如： 如果用户单击第一个#cities 列表项，它应该在#suburbs ul 下显示。

市一郊区1

市一郊区2

一城郊区3

Answer 1

同意@Joyce，您不需要在每次点击时进行 ajax 调用。

我会这样做：

Demo

var selectCity = function(){
   var currentCity;
   currentCity = $(this).attr('data-city');

   $.each( subs[currentCity] ,function(index,sub){
      $('#suburbs').html( JSON.stringify( sub ), null, '\t' );
   });
}

Answer 2

您的代码存在一些问题

• #cities li a 不匹配任何元素
• 您不必在每次点击时都加载数据。你应该缓存它。
• 为什么你的郊区有一个不必要的阵列？

您的 JSON 可以简化为

 {
   "city-one": {
       "city one suburb 1": [
         {"name": "city one suburb 1 name 1"},
         {"name": "city one suburb 1 name 2"},
         {"name": "city one suburb 1 name 3"}
       ],
       "city one suburb 2": [
         { "name": "city one suburb 2 name 1"},
         {"name": "city one suburb 2 name 2"},
         {"name": "city one suburb 2 name 3"}],
       "city one suburb 3": [
         {"name": "city one suburb 3 name 1"},
         {"name": "city one suburb 3 name 2"},
         {"name": "city one suburb 3 name 3"}
       ]
   },
    "city-two": {
       "city two suburb 1": [
         {"name": "city two suburb 1 name 1"},
         {"name": "city two suburb 1 name 2"},
         {"name": "city two suburb 1 name 3"}
       ],
       "city two suburb 2": [
         {"name": "city two suburb 2 name 1"},
         {"name": "city two suburb 2 name 2"},
         {"name": "city two suburb 2 name 3"}
       ],
       "city two suburb 3": [
         {"name": "city two suburb 3 name 1"},
         {"name": "city two suburb 3 name 2"},
         {"name": "city two suburb 3 name 3"}
       ]
   },
   "city-three": {
      "city three suburb 1": [
        {"name": "city three suburb 1 name 1"},
        {"name": "city three suburb 1 name 2"},
        {"name": "city three suburb 1 name 3"}
      ],
      "city three suburb 2": [
        {"name": "city three suburb 2 name 1"},
        {"name": "city three suburb 2 name 2"},
        {"name": "city three suburb 2 name 3"}
      ],
      "city three suburb 3": [
        {"name": "city three suburb 3 name 1"},
        {"name": "city three suburb 3 name 2"},
        {"name": "city three suburb 3 name 3"}
      ]
   }
}

要获取郊区名称，您可以使用for..in 循环。

var getData = function(city){
  $.get( 'locations.json', function( data ) {
   //loop through selected city object and show suburb names
   var code = '<ul>';
   for (var suburb in data[city]) {
     console.log(suburb);
     code += '<li>' + suburb + '</li>';
   }
   code += '</ul>';
   $('#element-you-want-to-append-to').html(code);
  });
};

var selectCity = function(){
   var currentCity;
   currentCity = $(this).attr('data-city');
   //console.log(currentCity);
   getData(currentCity);
};

// There is no <a> tag in the html, why did you use #cities li a
$('#cities > li').on('click', selectCity);

最后，你应该缓存你的 ajax

var locationData = null;
var getData = function(city) {
    if (!locationData) {
        $.get('locations.json', function(data) {
            getData(city);
        });
        return;
    }
    //loop through selected city object and show suburb names
    var code = '<ul>';
    for (var suburb in locationData[city]) {
        console.log(suburb);
        code += '<li>' + suburb + '</li>';
    }
    code += '</ul>';
    $('#element-you-want-to-append-to').html(code);
};

Answer 3

试试这个：

var getData = function(currentCity) {
    $.get('locations.json', function(data) {
      var liitems = '';
      $.each(data, function(i, items) {
        if (i == currentCity) {
          $.each(items[0], function(j, items2) {
            alert(JSON.stringify(items2));
            liitems += '<li>' + j + '</li>';
          });
        }
      });
       $('#suburbs').html(liitems);
    });

}

var selectCity = function() {
  var currentCity;
  currentCity = $(this).attr('data-city');
  //console.log(currentCity);
  getData(currentCity);
};

$('#cities li').on('click', selectCity);