仅按键值显示 JSON

Question

我被一个 id 渲染的 JSON 数据卡住了，已经浏览了几篇文章但没有工作。

我有 ajax 调用：

$.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');
});

而json输出为：

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

我的情况我创建了一个html页面来呈现城市A的信息，我想要的是过滤上面的JSON数据只呈现来自城市A的信息。

非常感谢你们的任何帮助。 谢谢

Answer 1

使用 Array 的 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>

更新： 一旦您的请求服务器发送数据，您可以使用以下代码：

$.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);
});

Answer 2

您可以在$.each 中添加一个过滤器，以检查城市 ID 是否是您想要的。

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

Answer 3

可以使用您想要的城市名称准备一个过滤器并将其应用于您的数据数组以过滤您喜欢的数据，例如：

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