I am looking to find a way to compare and combine two multidimensinal array of objects based on course values. I can make it work using the filter method for the top level, but not sure how to make sure that all levelwithskills are deeply merged. Here is an example:
var array1 = [
{
"course": "Javascript and protractor",
"description": "this is test course",
"levelwithskills": [
{
"name": "Beginner",
"skills": [
{
"duration": 45,
"name": "HTML/CSS/JS",
"price": 75
},
{
"duration": 45,
"name": "Data And Flows",
"price": 75
},
{
"duration": 45,
"name": "Functions And Objects",
"price": 75
},
{
"duration": 45,
"name": "Protractor Project",
"price": 75
}
]
},
{
"name": "Improver",
"skills": [
{
"duration": 45,
"name": "Jasmine",
"price": 90
},
{
"duration": 45,
"name": "Protractor Methods",
"price": 90
},
{
"duration": 45,
"name": "Non Angular App Testing",
"price": 90
},
{
"duration": 45,
"name": "Reports",
"price": 90
}
]
},
{
"name": "Intermediate",
"skills": [
{
"duration": 45,
"name": "Crossbrowser Config",
"price": 100
},
{
"duration": 45,
"name": "Data-Driven",
"price": 100
},
{
"duration": 45,
"name": "Gulp-Integration",
"price": 100
},
{
"duration": 45,
"name": "User Stories To Test",
"price": 100
}
]
}
],
"s3key": "javascsipt.png"
},
{
"course": "Java and BDD",
"id": "564e0758-803f-11e9-ba30-01cdbe15a808",
"levelwithskills": [
{
"name": "Beginner",
"skills": [
{
"duration": 45,
"name": "HTML/CSS/JS",
"price": 1
},
{
"duration": 45,
"name": "Data and flows",
"price": 1
},
{
"duration": 45,
"name": "OOP",
"price": 1
},
{
"duration": 45,
"name": "Libraries",
"price": 1
}
]
},
{
"name": "Improver",
"skills": [
{
"duration": 45,
"name": "Selenium Webdriver",
"price": 90
},
{
"duration": 45,
"name": "Junit",
"price": 90
},
{
"duration": 45,
"name": "Saucelabs",
"price": 90
},
{
"duration": 45,
"name": "User Stories To Test",
"price": 90
}
]
},
{
"name": "Intermediate",
"skills": [
{
"duration": 45,
"name": "Most Used Methods",
"price": 100
},
{
"duration": 45,
"name": "Git",
"price": 100
},
{
"duration": 45,
"name": "Gherkin",
"price": 100
},
{
"duration": 45,
"name": "Cucumber",
"price": 100
}
]
},
{
"name": "Semi-Advance",
"skills": [
{
"duration": 45,
"name": "Maven",
"price": 110
},
{
"duration": 45,
"name": "Cucumber Data-driven",
"price": 11000
},
{
"duration": 45,
"name": "Jenkins",
"price": 110
},
{
"duration": 45,
"name": "Pipeline",
"price": 110
}
]
},
{
"name": "Advance",
"skills": [
{
"duration": 45,
"name": "Page Object Model",
"price": 120
},
{
"duration": 45,
"name": "Advanced Methods",
"price": 120
},
{
"duration": 45,
"name": "Advanced Logic",
"price": 120
},
{
"duration": 45,
"name": "Your Own Framework",
"price": 120
}
]
},
{
"name": "Professional",
"skills": [
{
"duration": 45,
"name": "Serenit Framework p1",
"price": 130
},
{
"duration": 45,
"name": "Serenit Framework p2",
"price": 130
},
{
"duration": 45,
"name": "Serenit Framework p3",
"price": 130
},
{
"duration": 45,
"name": "Serenit Framework p4",
"price": 130
}
]
}
],
"passion": "Tester",
"s3key": "java.png",
}
];
var array2 = [
{
"course": "Javascript and protractor",
"levelwithskills": [
{
"name": "Beginner",
"skills": [
{
"name": "HTML/CSS/JS"
}
]
}
]
}
,
{
"course": "Java and BDD",
"levelwithskills": [
{
"name": "Beginner",
"skills": [
{
"name": "HTML/CSS/JS"
}
]
}
]
}
];
const sameData = array1.map(
obj =>
array2.map(obj2 => {
if (obj.course === obj2.course) {
return {
...obj,
levelwithskills: obj.levelwithskills.map(
xlvl =>
obj2.levelwithskills.map(ylvl => {
if (xlvl.name === ylvl.name) {
return {
...xlvl,
skills: xlvl.skills.map(
xskill =>
ylvl.skills.map(yskill => {
if (xskill.name === yskill.name) {
return {
...xskill,
selected: true
};
}
return xskill;
})[0]
)
};
}
return xlvl;
})[0]
)
};
}
})[0]
);
console.log(sameData);
I am looking to take something like that and merge it like:
[
{
"course": "Javascript and protractor",
"description": "this is test course",
"levelwithskills": [
{
"name": "Beginner",
"skills": [
{
"duration": 45,
"name": "HTML/CSS/JS",
"price": 75,
"selected": true
},
{
"duration": 45,
"name": "Data And Flows",
"price": 75
},
{
"duration": 45,
"name": "Functions And Objects",
"price": 75
},
{
"duration": 45,
"name": "Protractor Project",
"price": 75
}
]
},
{
"name": "Improver",
"skills": [
{
"duration": 45,
"name": "Jasmine",
"price": 90
},
{
"duration": 45,
"name": "Protractor Methods",
"price": 90
},
{
"duration": 45,
"name": "Non Angular App Testing",
"price": 90
},
{
"duration": 45,
"name": "Reports",
"price": 90
}
]
},
{
"name": "Intermediate",
"skills": [
{
"duration": 45,
"name": "Crossbrowser Config",
"price": 100
},
{
"duration": 45,
"name": "Data-Driven",
"price": 100
},
{
"duration": 45,
"name": "Gulp-Integration",
"price": 100
},
{
"duration": 45,
"name": "User Stories To Test",
"price": 100
}
]
}
],
"s3key": "javascsipt.png"
},
{
"course": "Java and BDD",
"id": "564e0758-803f-11e9-ba30-01cdbe15a808",
"levelwithskills": [
{
"name": "Beginner",
"skills": [
{
"duration": 45,
"name": "HTML/CSS/JS",
"price": 1
"selected": true
},
{
"duration": 45,
"name": "Data and flows",
"price": 1
},
{
"duration": 45,
"name": "OOP",
"price": 1
},
{
"duration": 45,
"name": "Libraries",
"price": 1
}
]
},
{
"name": "Improver",
"skills": [
{
"duration": 45,
"name": "Selenium Webdriver",
"price": 90
},
{
"duration": 45,
"name": "Junit",
"price": 90
},
{
"duration": 45,
"name": "Saucelabs",
"price": 90
},
{
"duration": 45,
"name": "User Stories To Test",
"price": 90
}
]
},
{
"name": "Intermediate",
"skills": [
{
"duration": 45,
"name": "Most Used Methods",
"price": 100
},
{
"duration": 45,
"name": "Git",
"price": 100
},
{
"duration": 45,
"name": "Gherkin",
"price": 100
},
{
"duration": 45,
"name": "Cucumber",
"price": 100
}
]
},
{
"name": "Semi-Advance",
"skills": [
{
"duration": 45,
"name": "Maven",
"price": 110
},
{
"duration": 45,
"name": "Cucumber Data-driven",
"price": 11000
},
{
"duration": 45,
"name": "Jenkins",
"price": 110
},
{
"duration": 45,
"name": "Pipeline",
"price": 110
}
]
},
{
"name": "Advance",
"skills": [
{
"duration": 45,
"name": "Page Object Model",
"price": 120
},
{
"duration": 45,
"name": "Advanced Methods",
"price": 120
},
{
"duration": 45,
"name": "Advanced Logic",
"price": 120
},
{
"duration": 45,
"name": "Your Own Framework",
"price": 120
}
]
},
{
"name": "Professional",
"skills": [
{
"duration": 45,
"name": "Serenit Framework p1",
"price": 130
},
{
"duration": 45,
"name": "Serenit Framework p2",
"price": 130
},
{
"duration": 45,
"name": "Serenit Framework p3",
"price": 130
},
{
"duration": 45,
"name": "Serenit Framework p4",
"price": 130
}
]
}
],
"passion": "Tester",
"s3key": "java.png",
}
]
Deep merge objects/arrays:
Taken from drupal - drupal_array_merge_deep_array and re-written in JS)
function array_merge_deep_array(arrays) {
let result = [];
for (let i in arrays){
for (let key in arrays[i]){
const value = arrays[i][key];
// Renumber integer keys
if (typeof(key) === 'number') {
result.push(value);
}
else if (result[key] && typeof(result[key]) === 'object' && typeof(value) === 'object') {
result[key] = array_merge_deep_array([
result[key],
value,
]);
}
else {
result[key] = value;
}
}
}
return result;
}
Related
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.
I have an array that i need to treat to extract and form a new object, this is the code i run right now:
data_proces = Object.values(selectedData.reduce((r, { Code, Description, Price}) => {
r[Description] ??= { Code, Description, Units: 0, Price: 0 , Total: 0};
r[Description].Code= Code;
r[Description].Units++;
r[Description].Price = Price ;
r[Description].Total += Price ;
return r;
}, {}));
This gives me:
[{
"Code": 0,
"Description": "No Factured Act",
"Units": 2,
"Price": 0,
"Total": 0
},
{
"Code": 1,
"Description": "Autopsy",
"Units": 1,
"Price": 44,
"Total": 44
},
{
"Code": 2,
"Description": "Simple Biopsy",
"Units": 3,
"Price": 29,
"Total": 87
},
{
"Code": 1,
"Description": "Citology",
"Units": 4,
"Price": 15,
"Total": 60
},
{
"Code": " -",
"Description": "Free Act",
"Units": 2,
"Price": 56789,
"Total": 91356
}]
And this is the result i want:
[{
"Code": 0,
"Description": "No Factured Act",
"Units": 2,
"Price": 0,
"Total": 0
},
"Code": 0,
"Description": "No Factured Act",
"Units": 1,
"Price": 0,
"Total": 0
},
{
"Code": 1,
"Description": "Autopsy",
"Units": 1,
"Price": 44,
"Total": 44
},
{
"Code": 2,
"Description": "Simple Biopsy",
"Units": 3,
"Price": 29,
"Total": 87
},
{
"Code": 1,
"Description": "Citology",
"Units": 4,
"Price": 15,
"Total": 60
},
{
"Code": " -",
"Description": "Free Act",
"Units": 1,
"Price": 34567,
"Total": 34567
},
{
"Code": " -",
"Description": "Free Act",
"Units": 1,
"Price": 56789,
"Total": 56789
}]
As you can see, i need "No Factured Act" and "Free Act" to NOT sum up their units and stay as an individual values, how can i achieve this with Reduce?.
You can simply create an array of Description properties that you don't want summed and create unique keys if the iterated description is included in the array. Here using the third index parameter of the reduce() callback.
const selectedData = [{ "Code": 0, "Description": "No Factured Act", "Price": 0, }, { "Code": 0, "Description": "No Factured Act", "Price": 0, }, { "Code": 1, "Description": "Autopsy", "Price": 44, }, { "Code": 2, "Description": "Simple Biopsy", "Price": 29, }, { "Code": 2, "Description": "Simple Biopsy", "Price": 29, }, { "Code": 2, "Description": "Simple Biopsy", "Price": 29, }, { "Code": 1, "Description": "Citology", "Price": 15, }, { "Code": 1, "Description": "Citology", "Price": 15, }, { "Code": 1, "Description": "Citology", "Price": 15, }, { "Code": 1, "Description": "Citology", "Price": 15, }, { "Code": " -", "Description": "Free Act", "Price": 34567, }, { "Code": " -", "Description": "Free Act", "Price": 56789, }];
const noSum = ['No Factured Act', 'Free Act'];
const data_process = Object.values(
selectedData.reduce((r, { Code, Description, Price }, i) => {
let key = Description;
if (noSum.includes(key)) {
key = `${key}_${i}`;
}
r[key] ??= { Code, Description, Units: 0, Price, Total: 0 };
r[key].Units++;
r[key].Total += Price;
return r;
}, {})
);
console.log(data_process);
root1
child1
child2
grandchild1
grandchild2
child3
root2
child1
child2
grandchild1
greatgrandchild1
I have an object array like tree structure like above, I want to get all unique paths in like this
Food->Dry Food Items->Local Dry Food Items
Food->Dry Food Items->Thai Dry Food Items
Food->Dry Food Items->Others
Food->Fruits
------
------
This is my object
[
{
"id": 1,
"name": "Food",
"parent_id": 0,
"children": [
{
"id": 5,
"name": "Dry Food Items",
"parent_id": 1,
"children": [
{
"id": 11,
"name": "Local Dry Food Items",
"parent_id": 5
},
{
"id": 12,
"name": "Thai Dry Food Items",
"parent_id": 5
},
{
"id": 60,
"name": "Others",
"parent_id": 5
}
]
},
{
"id": 6,
"name": "Fruits",
"parent_id": 1
},
{
"id": 7,
"name": "LG Branded",
"parent_id": 1
},
{
"id": 8,
"name": "Meat",
"parent_id": 1
},
{
"id": 9,
"name": "Sea food",
"parent_id": 1
},
{
"id": 10,
"name": "Vegetables",
"parent_id": 1,
"children": [
{
"id": 14,
"name": "Local Vegetables",
"parent_id": 10
},
{
"id": 15,
"name": "Thai Vegetables",
"parent_id": 10
}
]
},
{
"id": 38,
"name": "Frozen",
"parent_id": 1
},
{
"id": 39,
"name": "IP Kitchen",
"parent_id": 1,
"children": [
{
"id": 40,
"name": "IP Meat",
"parent_id": 39
},
{
"id": 41,
"name": "IP Starter",
"parent_id": 39
},
{
"id": 42,
"name": "IP Ingredients",
"parent_id": 39
},
{
"id": 43,
"name": "IP Sauce",
"parent_id": 39
},
{
"id": 44,
"name": "IP Seafood",
"parent_id": 39
},
{
"id": 45,
"name": "IP Starter",
"parent_id": 39
},
{
"id": 46,
"name": "IP Desert",
"parent_id": 39
}
]
}
]
},
{
"id": 2,
"name": "Beverage",
"parent_id": 0,
"children": [
{
"id": 16,
"name": "Bar",
"parent_id": 2
},
{
"id": 17,
"name": "Coffee & Tea",
"parent_id": 2
},
{
"id": 18,
"name": "In Can",
"parent_id": 2
},
{
"id": 19,
"name": "Water",
"parent_id": 2
},
{
"id": 47,
"name": "IP Bar",
"parent_id": 2
}
]
},
{
"id": 3,
"name": "Disposable",
"parent_id": 0,
"children": [
{
"id": 21,
"name": "Disposable",
"parent_id": 3
}
]
},
{
"id": 4,
"name": "SOE",
"parent_id": 0,
"children": [
{
"id": 20,
"name": "Cleaning Materials",
"parent_id": 4
},
{
"id": 22,
"name": "Chinaware",
"parent_id": 4
}
]
}
];
I get to all the nodes in the tree
function traverse(categories) {
categories.forEach(function (category) {
if (category.children && category.children.length) {
traverse(category.children);
}
else {
}
}, this);
}
You can use recursion and create a function using forEach loop.
var arr = [{"id":1,"name":"Food","parent_id":0,"children":[{"id":5,"name":"Dry Food Items","parent_id":1,"children":[{"id":11,"name":"Local Dry Food Items","parent_id":5},{"id":12,"name":"Thai Dry Food Items","parent_id":5},{"id":60,"name":"Others","parent_id":5}]},{"id":6,"name":"Fruits","parent_id":1},{"id":7,"name":"LG Branded","parent_id":1},{"id":8,"name":"Meat","parent_id":1},{"id":9,"name":"Sea food","parent_id":1},{"id":10,"name":"Vegetables","parent_id":1,"children":[{"id":14,"name":"Local Vegetables","parent_id":10},{"id":15,"name":"Thai Vegetables","parent_id":10}]},{"id":38,"name":"Frozen","parent_id":1},{"id":39,"name":"IP Kitchen","parent_id":1,"children":[{"id":40,"name":"IP Meat","parent_id":39},{"id":41,"name":"IP Starter","parent_id":39},{"id":42,"name":"IP Ingredients","parent_id":39},{"id":43,"name":"IP Sauce","parent_id":39},{"id":44,"name":"IP Seafood","parent_id":39},{"id":45,"name":"IP Starter","parent_id":39},{"id":46,"name":"IP Desert","parent_id":39}]}]},{"id":2,"name":"Beverage","parent_id":0,"children":[{"id":16,"name":"Bar","parent_id":2},{"id":17,"name":"Coffee & Tea","parent_id":2},{"id":18,"name":"In Can","parent_id":2},{"id":19,"name":"Water","parent_id":2},{"id":47,"name":"IP Bar","parent_id":2}]},{"id":3,"name":"Disposable","parent_id":0,"children":[{"id":21,"name":"Disposable","parent_id":3}]},{"id":4,"name":"SOE","parent_id":0,"children":[{"id":20,"name":"Cleaning Materials","parent_id":4},{"id":22,"name":"Chinaware","parent_id":4}]}]
function getNames(data) {
var result = [];
function loop(data, c) {
data.forEach(function (e) {
var name = !c.length ? e.name : c + '->' + e.name;
if (e.children) { loop(e.children, name); }
else {
result.push({ name: name });
}
});
}
loop(data, '');
return result;
}
console.log(getNames(arr))
I am using lodash and have this json object, the property I would like to return is a nested array ie swappableProducts:
{
"existing": {
"hasPlatinum": false,
"primaryBundle": {
"id": "2008",
"serviceId": "1",
"name": "TV - Entertainment, Sport",
"products": [
{
"name": "Entertainment",
"id": "100",
"price": 2600,
"gifted": false
},
{
"name": "Sport",
"id": "107",
"price": 2500,
"gifted": false,
"swappableProducts": [
{
"name": "Movies",
"id": "105",
"price": 2000,
"gifted": false
},
{
"name": "Games",
"id": "10",
"price": 1000,
"gifted": false
}
]
}
]
}
}
I tried to return the swappableProducts array like this:
_.get(userObject, 'existing.primaryBundle.products[1].swappableProducts');
but it won't return it. How can I do this?
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>