Only show JSon by key value

Question

I got stuck to rendered JSON data by an id, already browse over the several articles but not working.

I had ajax call:

$.ajax({
    url: '../../../get/api/city.json',
    dataType: 'json',
})
.done(function(data){
    console.log(data);
    var HTML = ''; 
        $.each(data.city, function(i,city){
        HTML += '<span>'+city.city_name+'</span>'; });

       $('#title').append(HTML);
    })
.fail(function(){
    alert('failed');
});

And the json output is:

{"city":[
{"id":"4","year":"2014","city_name":"City A"},
{"id":"5","year":"2014","city_name":"City B"},
{"id":"6","year":"2014","city_name":"City C"}]}

My situation I created a html page to render the information for City A, what I want is to filter the above JSON data only rendered the information from city A.

Big thanks for any help from you guys. Thanks

Have you searched "how to access json data" Or did you skip that and come straight here for others to do it for you? This is very basic... You'd get the answer in the first result. — ProEvilz, Nov 24 '17 at 10:28
yes i tried to search it before, and all of them showing how to get data by the row number data[0].blabla — da_root, Nov 24 '17 at 11:13

score 1 · Answer 1 · answered Nov 24 '17 at 10:29

1

You could add a filter to your $.each to check if the city id is the one you want.

$.each(data.city, function (i, city) {
    if (city.id === 4)
        HTML += '<span>' + city.city_name + '</span>'; 
});

answered Nov 24 '17 at 10:29

Jerodev

32,252
11
87
108

thanks for this, tried it but still showing the whole name :( – da_root Nov 24 '17 at 11:14
Isn't that what you wanted? – Jerodev Nov 24 '17 at 11:53
I mean this still showing the whole data of city name – da_root Nov 24 '17 at 12:07
how to use this on multiple tags? i tried to add another: HTML += '' + city.year+ ''; but the year value not filtered – da_root Nov 25 '17 at 01:48
Did you add `{` and `}` to the if statement? Because now it will only work on the first line after the statement. – Jerodev Nov 26 '17 at 20:49

score 1 · Answer 2 · edited Nov 10 '19 at 10:13

1

Can prepare a filter with your desired city name and apply it to your data array to filter data preferred by you as in example:

var cities = {
  "city": [{
    "id": "4",
    "year": "2014",
    "city_name": "City A"
  }, {
    "id": "5",
    "year": "2014",
    "city_name": "City B"
  }, {
    "id": "6",
    "year": "2014",
    "city_name": "City C"
  }]
};

//Want only city with this name
var filter = "City A";

console.log(cities.city);

cities.city = cities.city.filter(function(obj) {
  return obj.city_name == filter;
});

console.log(cities.city);

edited Nov 10 '19 at 10:13

marc_s

732,580
175
1,330
1,459

answered Nov 24 '17 at 10:35

Anwarus

138
2
11

how to create an array data since my json generated from php, I am really new for this. can you please guide me how to input into my code above? :( Or should I edit my php who generated the json? – da_root Nov 24 '17 at 11:16
Generated JSON from php is probably treated as string to convert it use `JSON.parse()` function. – Anwarus Nov 24 '17 at 12:36

Mamun · Accepted Answer · 2017-11-25T23:47:32.050

1

Try the following using Array's filter():

var info = {"city":[
{"id":"4","year":"2014","city_name":"City A"},
{"id":"5","year":"2014","city_name":"City B"},
{"id":"6","year":"2014","city_name":"City C"}]};

var res = info.city.filter(function(item){
  return item.city_name =='City A';
});
console.log(res);
var HTML = '<span>'+res[0].city_name+'</span>';
$('#title').append(HTML)
HTML = '<span>'+res[0].id+'</span>';
$('#id').append(HTML);;
HTML = '<span>'+res[0].year+'</span>';
$('#year').append(HTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="title">Title: </div>
<div id="id">Id: </div>
<div id="year">Year: </div>

UPDATE: Once your request server send data, you can use the following code:

$.ajax({
  url: 'http://207.254.40.122/deetab/json.json',
  dataType: 'json',
  crossDomain: true
}).done(function(data){
    console.log(data);// Check here whether sever send data or not
    var res = data.city.filter(function(item){
       return item.city_name =='City A';
    });
   //console.log(res);
   var HTML = '<span>'+res[0].city_name+'</span>';
   $('#title').append(HTML)
   HTML = '<span>'+res[0].id+'</span>';
   $('#id').append(HTML);;
   HTML = '<span>'+res[0].year+'</span>';
   $('#year').append(HTML);
});

edited Nov 25 '17 at 23:47

answered Nov 24 '17 at 10:41

Mamun

66,969
9
47
59

Right now it is based on city. If you want based on id then you need to change that in the `filter` function....Thanks. – Mamun Nov 24 '17 at 12:14
Hi, tried this code. but still not showing (tried to replace used url as json data inside var info. can you please give me a sample how to implement this on my current code, or get the data from the url? since this is dynamic data from the sql – da_root Nov 24 '17 at 22:26
@da_root, I have provided the solution based on JSON output. What your `console.log(data);` showing inside `done()`? I believe, the code will work fine if you place my code inside your ajax `done()`. Though it will be more effective if you provide a jsfiddle with sql data.....thanks. – Mamun Nov 25 '17 at 00:20
Hi can you please check the fiddle here: https://jsfiddle.net/oL1jf9bv/ – da_root Nov 25 '17 at 01:17
There is no data in ajax request. The issue here is `Failed to load http://207.254.40.122/deetab/json.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.` This happens when your requested data is in another domain from the on you are requesting in. See this link for details: https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present – Mamun Nov 25 '17 at 10:01
@da_root, once the server issue is done, use the code which I put under UPDATE......thanks. – Mamun Nov 25 '17 at 13:51

Only show JSon by key value

3 Answers3