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()。

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

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

4 个答案: