Develop Reference

How to filter product data when checkbox selected is true in reactjs?

I have searched a lot regarding filter of product data using checkbox but couldn't able to find the right answer for my issue.
Problem: I'm making a product filter page using checkbox in react but could not found the proper way to filter the true value of object key.
ie. I have to only filter object key value === true. Below array object is after checkbox selection before the selection it will be falsy value.
const category = [
{
"type":"Color",
"options":[
{
"key":"Red",
"value":true
},
{
"key":"Blue",
"value":false
},
{
"key":"Green",
"value":true
}
]
},
{
"type":"Gender",
"options":[
{
"key":"Men",
"value":true
},
{
"key":"Women",
"value":false
}
]
},
{
"type":"Price",
"options":[
{
"key":"0 - Rs. 250",
"from":0,
"to":250,
"value":false
},
{
"key":"Rs. 251 - 450",
"from":251,
"to":450,
"value":true
},
{
"key":"Rs. 451 & above",
"from":451,
"to":"Number.MAX_VALUE",
"value":false
}
]
},
{
"type":"Type",
"options":[
{
"key":"Polo",
"value":false
},
{
"key":"Hoodie",
"value":false
},
{
"key":"Basic",
"value":true
}
]
}
]
const productData = [
{
"id": 1,
"name": "Black Polo",
"type": "Polo",
"price": 250,
"currency": "INR",
"color": "Black",
"gender": "Men",
"quantity": 3
},
{
"id": 2,
"name": "Blue Polo",
"type": "Polo",
"price": 350,
"currency": "INR",
"color": "Blue",
"gender": "Women",
"quantity": 3
},
{
"id": 3,
"name": "Pink Polo",
"type": "Polo",
"price": 350,
"currency": "INR",
"color": "Pink",
"gender": "Women",
"quantity": 6
},
{
"id": 4,
"name": "Black Hoodie",
"type": "Hoodie",
"price": 500,
"currency": "INR",
"color": "Black",
"gender": "Men",
"quantity": 2
},
{
"id": 5,
"name": "Green Polo",
"type": "Polo",
"price": 250,
"currency": "INR",
"color": "Green",
"gender": "Men",
"quantity": 1
},
{
"id": 6,
"name": "Green Polo",
"type": "Polo",
"price": 350,
"currency": "INR",
"color": "Green",
"gender": "Women",
"quantity": 1
},
{
"id": 7,
"name": "Blue Hoodie",
"type": "Hoodie",
"price": 500,
"currency": "INR",
"color": "Blue",
"gender": "Women",
"quantity": 2
},
{
"id": 8,
"name": "Black Hoodie",
"type": "Hoodie",
"price": 500,
"currency": "INR",
"color": "Black",
"gender": "Women",
"quantity": 5
}]
Now,I need filtered product data from the above category data and product-data.
Here's my Codesandbox link for this.

How to gather only specific data from remote JSON file

I have a local group of about 50 computers running Open Hardware Monitor and outputting a JSON file to http://theirip:8085/data.json . I have renamed the texts on certain parts to respectively CPU, RAM, GPU, HDD. I'm trying to get stuff like a Value which is a child of a CPU Core 1 which is a child of Temperatures which is a child of CPU. But I just can't figure it out.
I have some other code that loads the json (which i can see in the console), copied from an example.
I need to modify this to fetch just the temperature values of each CPU, GPU. The % use of RAM and % use of the HDD.
This is where I am stuck as I can't figure out the specific ways to output only these parts of the JSON.
Example JSON:
{
"id": 0,
"Text": "Sensor",
"Children": [{
"id": 1,
"Text": "DESKTOP-PEJT98F",
"Children": [{
"id": 2,
"Text": "Lenovo 20EV0013MB",
"Children": [],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/mainboard.png"
}, {
"id": 3,
"Text": "CPU",
"Children": [{
"id": 4,
"Text": "Clocks",
"Children": [{
"id": 5,
"Text": "Bus Speed",
"Children": [],
"Min": "100 MHz",
"Value": "100 MHz",
"Max": "100 MHz",
"ImageURL": "images/transparent.png"
}, {
"id": 6,
"Text": "CPU Core #1",
"Children": [],
"Min": "500 MHz",
"Value": "600 MHz",
"Max": "2800 MHz",
"ImageURL": "images/transparent.png"
}, {
"id": 7,
"Text": "CPU Core #2",
"Children": [],
"Min": "500 MHz",
"Value": "600 MHz",
"Max": "2800 MHz",
"ImageURL": "images/transparent.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/clock.png"
}, {
"id": 8,
"Text": "Temperatures",
"Children": [{
"id": 9,
"Text": "CPU Core #1",
"Children": [],
"Min": "31,0 °C",
"Value": "33,0 °C",
"Max": "58,0 °C",
"ImageURL": "images/transparent.png"
}, {
"id": 10,
"Text": "CPU Core #2",
"Children": [],
"Min": "32,0 °C",
"Value": "34,0 °C",
"Max": "63,0 °C",
"ImageURL": "images/transparent.png"
}, {
"id": 11,
"Text": "CPU Package",
"Children": [],
"Min": "34,0 °C",
"Value": "37,0 °C",
"Max": "63,0 °C",
"ImageURL": "images/transparent.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/temperature.png"
}, {
"id": 12,
"Text": "Load",
"Children": [{
"id": 13,
"Text": "CPU Total",
"Children": [],
"Min": "0,0 %",
"Value": "3,1 %",
"Max": "100,0 %",
"ImageURL": "images/transparent.png"
}, {
"id": 14,
"Text": "CPU Core #1",
"Children": [],
"Min": "0,0 %",
"Value": "2,3 %",
"Max": "100,0 %",
"ImageURL": "images/transparent.png"
}, {
"id": 15,
"Text": "CPU Core #2",
"Children": [],
"Min": "0,0 %",
"Value": "3,9 %",
"Max": "100,0 %",
"ImageURL": "images/transparent.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/load.png"
}, {
"id": 16,
"Text": "Powers",
"Children": [{
"id": 17,
"Text": "CPU Package",
"Children": [],
"Min": "1,2 W",
"Value": "1,2 W",
"Max": "12,6 W",
"ImageURL": "images/transparent.png"
}, {
"id": 18,
"Text": "CPU Cores",
"Children": [],
"Min": "0,2 W",
"Value": "0,2 W",
"Max": "10,9 W",
"ImageURL": "images/transparent.png"
}, {
"id": 19,
"Text": "CPU Graphics",
"Children": [],
"Min": "0,0 W",
"Value": "0,0 W",
"Max": "0,3 W",
"ImageURL": "images/transparent.png"
}, {
"id": 20,
"Text": "CPU DRAM",
"Children": [],
"Min": "0,8 W",
"Value": "0,9 W",
"Max": "2,1 W",
"ImageURL": "images/transparent.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/power.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/cpu.png"
}, {
"id": 21,
"Text": "RAM",
"Children": [{
"id": 22,
"Text": "Load",
"Children": [{
"id": 23,
"Text": "Memory",
"Children": [],
"Min": "22,2 %",
"Value": "30,9 %",
"Max": "33,3 %",
"ImageURL": "images/transparent.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/load.png"
}, {
"id": 24,
"Text": "Data",
"Children": [{
"id": 25,
"Text": "Used Memory",
"Children": [],
"Min": "1,7 GB",
"Value": "2,3 GB",
"Max": "2,5 GB",
"ImageURL": "images/transparent.png"
}, {
"id": 26,
"Text": "Available Memory",
"Children": [],
"Min": "5,0 GB",
"Value": "5,2 GB",
"Max": "5,8 GB",
"ImageURL": "images/transparent.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/power.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/ram.png"
}, {
"id": 27,
"Text": "HDD",
"Children": [{
"id": 28,
"Text": "Temperatures",
"Children": [{
"id": 29,
"Text": "Temperature",
"Children": [],
"Min": "29,0 °C",
"Value": "30,0 °C",
"Max": "37,0 °C",
"ImageURL": "images/transparent.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/temperature.png"
}, {
"id": 30,
"Text": "Load",
"Children": [{
"id": 31,
"Text": "Used Space",
"Children": [],
"Min": "60,6 %",
"Value": "60,6 %",
"Max": "60,6 %",
"ImageURL": "images/transparent.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/load.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/hdd.png"
}],
"Min": "",
"Value": "",
"Max": "",
"ImageURL": "images_icon/computer.png"
}],
"Min": "Min",
"Value": "Value",
"Max": "Max",
"ImageURL": ""
}
Script in header (from an example):
<script>
$(document).ready(function() {
$("#retrieve-resources").click(function() {
var displayResources = $("#display-resources");
displayResources.text("Loading data from JSON source...");
$.ajax({
type: "GET",
url: "http://exampleIPhere:8085/data.json",
success: function(result) {
console.log(result);
var output =
"<table><thead><tr><th>Name</th><th>Provider</th><th>URL</th></thead><tbody>";
for (var i in result) {
output +=
"<tr><td>" +
result[i].name +
"</td><td>" +
result[i].provider +
"</td><td>" +
result[i].url +
"</td></tr>";
}
output += "</tbody></table>";
displayResources.html(output);
$("table").addClass("table");
}
});
});
});
</script>
HTML:
<div id="display-resources">
<p>jQuery example using jQuery.ajax() to retrieve a list of JavaScript Training Resources.</p>
</div>
Retrieve List
Any push in the right direction is massively appreciated!

I think the tricky part of this question is traversing the JSON. When working with JSON files I often find it helpful to paste the sample output into a site like this to make it more readable:
http://jsoneditoronline.org/
In this particular example, you might not need to even iterate over the results if each computer is only outputting a JSON file as you've pasted above.
console.log(obj.Children[0].Children[1].Children[0].Children[1].Text);
However, the previous poster is correct about iterating through the results if there are multiple. I notice you're using jQuery in your sample code. You'd do something like this in that example:
obj = JSONResult; // your JSON
$.each(obj, function(index, element) {
});

How to filter nested array with values from another nested array using array.filter and array.some etc

I have the following code which I am using to filter one nested array with values from another nested array, but I am looking for the more fastest method.
const length = this.addedStateItems.length;
for (let i = 0; i < length; i++) {
if (this.addedStateItems[i].cities.length > 0) {
const tempCity: Array<BWCity> = [];
for (let k = 0; k < addedStates.length; k++) {
for (let l = 0; l < addedStates[k].Cities.length; l++) {
const city = this.addedStateItems[i].cities.find(item =>
item.name.toUpperCase().split(' ').join('_') === addedStates[k].Cities[l].CityName
);
if (city) {
tempCity.push(city);
}
}
}
this.addedStateItems[i].cities = tempCity;
}
}
JSON sample is as below:
this.addedStateItems = [
{
"isSelected": false,
"cities": [],
"name": "Alabama",
"code": "AL",
"sequence": 2,
"access": 2,
"id": 2
},
{
"isSelected": false,
"cities": [],
"name": "Alaska",
"code": "AK",
"sequence": 3,
"access": 3,
"id": 3
},
{
"isSelected": false,
"cities": [],
"name": "Arizona",
"code": "AZ",
"sequence": 4,
"access": 4,
"id": 4
},
{
"isSelected": false,
"cities": [],
"name": "Arkansas",
"code": "AR",
"sequence": 5,
"access": 5,
"id": 5
},
{
"isSelected": false,
"cities": [],
"name": "California",
"code": "CA",
"sequence": 6,
"access": 6,
"id": 6
},
{
"isSelected": false,
"cities": [],
"name": "Colorado",
"code": "CO",
"sequence": 7,
"access": 7,
"id": 7
},
{
"isSelected": false,
"cities": [],
"name": "Connecticut",
"code": "CT",
"sequence": 8,
"access": 8,
"id": 8
},
{
"isSelected": false,
"cities": [],
"name": "Delaware",
"code": "DE",
"sequence": 9,
"access": 9,
"id": 9
},
{
"isSelected": false,
"cities": [],
"name": "District of Columbia",
"code": "DC",
"sequence": 10,
"access": 10,
"id": 10
},
{
"isSelected": false,
"cities": [],
"name": "Florida",
"code": "FL",
"sequence": 11,
"access": 11,
"id": 11
},
{
"isSelected": false,
"cities": [],
"name": "Georgia",
"code": "GA",
"sequence": 12,
"access": 12,
"id": 12
},
{
"isSelected": false,
"cities": [],
"name": "Hawaii",
"code": "HI",
"sequence": 13,
"access": 13,
"id": 13
},
{
"isSelected": false,
"cities": [],
"name": "Idaho",
"code": "ID",
"sequence": 14,
"access": 14,
"id": 14
},
{
"isSelected": false,
"cities": [],
"name": "Illinois",
"code": "IL",
"sequence": 15,
"access": 15,
"id": 15
},
{
"isSelected": false,
"cities": [],
"name": "Indiana",
"code": "IN",
"sequence": 16,
"access": 16,
"id": 16
},
{
"isSelected": false,
"cities": [],
"name": "Iowa",
"code": "IA",
"sequence": 17,
"access": 17,
"id": 17
},
{
"isSelected": false,
"cities": [],
"name": "Kansas",
"code": "KS",
"sequence": 18,
"access": 18,
"id": 18
},
{
"isSelected": false,
"cities": [],
"name": "Kentucky",
"code": "KY",
"sequence": 19,
"access": 19,
"id": 19
},
{
"isSelected": false,
"cities": [],
"name": "Louisiana",
"code": "LA",
"sequence": 20,
"access": 20,
"id": 20
},
{
"isSelected": false,
"cities": [],
"name": "Maine",
"code": "ME",
"sequence": 21,
"access": 21,
"id": 21
},
{
"isSelected": false,
"cities": [],
"name": "Maryland",
"code": "MD",
"sequence": 22,
"access": 22,
"id": 22
},
{
"isSelected": false,
"cities": [],
"name": "Massachusetts",
"code": "MA",
"sequence": 23,
"access": 23,
"id": 23
},
{
"isSelected": false,
"cities": [
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 9
}
],
"name": "MI Generic",
"code": "MIG",
"id": 1
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 10
}
],
"name": "Port Huron",
"code": "POH",
"id": 9
},
{
"isSelected": false,
"citySequences": [],
"name": "Hudson",
"code": "HUD",
"id": 31
}
],
"name": "Michigan",
"code": "MI",
"sequence": 24,
"access": 24,
"id": 24
},
{
"isSelected": false,
"cities": [],
"name": "Minnesota",
"code": "MN",
"sequence": 25,
"access": 25,
"id": 25
},
{
"isSelected": false,
"cities": [],
"name": "Mississippi",
"code": "MS",
"sequence": 26,
"access": 26,
"id": 26
},
{
"isSelected": false,
"cities": [
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 1
}
],
"name": "Kansas City",
"code": "KCM",
"id": 29
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 2
}
],
"name": "St Louis",
"code": "STL",
"id": 30
}
],
"name": "Missouri",
"code": "MO",
"sequence": 27,
"access": 27,
"id": 27
},
{
"isSelected": false,
"cities": [],
"name": "Montana",
"code": "MT",
"sequence": 28,
"access": 28,
"id": 28
},
{
"isSelected": false,
"cities": [],
"name": "Nebraska",
"code": "NE",
"sequence": 29,
"access": 29,
"id": 29
},
{
"isSelected": false,
"cities": [],
"name": "New Hampshire",
"code": "NH",
"sequence": 31,
"access": 31,
"id": 31
},
{
"isSelected": false,
"cities": [],
"name": "New Jersey",
"code": "NJ",
"sequence": 32,
"access": 32,
"id": 32
},
{
"isSelected": false,
"cities": [],
"name": "New Mexico",
"code": "NM",
"sequence": 33,
"access": 33,
"id": 33
},
{
"isSelected": false,
"cities": [
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 1
},
{
"systemId": 3,
"sequence": 1
},
{
"systemId": 4,
"sequence": 1
},
{
"systemId": 5,
"sequence": 1
}
],
"name": "New York City",
"code": "NYC",
"id": 11
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 2
},
{
"systemId": 2,
"sequence": 1
}
],
"name": "Yonkers",
"code": "NYY",
"id": 12
}
],
"name": "New York",
"code": "NY",
"sequence": 34,
"access": 34,
"id": 34
},
{
"isSelected": false,
"cities": [],
"name": "North Carolina",
"code": "NC",
"sequence": 35,
"access": 35,
"id": 36
},
{
"isSelected": false,
"cities": [],
"name": "North Dakota",
"code": "ND",
"sequence": 36,
"access": 36,
"id": 37
},
{
"isSelected": false,
"cities": [
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 12
},
{
"systemId": 3,
"sequence": 3
},
{
"systemId": 4,
"sequence": 3
},
{
"systemId": 5,
"sequence": 3
}
],
"name": "OH Generic",
"code": "OHG",
"id": 13
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 1
},
{
"systemId": 3,
"sequence": 1
},
{
"systemId": 4,
"sequence": 1
},
{
"systemId": 5,
"sequence": 1
}
],
"name": "OH RITA",
"code": "OHR",
"id": 14
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 2
},
{
"systemId": 3,
"sequence": 2
},
{
"systemId": 4,
"sequence": 2
},
{
"systemId": 5,
"sequence": 2
}
],
"name": "OH CCA",
"code": "CCA",
"id": 15
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 3
}
],
"name": "Akron",
"code": "AKR",
"id": 16
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 4
}
],
"name": "Cincinnati",
"code": "CIN",
"id": 17
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 6
}
],
"name": "Columbus",
"code": "COL",
"id": 19
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 7
}
],
"name": "Toledo",
"code": "TOL",
"id": 20
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 8
}
],
"name": "Springfield",
"code": "SPR",
"id": 21
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 9
}
],
"name": "Wyoming",
"code": "WYO",
"id": 22
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 10
}
],
"name": "Indian_Hill",
"code": "IHL",
"id": 23
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 11
}
],
"name": "Mansfield",
"code": "MAN",
"id": 24
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 12
}
],
"name": "Crestline",
"code": "CRE",
"id": 25
}
],
"name": "Ohio",
"code": "OH",
"sequence": 37,
"access": 37,
"id": 38
},
{
"isSelected": false,
"cities": [],
"name": "Oklahoma",
"code": "OK",
"sequence": 38,
"access": 38,
"id": 39
},
{
"isSelected": false,
"cities": [],
"name": "Oregon",
"code": "OR",
"sequence": 39,
"access": 39,
"id": 40
},
{
"isSelected": false,
"cities": [
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 1
}
],
"name": "PA Generic",
"code": "PAG",
"id": 26
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 2
},
{
"systemId": 2,
"sequence": 1
},
{
"systemId": 3,
"sequence": 1
},
{
"systemId": 4,
"sequence": 1
},
{
"systemId": 5,
"sequence": 1
}
],
"name": "Philadelphia",
"code": "PHI",
"id": 27
}
],
"name": "Pennsylvania",
"code": "PA",
"sequence": 40,
"access": 40,
"id": 41
},
{
"isSelected": false,
"cities": [],
"name": "Rhode Island",
"code": "RI",
"sequence": 41,
"access": 41,
"id": 42
},
{
"isSelected": false,
"cities": [],
"name": "South Carolina",
"code": "SC",
"sequence": 42,
"access": 42,
"id": 43
},
{
"isSelected": false,
"cities": [],
"name": "Tennessee",
"code": "TN",
"sequence": 44,
"access": 44,
"id": 45
},
{
"isSelected": false,
"cities": [],
"name": "Texas",
"code": "TX",
"sequence": 45,
"access": 45,
"id": 46
},
{
"isSelected": false,
"cities": [],
"name": "Utah",
"code": "UT",
"sequence": 46,
"access": 46,
"id": 47
},
{
"isSelected": false,
"cities": [],
"name": "Vermont",
"code": "VT",
"sequence": 47,
"access": 47,
"id": 48
},
{
"isSelected": false,
"cities": [],
"name": "Virginia",
"code": "VA",
"sequence": 48,
"access": 48,
"id": 49
},
{
"isSelected": false,
"cities": [],
"name": "West Virginia",
"code": "WV",
"sequence": 50,
"access": 50,
"id": 51
},
{
"isSelected": false,
"cities": [],
"name": "Wisconsin",
"code": "WI",
"sequence": 51,
"access": 51,
"id": 52
}
]
Second JSON:
addedStates = [
{
"StateName": "DISTRICT_OF_COLUMBIA",
"Cities": []
},
{
"StateName": "COLORADO",
"Cities": []
},
{
"StateName": "ALABAMA",
"Cities": []
},
{
"StateName": "OHIO",
"Cities": [
{
"CityName": "AKRON"
},
{
"CityName": "CINCINNATI"
}
]
},
{
"StateName": "NEW_YORK",
"Cities": [
{
"CityName": "YONKERS"
}
]
}
]
After filtering first JSON with second JSON I expect this:
result = [
{
"isSelected": false,
"cities": [],
"name": "Alabama",
"code": "AL",
"sequence": 2,
"access": 2,
"id": 2
},
{
"isSelected": false,
"cities": [],
"name": "Colorado",
"code": "CO",
"sequence": 7,
"access": 7,
"id": 7
},
{
"isSelected": false,
"cities": [],
"name": "District of Columbia",
"code": "DC",
"sequence": 10,
"access": 10,
"id": 10
},
{
"isSelected": false,
"cities": [
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 2
},
{
"systemId": 2,
"sequence": 1
}
],
"name": "Yonkers",
"code": "NYY",
"id": 12
}
],
"name": "New York",
"code": "NY",
"sequence": 34,
"access": 34,
"id": 34
},
{
"isSelected": false,
"cities": [
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 3
}
],
"name": "Akron",
"code": "AKR",
"id": 16
},
{
"isSelected": false,
"citySequences": [
{
"systemId": 1,
"sequence": 4
}
],
"name": "Cincinnati",
"code": "CIN",
"id": 17
}
],
"name": "Ohio",
"code": "OH",
"sequence": 37,
"access": 37,
"id": 38
}
]

AngularJS with Jquery Chosen Default Load

I'm using AngularJS and the jquery chosen plugin to populate a multiple select form. My Angular code has a service that is calling a node.js web service. The option list for the chosen select box is being populated from a json file while the value is being stored within model from the nodejs service. I've been using this link to guide me but now seem to be stuck.
I've included the code here.
My chosen options are being populated as such:
[
{"id": 1, "name": "00:00", "value": 0},
{"id": 2, "name": "00:15", "value": 900000},
{"id": 3, "name": "00:30", "value": 1800000}
...
]
But my model is being stored as:
meal.dinnerTimes = ["06:15","18:30"]
So when the model is loaded by the service and controller. The select box is always blank where I would expect to see
"06:15" and "18:30" already populated in this case
Any help would be appreciated

As you only have value with you while assigning model, use select as label for value in array syntax to have only value property assigned to the model.
Also note that you are not invoking callback function provided in MealSvc factory hence, value of model will never get set!
Plunker Demo
var app = angular.module("MealApp", ['MealService']);
var data = [{
"id": 1,
"name": "00:00",
"value": 0
}, {
"id": 2,
"name": "00:15",
"value": 900000
}, {
"id": 3,
"name": "00:30",
"value": 1800000
}, {
"id": 4,
"name": "00:45",
"value": 2700000
}, {
"id": 5,
"name": "01:00",
"value": 3600000
}, {
"id": 6,
"name": "01:15",
"value": 4500000
}, {
"id": 7,
"name": "01:30",
"value": 5400000
}, {
"id": 8,
"name": "01:45",
"value": 6300000
}, {
"id": 9,
"name": "02:00",
"value": 7200000
}, {
"id": 10,
"name": "02:15",
"value": 8100000
}, {
"id": 11,
"name": "02:30",
"value": 9000000
}, {
"id": 12,
"name": "02:45",
"value": 9900000
}, {
"id": 13,
"name": "03:00",
"value": 10800000
}, {
"id": 14,
"name": "03:15",
"value": 11700000
}, {
"id": 15,
"name": "03:30",
"value": 12600000
}, {
"id": 16,
"name": "03:45",
"value": 13500000
}, {
"id": 17,
"name": "04:00",
"value": 14400000
}, {
"id": 18,
"name": "04:15",
"value": 15300000
}, {
"id": 19,
"name": "04:30",
"value": 16200000
}, {
"id": 20,
"name": "04:45",
"value": 17100000
}, {
"id": 21,
"name": "05:00",
"value": 18000000
}, {
"id": 22,
"name": "05:15",
"value": 18900000
}, {
"id": 23,
"name": "05:30",
"value": 19800000
}, {
"id": 24,
"name": "05:45",
"value": 20700000
}, {
"id": 25,
"name": "06:00",
"value": 21600000
}, {
"id": 26,
"name": "06:15",
"value": 22500000
}, {
"id": 27,
"name": "06:30",
"value": 23400000
}, {
"id": 28,
"name": "06:45",
"value": 24300000
}, {
"id": 29,
"name": "07:00",
"value": 25200000
}, {
"id": 30,
"name": "07:15",
"value": 26100000
}, {
"id": 31,
"name": "07:30",
"value": 27000000
}, {
"id": 32,
"name": "07:45",
"value": 27900000
}, {
"id": 33,
"name": "08:00",
"value": 28800000
}, {
"id": 34,
"name": "08:15",
"value": 29700000
}, {
"id": 35,
"name": "08:30",
"value": 30600000
}, {
"id": 36,
"name": "08:45",
"value": 31500000
}, {
"id": 37,
"name": "09:00",
"value": 32400000
}, {
"id": 38,
"name": "09:15",
"value": 33300000
}, {
"id": 39,
"name": "09:30",
"value": 34200000
}, {
"id": 40,
"name": "09:45",
"value": 35100000
}, {
"id": 41,
"name": "10:00",
"value": 36000000
}, {
"id": 42,
"name": "10:15",
"value": 36900000
}, {
"id": 43,
"name": "10:30",
"value": 37800000
}, {
"id": 44,
"name": "10:45",
"value": 38700000
}, {
"id": 45,
"name": "11:00",
"value": 39600000
}, {
"id": 46,
"name": "11:15",
"value": 40500000
}, {
"id": 47,
"name": "11:30",
"value": 41400000
}, {
"id": 48,
"name": "11:45",
"value": 42300000
}, {
"id": 49,
"name": "12:00",
"value": 43200000
}, {
"id": 50,
"name": "12:15",
"value": 44100000
}, {
"id": 51,
"name": "12:30",
"value": 45000000
}, {
"id": 52,
"name": "12:45",
"value": 45900000
}, {
"id": 53,
"name": "13:00",
"value": 46800000
}, {
"id": 54,
"name": "13:15",
"value": 47700000
}, {
"id": 55,
"name": "13:30",
"value": 48600000
}, {
"id": 56,
"name": "13:45",
"value": 49500000
}, {
"id": 57,
"name": "14:00",
"value": 50400000
}, {
"id": 58,
"name": "14:15",
"value": 51300000
}, {
"id": 59,
"name": "14:30",
"value": 52200000
}, {
"id": 60,
"name": "14:45",
"value": 53100000
}, {
"id": 61,
"name": "15:00",
"value": 54000000
}, {
"id": 62,
"name": "15:15",
"value": 54900000
}, {
"id": 63,
"name": "15:30",
"value": 55800000
}, {
"id": 64,
"name": "15:45",
"value": 56700000
}, {
"id": 65,
"name": "16:00",
"value": 57600000
}, {
"id": 66,
"name": "16:15",
"value": 58500000
}, {
"id": 67,
"name": "16:30",
"value": 59400000
}, {
"id": 68,
"name": "16:45",
"value": 60300000
}, {
"id": 69,
"name": "17:00",
"value": 61200000
}, {
"id": 70,
"name": "17:15",
"value": 62100000
}, {
"id": 71,
"name": "17:30",
"value": 63000000
}, {
"id": 72,
"name": "17:45",
"value": 63900000
}, {
"id": 73,
"name": "18:00",
"value": 64800000
}, {
"id": 74,
"name": "18:15",
"value": 65700000
}, {
"id": 75,
"name": "18:30",
"value": 66600000
}, {
"id": 76,
"name": "18:45",
"value": 67500000
}, {
"id": 77,
"name": "19:00",
"value": 68400000
}, {
"id": 78,
"name": "19:15",
"value": 69300000
}, {
"id": 79,
"name": "19:30",
"value": 70200000
}, {
"id": 80,
"name": "19:45",
"value": 71100000
}, {
"id": 81,
"name": "20:00",
"value": 72000000
}, {
"id": 82,
"name": "20:15",
"value": 72900000
}, {
"id": 83,
"name": "20:30",
"value": 73800000
}, {
"id": 84,
"name": "20:45",
"value": 74700000
}, {
"id": 85,
"name": "21:00",
"value": 75600000
}, {
"id": 86,
"name": "21:15",
"value": 76500000
}, {
"id": 87,
"name": "21:30",
"value": 77400000
}, {
"id": 88,
"name": "21:45",
"value": 78300000
}, {
"id": 89,
"name": "22:00",
"value": 79200000
}, {
"id": 90,
"name": "22:15",
"value": 80100000
}, {
"id": 91,
"name": "22:30",
"value": 81000000
}, {
"id": 92,
"name": "22:45",
"value": 81900000
}, {
"id": 93,
"name": "23:00",
"value": 82800000
}, {
"id": 94,
"name": "23:15",
"value": 83700000
}, {
"id": 95,
"name": "23:30",
"value": 84600000
}, {
"id": 96,
"name": "23:45",
"value": 85500000
}];
app.directive('chosen', function() {
var linker = function(scope, element, attr) {
scope.$watch('availableTimes', function() {
element.triggerHandler('chosen:updated');
});
scope.$watch('MealSvc.get()', function() {
element.triggerHandler('chosen:updated');
});
element.chosen({
width: "95%"
});
};
return {
restrict: 'A',
link: linker
}
});
app.controller("MealCtrl", function MealCtrl($scope, $window, $http, MealSvc) {
$scope.times = [];
$scope.availableTimes = [];
$scope.fetchTimes = function() {
$scope.availableTimes = data;
}
$scope.fetchTimes();
MealSvc.get(function(res) {
$scope.times = res.dinnerTimes;
});
});
angular.module('MealService', []).factory('MealSvc', function($http) {
return {
get: function(response) {
response({
"name": "Second Tea",
"dinnerTimes": [46800000, 57600000]
})
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" data-semver="2.2.0" data-require="jquery#*"></script>
<link data-require="chosen#*" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
<script data-require="chosen#*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<script data-require="chosen#*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js" data-require="angular.js#1.2.x"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="MealApp" ng-controller="MealCtrl">
<div class="row">
<select data-placeholder="Select Dinner Time" multiple class="chzn-select" chosen ng-model="times" ng-options="times.value as times.name for times in availableTimes"></select>
</div>
</div>
</body>
</html>

How can i get the total count id of this collection using javascript?

I have this collection: https://graph.facebook.com/2playcz/albums
This collection contains 8 id. How can i get the total count id of this collection using javascript? (Total = 8)
Source:
{
"data": [
{
"id": "201936779932071",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Tr\u00e9ninky",
"link": "https://www.facebook.com/album.php?fbid=201936779932071&id=190320081093741&aid=41883",
"cover_photo": "201937046598711",
"count": 8,
"type": "normal",
"created_time": "2012-07-02T09:33:43+0000",
"updated_time": "2012-09-15T12:05:44+0000",
"can_upload": false,
"likes": {
"data": [
{
"id": "1788805921",
"name": "Edita Nov\u00e1"
},
{
"id": "100001449904219",
"name": "Mirka Brani\u0161ov\u00e1"
}
],
"paging": {
"next": "https://graph.facebook.com/201936779932071/likes?limit=25&offset=25&__after_id=100001449904219"
}
}
},
{
"id": "205206429605106",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Turnaje a akce",
"link": "https://www.facebook.com/album.php?fbid=205206429605106&id=190320081093741&aid=42900",
"cover_photo": "205208716271544",
"count": 14,
"type": "normal",
"created_time": "2012-07-10T19:36:53+0000",
"updated_time": "2012-09-15T12:04:05+0000",
"can_upload": false
},
{
"id": "221784994613916",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Tenisova \u0161kolka 2play",
"description": "Tenisov\u00e1 \u0161kolka 2play",
"link": "https://www.facebook.com/album.php?fbid=221784994613916&id=190320081093741&aid=49379",
"cover_photo": "221785024613913",
"count": 9,
"type": "normal",
"created_time": "2012-08-31T11:19:59+0000",
"updated_time": "2012-09-14T15:17:53+0000",
"can_upload": false
},
{
"id": "203405996451816",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Webov\u00e9 fotografie - Logo",
"link": "https://www.facebook.com/album.php?fbid=203405996451816&id=190320081093741&aid=42285",
"cover_photo": "203406586451757",
"count": 11,
"type": "normal",
"created_time": "2012-07-05T10:12:40+0000",
"updated_time": "2012-09-14T15:16:40+0000",
"can_upload": false
},
{
"id": "190332361092513",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Cover Photos",
"link": "https://www.facebook.com/album.php?fbid=190332361092513&id=190320081093741&aid=39232",
"cover_photo": "225939404198475",
"count": 2,
"type": "normal",
"created_time": "2012-06-09T13:52:38+0000",
"updated_time": "2012-09-12T18:15:51+0000",
"can_upload": false
},
{
"id": "190802884378794",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Wall Photos",
"link": "https://www.facebook.com/album.php?fbid=190802884378794&id=190320081093741&aid=39324",
"cover_photo": "190802891045460",
"count": 2,
"type": "wall",
"created_time": "2012-06-10T13:19:48+0000",
"updated_time": "2012-07-17T17:16:19+0000",
"can_upload": false
},
{
"id": "205207126271703",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Ostatn\u00ed",
"link": "https://www.facebook.com/album.php?fbid=205207126271703&id=190320081093741&aid=42902",
"cover_photo": "205209679604781",
"count": 4,
"type": "normal",
"created_time": "2012-07-10T19:40:05+0000",
"updated_time": "2012-07-16T14:47:16+0000",
"can_upload": false,
"likes": {
"data": [
{
"id": "100001449904219",
"name": "Mirka Brani\u0161ov\u00e1"
}
],
"paging": {
"next": "https://graph.facebook.com/205207126271703/likes?limit=25&offset=25&__after_id=100001449904219"
}
}
},
{
"id": "190320914426991",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Profile Pictures",
"link": "https://www.facebook.com/album.php?fbid=190320914426991&id=190320081093741&aid=39224",
"cover_photo": "190327474426335",
"count": 1,
"type": "profile",
"created_time": "2012-06-09T13:29:16+0000",
"updated_time": "2012-06-09T13:43:08+0000",
"can_upload": false
},
{
"id": "190322704426812",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Logo",
"description": "Loga spole\u010dnosti",
"link": "https://www.facebook.com/album.php?fbid=190322704426812&id=190320081093741&aid=39225",
"type": "normal",
"created_time": "2012-06-09T13:34:09+0000",
"updated_time": "2012-07-05T10:16:58+0000",
"can_upload": false
}
]
}

If you mean the count of items in the data array, it would just be data.length.

First of all, there 9 ids. If you want to count the number of elements in array there's a built-in property length. So that if your object is called x you retrieve the length of data by accessing x.data.length.
On the other hand, if you wanted to count the number of unique ids (IDs should by unique anyway, but if you really really wanted to) you have to manually iterate through the array and count them:
var countIds = function (arr) {
var uniqueIds = {}, num = 0;
if (!arr.data) return false;
arr.data.forEach(function (val, i) {
if (typeof uniqueIds[val.id] === "undefined") {
++num;
uniqueIds[val.id] = true;
}
});
return num;
};