Как я могу выбрать только некоторые объекты 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 - значение элемента массива в текущем индексе, а не весь массив. Другими словами, вы не используете [index] на value или this в этом контексте, чтобы получить текущий элемент массива. Для этого кода 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); 

Цель второй части вашего кода для создания некоторых HTML на основе данных в формате JSON, хранимые в Teh переменной implantFamilies. Я рекомендую 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); 

работает Fiddle: https://jsfiddle.net/mv850pxo/2/