Question

我的HTML中有一个包含data属性的列表项。当用户点击其中一个列表项时，我想在另一个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

City one suburb 2

City one Suburb 3

Answer 1

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

这就是我要做的事情：

Demo

FirstName + " " + LastName

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);

如何获取JSON数据名称

3 个答案:

Demo