我怎样才能只选择一些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/