从json数组中迭代和输出条件数据
问题描述：
我有一个名为steps.json的json文件，它包含这个json数组，我想根据下面的条件进行迭代。从json数组中迭代和输出条件数据
{
"friends": [
{ "firstName" : "Paul", "lastName" : "Taylor", "Step": 2 },
{ "firstName" : "Sharon", "lastName" : "Thomas", "Step": 3 },
{ "firstName" : "Thomas", "lastName" : "Harris", "Step": 3 },
{ "firstName" : "Deborah", "lastName" : "Lee", "Step": 4 },
{ "firstName" : "Mark", "lastName" : "Young", "Step": 4 },
{ "firstName" : "Shirley", "lastName" : "Perez", "Step": 4 },
{ "firstName" : "Joseph", "lastName" : "Lee", "Step": 5 },
{ "firstName" : "Mary", "lastName" : "White", "Step": 5 },
{ "firstName" : "Matthew", "lastName" : "Garcia", "Step": 5 },
{ "firstName" : "Patricia", "lastName" : "Allen", "Step": 5 },
{ "firstName" : "Larry", "lastName" : "Robinson", "Step": 6 },
{ "firstName" : "Kimberly", "lastName" : "Lopez", "Step": 6 },
{ "firstName" : "Jose", "lastName" : "Martinez", "Step": 6 },
{ "firstName" : "Deborah", "lastName" : "Walker", "Step": 6 },
{ "firstName" : "Joseph", "lastName" : "Lopez", "Step": 6 },
{ "firstName" : "Dorothy", "lastName" : "Moore", "Step": 7 },
{ "firstName" : "Jose", "lastName" : "Jackson", "Step": 7 },
{ "firstName" : "Karen", "lastName" : "Lee", "Step": 7 },
{ "firstName" : "Paul", "lastName" : "Taylor", "Step": 7 },
{ "firstName" : "Amy", "lastName" : "Gonzalez", "Step": 7 },
{ "firstName" : "Richard", "lastName" : "Martinez", "Step": 7 }
]
}
我想输出数组中的对象时，用户单击一个按钮匹配的步骤编号。 用户点击按钮2的示例我想要显示步骤2中的所有朋友等，等等。我得到这样的JSON，但不知道如何设置点击请求。
findFriends :function(){
var urlString = 'assets/javascripts/steps.json';
$.getJSON(urlString,function(data){
var friends = data.friends;
for(var i = 0; i <= friends.length; i++){
for(friend in friends[i]){
}
}
});
}
答
这里是工作代码。点击下面的按钮来运行它。
$(function() {
var friends = [{
"firstName": "Paul",
"lastName": "Taylor",
"Step": 2
}, {
"firstName": "Sharon",
"lastName": "Thomas",
"Step": 3
}, {
"firstName": "Thomas",
"lastName": "Harris",
"Step": 3
}, {
"firstName": "Deborah",
"lastName": "Lee",
"Step": 4
}, {
"firstName": "Mark",
"lastName": "Young",
"Step": 4
}, {
"firstName": "Shirley",
"lastName": "Perez",
"Step": 4
}, {
"firstName": "Joseph",
"lastName": "Lee",
"Step": 5
}, {
"firstName": "Mary",
"lastName": "White",
"Step": 5
}, {
"firstName": "Matthew",
"lastName": "Garcia",
"Step": 5
}, {
"firstName": "Patricia",
"lastName": "Allen",
"Step": 5
}, {
"firstName": "Larry",
"lastName": "Robinson",
"Step": 6
}, {
"firstName": "Kimberly",
"lastName": "Lopez",
"Step": 6
}, {
"firstName": "Jose",
"lastName": "Martinez",
"Step": 6
}, {
"firstName": "Deborah",
"lastName": "Walker",
"Step": 6
}, {
"firstName": "Joseph",
"lastName": "Lopez",
"Step": 6
}, {
"firstName": "Dorothy",
"lastName": "Moore",
"Step": 7
}, {
"firstName": "Jose",
"lastName": "Jackson",
"Step": 7
}, {
"firstName": "Karen",
"lastName": "Lee",
"Step": 7
}, {
"firstName": "Paul",
"lastName": "Taylor",
"Step": 7
}, {
"firstName": "Amy",
"lastName": "Gonzalez",
"Step": 7
}, {
"firstName": "Richard",
"lastName": "Martinez",
"Step": 7
}];
function findFriends(step) {
var urlString = 'assets/javascripts/steps.json';
// commenting out the ajax lines for the purposes of this demo. for now we'll use the global friends variable declared above
// $.getJSON(urlString, function(data) {
// var friends = data.friends;
var results = '';
var numFound = 0;
$.each(friends, function(key, value) {
if (value.Step == step) {
numFound++;
console.log (numFound);
if (numFound <= 2) {
results += value.firstName + ' ' + value.lastName + '<br>';
}
};
});
if (numFound > 2) {
results += 'and ' + (numFound - 2) +
' other friend' + (numFound == 3 ? '' : 's');
}
$('#results').html(results);
//});
}
$('#find-friends').click(function() {
// note the plus to convert the string into a number
findFriends(+$('#step').val());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter the step you want to test:
<br>
<input type="text" id="step">
<br>
<button id="find-friends">click me!</button>
<div id="results"></div>
答
// friend finder function
function findFriends(stepNo) {
var urlString = 'assets/javascripts/steps.json';
$.getJSON(urlString, function(data){
var friends = data.friends.filter(function(friend) {
return friend.Step === stepNo;
});
// do something with the found friends :) (e.g. fill a list)
});
}
// click handler
$('.yourButtonSelector').click(function() {
var stepNo = $(this).attr('data-stepNo'); // not sure how you store the step no. in the buttons
findFriends(stepNo);
});
作为一个方面说明：如果你有过JSON格式控制和主要使用这项服务所描述的格式，我建议使用stepNo为重点：
{
friends: {
1: [...],
2: [...],
...
}
}
+0
感谢您的帮助 – user3920440 2014-10-02 03:53:50
答
您可以使用[].filter()。
friends.filter(function(f){return f.step == 2});
+0
感谢你的帮助 – user3920440 2014-10-02 03:54:19
答
这里num是，你可以通过，并根据各指标动态值将过滤
var friends = data.friends;
var num = 6;
var filteredNames = $(friends).filter(function(idx) {
return friends[idx].Step === num;
});
**感谢你非常**。我需要稍微改变一下情况，只显示前两个人在任何一步。所以例如，如果有三个朋友在步骤4，我点击按钮，看到第4步我需要把“黛博拉李，雪莉佩雷斯，和其他朋友也在婴儿第4步” – user3920440 2014-10-01 07:26:12
更新了答案 – manishie 2014-10-01 13:56:25
manishie谢谢所有的帮助 – user3920440 2014-10-02 03:53:34