如何获取JSON数据名称

Question

I have a list item with data attribute in my HTML. When a user clicks on one of the list items, I want to show/append a list of suburbs for the selected city in another ul list. I am using 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>

This is my JSON file.

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

This is my js file.

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

For example: If a user click on the first #cities list item it should show this under #suburbs ul ..

City one suburb 1 City one suburb 2 City one Suburb 3

Answer 1

There are a few issues with your code

• #cities li a does not match any elements
• You don't have to load the data on every click. You should cache it.
• Why do you have an unnecessary array wrapping your suburbs?

Your JSON can be simplified to

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

To get the suburb names, you can use a for..in loop.

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

And finally, you should cache your 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);
};