kayee kayee - 5 months ago 13
jQuery Question

How to get JSON data name

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

    Try this one:

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