我怎樣才能只選擇一些JSON對象？

Question

嗨我有一個腳本解析本地JSON對象（目前只是爲了顯示一個列表）。

function generateFamilySelect() { 
    var implantData = JSON.parse(localStorage.getItem("implantData")); 
    var implantFamilies = ""; 
    $.each(implantData.implantFamilies, function(index, value) { 
     implantFamilies += implantData.implantFamilies[index].familyDisplay + "<br />"; 
    }); 
    $("#holderForFamilySelect").html(implantFamilies); 
} 

和JSON對象：

{"implantFamilies":[ 
    {"id":"1","familySelector":"aa","familyDisplay":"One","loadInitially":"1"}, 
    {"id":"2","familySelector":"bb","familyDisplay":"Two","loadInitially":"1"}, 
    {"id":"3","familySelector":"cc","familyDisplay":"Three","loadInitially":"1"}, 
    {"id":"4","familySelector":"dd","familyDisplay":"Four","loadInitially":"0"}, 
    {"id":"5","familySelector":"ee","familyDisplay":"Five","loadInitially":"0"}, 
    {"id":"6","fami… 

目前，列表顯示所有的元素。我如何修改此腳本以僅顯示"loadInitially":"1"？

---

此外，快速的語法問題，我覺得行

implantFamilies += implantData.implantFamilies[index].familyDisplay + "<br />"; 

可以寫成像

implantFamilies += this[index].familyDisplay + "<br />"; 

，但我不能得到那個工作...

Answer 1

the_5imian has provided a good answer你的第一個問題，you have determined the obvious alternate solution，鑑於你目前的代碼。

至於第二個問題（this內jQuery.each()）：
在jQuery.each()，this是value纏繞爲對象。 value是當前索引處的數組元素的值，而不是整個數組。換句話說，在此上下文中，您不使用value或this上的[index]來獲取當前數組元素。對於此代碼，value和this是相同的，因爲value已經是對象。

你想要的東西，你可以只使用value（考慮到陣列中的所有元素都已經對象，你可以使用this代替，但使用value是一個更好的習慣是英寸）：

$.each(implantData.implantFamilies, function(index, value) { 
    if (value.loadInitially == "1") { 
     implantFamilies += value.familyDisplay + "<br />"; 
    } else { 
     //do nothing 
    } 
}); 

this是value包裝成一個對象：
下面應該告訴你什麼value和this值是內$.each(array,function(index,value){...});：

var myArray = ['zero','one','two','three','four','five']; 
 

 
$.each(myArray, function(index,value){ 
 
    console.log(index + ' value =',value); 
 
    console.log(index + ' this =',this); //this is the value wrapped as an Object. 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

那好吧，現在看起來很明顯。

$.each(implantData.implantFamilies, function(index, value) { 
    if (implantData.implantFamilies[index].loadInitially == "1") { 
     implantFamilies += implantData.implantFamilies[index].familyDisplay + "<br />"; 
    } else { 
     //do nothing 
    } 
}); 

我的問題的第二部分如何？

Answer 3

最簡單的是使用JavaScript Array.filter()方法

// (or in your case, you get it from localstorage, but here's the data) 
var myJson = {"implantFamilies":[ 
    {"id":"1","familySelector":"aa","familyDisplay":"One","loadInitially":"1"}, 
    {"id":"2","familySelector":"bb","familyDisplay":"Two","loadInitially":"1"}, 
    {"id":"3","familySelector":"cc","familyDisplay":"Three","loadInitially":"1"}, 
    {"id":"4","familySelector":"dd","familyDisplay":"Four","loadInitially":"0"}, 
    {"id":"5","familySelector":"ee","familyDisplay":"Five","loadInitially":"0"}] }; 

//the array of implant families 
var implantFamilies = myJson.implantFamilies; 

//the filtering function. This is preferable to $.each 
function implantFamiliesThatLoadInitially(implantFamily){ 
    return implantFamily.loadInitially === '1'; 
} 

//this is only the ones you want, (filtered by loadInitially property) 
var loadInitiallyImplantFamilies = implantFamilies.filter(implantFamiliesThatLoadInitially); 

你的代碼的第二部分的目標是建立基於JSON數據，存儲在格蘭可變implantFamilies一些HTML。我會推薦Array.map（）作爲一個更簡單的解決方案，而不是處理this。就像之前我將它分成多個步驟一樣，所以很清楚發生了什麼。

//your map function. You can make any html you want, like li's 
function toImplantFamilyHtml(family){ 
    return family.familyDisplay + '<br />' 
} 

//returns a plain string of html 
var implantFamilyHtml = loadInitiallyImplantFamilies.map(toImplantFamilyHtml); 

//jquery object you can use, or append to the DOM or whatever 
var $implantFamilyHtml = $(implantFamilyHtml); 

//append to DOM 
$("#holderForFamilySelect").html($implantFamilyHtml); 

工作小提琴：https://jsfiddle.net/mv850pxo/2/