从json数组迭代和输出条件数据

Question

我有一个名为steps.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]){

                }
            }


        });
 }

Answer 1

// 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: [...],
    ...
  }
}    

Answer 2

您可以[].filter()使用[].filter() 。

 friends.filter(function(f){return f.step == 2});

Answer 3

这是工作代码。 点击下面的按钮运行它。

 $(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> 

Answer 4

这里num是动态值，您可以传递该值，并根据每个索引进行过滤

var friends = data.friends;    
var num = 6;
var filteredNames = $(friends).filter(function( idx ) {
return friends[idx].Step === num; 
});