從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

這裏是工作代碼。點擊下面的按鈕來運行它。

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

// 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 3

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

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

Answer 4

這裏num是，你可以通過，並根據各指標動態值將過濾

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