CODEWITHSUNDEEP
javascriptjqueryjson
Brad
Brad

Reputation: 1047

How can I only select some JSON objects?

Hi I have a script which parses a local JSON object (at the moment just to display a list).

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

and the JSON object:

{"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…

At the moment, the list shows all of the elements. How can I modify this script to only show those with "loadInitially":"1"?

Also, a quick syntax question, I feel like the line

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

could be written something like

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

but I can't get that to work...

Upvotes: 0

Views: 1083

Answers (3)

the_5imian
the_5imian

Reputation: 896

The easiest is to use the Javascript Array.filter() method

// (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);

The goal of the second part of your code is to build some html based on the data in the json, stored in teh variable implantFamilies. I will recommend Array.map() as an easier solution, than dealing with this. like before I am breaking this into multiple steps with comments so it is clear what is happening.

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

working Fiddle: https://jsfiddle.net/mv850pxo/2/

Upvotes: 2

Makyen
Makyen

Reputation: 33306

the_5imian has provided a good answer to your first question, and you have determined the obvious alternate solution, given your current code.

As to your second question (this within jQuery.each()):
Within jQuery.each(), this is the value wrapped as an Object. value is the value of the array element at the current index, not the entire array. In other words, you don't use [index] on value or this within this context to get the current array element. For this code, value and this are the same because value is already an Object.

For what you want, you could just use value (Given that all elements of the array are already Objects, you could use this instead, but using value is a better habit to be in.):

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

this is the value wrapped as an Object:
The following should show you what the values of value and this are within $.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>

Upvotes: 0

Brad
Brad

Reputation: 1047

Well that just seems obvious now.

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

How about the second part of my question?

Upvotes: 0

Related Questions