Develop Reference

Recursive Function in TypeScript - Parents Array

I want to create a recursive function that receive a List of objects that contains the id and parent_id. If the parent of an element is in the list I want to remove it and add it to the parent.
Convert this:
{
"id": 180,
"children": [],
"parent_id": 195,
"name": "Object 180"
},
{
"id": 193,
"children": [],
"parent_id": 180,
"name": "Object 193"
},
{
"id": 194,
"children": [],
"parent_id": 180,
"name": "Object 194"
}
{
"id": 199,
"children": [],
"parent_id": 187,
"name": "Object 199"
}
{
"id": 304,
"children": [],
"parent_id": 193,
"name": "Object 304"
}
To this:
{
"id": 180,
"children": [
{
"id": 193,
"children": [
{
"id": 304,
"children": [],
"parent_id": 193,
"name": "Object 304"
}
],
"parent_id": 180,
"name": "Object 193"
},
{
"id": 194,
"children": [],
"parent_id": 180,
"name": "Object 194"
}
],
"parent_id": 195,
"name": "Object 180"
},
{
"id": 199,
"children": [],
"parent_id": 187,
"name": "Object 199"
}
Sometimes the parent_id is null, and there is no limit of levels of the parents.

Since basarat's answer does not account for items nested more than one level.
Here a solution that creates an output with arbitrary nesting-depth:
const listToTree = (input) => {
const map = new Map(input.map((item) => [item.id, item]));
const output = [];
for (const item of input) {
if (map.has(item.parent_id)) {
map.get(item.parent_id).children.push(map.get(item.id));
} else {
output.push(map.get(item.id));
}
}
return output;
};
const input = [
{
"id": 180,
"value": 10,
"children": [],
"parent_id": 195,
"name": "Object 180"
},
{
"id": 193,
"value": 10,
"children": [],
"parent_id": 180,
"name": "Object 193"
},
{
"id": 194,
"value": 10,
"children": [],
"parent_id": 180,
"name": "Object 194"
},
{
"id": 199,
"children": [],
"parent_id": 187,
"name": "Object 199"
},
{
"id": 304,
"value": 10,
"children": [],
"parent_id": 193,
"name": "Object 304"
},
{
"id": 305,
"value": 10,
"children": [],
"parent_id": 194,
"name": "Object 304"
}
];
const output = listToTree(input);
console.log(output);
Edit: Aggregate values
If you want to aggregate values along ancestry chains of the resulting tree I would recommend to do this in a separate function afterwards. This will keep your code cleaner, easier to test and more readable.
The implementation depends on whether or not your input-array is sorted (children before parents). If you want to process unordered inputs you have to loop through the each ancestry chain.
function aggregateValue(branch) {
const children = branch.children || [];
return children.reduce((sum, child) => sum + aggregateValue(child), branch.value || 0);
}
function aggregateValueAlongBranches(tree) {
return tree.map((branch) => {
return {
...branch,
aggregatedValue: aggregateValue(branch),
children: aggregateValueAlongBranches(branch.children),
};
});
}
const input = [
{
"id": 180,
"value": 10,
"children": [
{
"id": 193,
"value": 10,
"children": [
{
"id": 304,
"value": 10,
"children": [],
"parent_id": 193,
"name": "Object 304"
}
],
"parent_id": 180,
"name": "Object 193"
},
{
"id": 194,
"value": 10,
"children": [
{
"id": 305,
"value": 10,
"children": [],
"parent_id": 194,
"name": "Object 304"
}
],
"parent_id": 180,
"name": "Object 194"
}
],
"parent_id": 195,
"name": "Object 180"
},
{
"id": 199,
"children": [],
"parent_id": 187,
"name": "Object 199"
}
];
const output = aggregateValueAlongBranches(input);
console.log(output);

You don't need a recursive function. Just track items you've already seen and if parent exists in it add to parent.children or add a new root node.
An example complete solution is attached.
Complete code
type Item = {
id: number,
children: Item[],
parent_id: number,
name: string,
}
const items: Item[] = [
{
"id": 180,
"children": [],
"parent_id": 195,
"name": "Object 180"
},
{
"id": 193,
"children": [],
"parent_id": 180,
"name": "Object 193"
},
{
"id": 194,
"children": [],
"parent_id": 180,
"name": "Object 194"
},
{
"id": 199,
"children": [],
"parent_id": 187,
"name": "Object 199"
},
{
"id": 304,
"children": [],
"parent_id": 193,
"name": "Object 304"
}
];
function nest(items:Item[]): Item[] {
const output: Item[] = [];
const idToItem = new Map<number,Item>();
for (let item of items) {
// Either add to parent. Or create a new root level node
if (idToItem.has(item.parent_id)) {
idToItem.get(item.parent_id)!.children.push(item);
} else {
idToItem.set(item.id, item);
output.push(item);
}
}
return output;
}
console.log(nest(items));

Merging Object In Array In JavaScript if Conditions Are Met [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I need help in merging the values of the objects in an array if the id is the same as the warehouse_item_id. In my case, there is a two objects which should be merge id: 191 and id: 52, because id 52 has warehouse_item_id of 191.
Please see the response and the code below.
CODE
const yeah = yes.filter(a => a.id === a.warehouse_item_id);
JSON Response
yes = [
{
"id": 191,
"warehouse_id": 24,
"ingredient_id": 65,
"expiration_date": "2019-07-31",
"available_stocks": 7,
"ingredient": {
"id": 65,
"name": "erg",
"SKU": "1000064",
"default_unit": {
"id": 26,
"name": "Milliliter"
},
"purchase_price": 50
}
},
{
"id": 192,
"warehouse_id": 24,
"ingredient_id": 66,
"expiration_date": "2019-09-18",
"available_stocks": 33994,
"ingredient": {
"id": 66,
"name": "gvf",
"SKU": "1000065",
"default_unit": {
"id": 27,
"name": "Gram"
},
"purchase_price": 60
}
},
{
"id": 193,
"warehouse_id": 24,
"ingredient_id": 67,
"expiration_date": "2019-09-19",
"available_stocks": 43996,
"ingredient": {
"id": 67,
"name": "fwefe",
"SKU": "1000066",
"default_unit": {
"id": 26,
"name": "Milliliter"
},
"purchase_price": 70
}
},
{
"id": 52,
"outlet_item_id": null,
"warehouse_item_id": 191,
"ingredient_id": 65,
"quantity": 7,
"total_in_lowest": 0,
"stock_on_hand": 0,
"adjustment_price": 0,
"soh_total_in_lowest": 0,
"unit_price": 50,
"difference": 0,
"difference_in_lowest": 0
}
]
EXPECTED OUTPUT
[
{
"id": 191,
"warehouse_id": 24,
"ingredient_id": 65,
"expiration_date": "2019-07-31",
"available_stocks": 7,
"ingredient": {
"id": 65,
"name": "erg",
"SKU": "1000064",
"default_unit": {
"id": 26,
"name": "Milliliter"
},
"purchase_price": 50,
"quantity": 7,
"total_in_lowest": 0,
"stock_on_hand": 0,
"adjustment_price": 0,
"soh_total_in_lowest": 0,
"unit_price": 50,
"difference": 0,
"difference_in_lowest": 0
},
{
"id": 192,
"warehouse_id": 24,
"ingredient_id": 66,
"expiration_date": "2019-09-18",
"available_stocks": 33994,
"ingredient": {
"id": 66,
"name": "gvf",
"SKU": "1000065",
"default_unit": {
"id": 27,
"name": "Gram"
},
"purchase_price": 60
}
},
{
"id": 193,
"warehouse_id": 24,
"ingredient_id": 67,
"expiration_date": "2019-09-19",
"available_stocks": 43996,
"ingredient": {
"id": 67,
"name": "fwefe",
"SKU": "1000066",
"default_unit": {
"id": 26,
"name": "Milliliter"
},
"purchase_price": 70
}
},
{
"id": 52,
"outlet_item_id": null,
"warehouse_item_id": 191,
"ingredient_id": 65,
"quantity": 7,
"total_in_lowest": 0,
"stock_on_hand": 0,
"adjustment_price": 0,
"soh_total_in_lowest": 0,
"unit_price": 50,
"difference": 0,
"difference_in_lowest": 0
}
]
> EXPECTED OUTPUT
yes = [
{
"id": 191,
"warehouse_id": 24,
"ingredient_id": 65,
"expiration_date": "2019-07-31",
"available_stocks": 7,
"ingredient": {
"id": 65,
"name": "erg",
"SKU": "1000064",
"default_unit": {
"id": 26,
"name": "Milliliter"
},
"purchase_price": 50
}
},
{
"id": 192,
"warehouse_id": 24,
"ingredient_id": 66,
"expiration_date": "2019-09-18",
"available_stocks": 33994,
"ingredient": {
"id": 66,
"name": "gvf",
"SKU": "1000065",
"default_unit": {
"id": 27,
"name": "Gram"
},
"purchase_price": 60
}
},
{
"id": 193,
"warehouse_id": 24,
"ingredient_id": 67,
"expiration_date": "2019-09-19",
"available_stocks": 43996,
"ingredient": {
"id": 67,
"name": "fwefe",
"SKU": "1000066",
"default_unit": {
"id": 26,
"name": "Milliliter"
},
"purchase_price": 70
}
}
]

Here is the steps which you need to follow.
Create a new array for merged objects
Iterate the array
Find the item which you're looking for
merge with the existing object to the filtered object
append to new object
done.
let json = [{"id":191,"warehouse_id":24,"ingredient_id":65,"expiration_date":"2019-07-31","available_stocks":7,"ingredient":{"id":65,"name":"erg","SKU":"1000064","default_unit":{"id":26,"name":"Milliliter"},"purchase_price":50}},{"id":192,"warehouse_id":24,"ingredient_id":66,"expiration_date":"2019-09-18","available_stocks":33994,"ingredient":{"id":66,"name":"gvf","SKU":"1000065","default_unit":{"id":27,"name":"Gram"},"purchase_price":60}},{"id":193,"warehouse_id":24,"ingredient_id":67,"expiration_date":"2019-09-19","available_stocks":43996,"ingredient":{"id":67,"name":"fwefe","SKU":"1000066","default_unit":{"id":26,"name":"Milliliter"},"purchase_price":70}},{"id":52,"outlet_item_id":null,"warehouse_item_id":191,"ingredient_id":65,"quantity":7,"total_in_lowest":0,"stock_on_hand":0,"adjustment_price":0,"soh_total_in_lowest":0,"unit_price":50,"difference":0,"difference_in_lowest":0}];
// new array after merging the objects
let desiredArray = [];
// iterate the array
let processedWarehouseItems = [];
for (let i = 0; i < json.length; i++) {
let newObj = json[i]; // assign the each object if no filtered found in case
// find the object based on your filter condition
let fiteredObj = json.filter(
e => e.id != json[i].id && e.warehouse_item_id === json[i].id
);
if (fiteredObj && fiteredObj.length) {
// if object found
processedWarehouseItems.push(fiteredObj[0].warehouse_item_id);
newObj = { ...json[i], ...fiteredObj[0]
}; // merge the objects and creates a new one
}
// check if the item is already merged in?
if (processedWarehouseItems.indexOf(json[i].warehouse_item_id) === -1) {
desiredArray.push(newObj); // push to the new array
}
}
console.log(desiredArray)

How to combine and select JSON calls?

How to combine 2 json and appear together? If I choose one that has childern (like click MEN button), then childern in MEN will appear. But if element don't have childern, then the click function is not active.
And if I click the back button, it will bring up the previous menu.
So, the first time, I want to bring up
MEN
WOMEN
KIDS
Customer Care
Contact
And if I click the "MEN" button, will appear
back
accesoris
cloting
shoes
If I click the "back" button, it will return 1 step earlier. Not returning, like the first time.
You can see, This is my imagination to combine 2 json. I don't know how to combine 2 json. Maybe like this
$.each(first, second, function(i, value) {
var first = [{
"id": 1,
"text": "MEN",
"children": [{
"id": 10,
"text": "back"
},
{
"id": 11,
"text": "accesoris",
"children": [{
"id": 110,
"text": "back"
},
{
"id": 111,
"text": "hat",
},
{
"id": 112,
"text": "belt",
}
]
},
{
"id": 12,
"text": "cloting",
"children": [{
"id": 120,
"text": "back"
},
{
"id": 121,
"text": "blazer",
},
{
"id": 122,
"text": "pants",
}
]
},
{
"id": 13,
"text": "shoes",
"children": [{
"id": 130,
"text": "back"
},
{
"id": 131,
"text": "oxford",
},
{
"id": 132,
"text": "chukka",
}
]
}
]
},
{
"id": 2,
"text": "WOMEN",
"children": [{
"id": 20,
"text": "back"
},
{
"id": 21,
"text": "accesoris",
"children": [{
"id": 210,
"text": "back"
},
{
"id": 211,
"text": "ring",
},
{
"id": 212,
"text": "glove",
}
]
},
{
"id": 22,
"text": "cloting",
"children": [{
"id": 220,
"text": "back"
},
{
"id": 221,
"text": "tshirt",
},
{
"id": 222,
"text": "dress",
}
]
},
{
"id": 23,
"text": "shoes",
"children": [{
"id": 230,
"text": "back"
},
{
"id": 231,
"text": "sandals",
},
{
"id": 232,
"text": "heels",
}
]
}
]
},
{
"id": 3,
"text": "KIDS"
}
]
var second = [{
"id": 1,
"text": "Customer Care",
"children": [{
"id": 10,
"text": "back"
},
{
"id": 11,
"text": "Product Information"
},
{
"id": 12,
"text": "Payment Information"
},
{
"id": 13,
"text": "Your Order"
}]
},
{
"id": 2,
"text": "Contact",
"children": [{
"id": 20,
"text": "back"
},
{
"id": 21,
"text": "Careers"
},
{
"id": 22,
"text": "Affiliates"
}]
}
]
// Appears the first time
var text = [];
$.each(first, function(i, value) {
text += '<a>' + value.text + '</a><br>';
$('.result').html(text);
});
// Im not sure its correct, because im using first and second together
// var text = [];
// $.each(first, second, function(i, value) {
// text[i] += '<a>' + value.text + '</a><br>';
// $('.result').html(text[i]);
// });
// Function if a button is pressed
$(document).click('a', function(e) {
if ($(this).text() == 'back') {
// Go back one step, not back to the beginning
} else {
// function text() ----> $('.result').html(text);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="result"></div>

If you want to combine two arrays together you can just use concat.
var fullList = first.concat(second);

ok so this a jQuery version
var
first = [
{ "id": 1, "text": "MEN", "children": [
{ "id": 10, "text": "back" },
{ "id": 11, "text": "accesoris", "children": [
{ "id": 110, "text": "back" },
{ "id": 111, "text": "hat" },
{ "id": 112, "text": "belt" }
]},
{ "id": 12, "text": "cloting", "children": [
{ "id": 120, "text": "back" },
{ "id": 121, "text": "blazer" },
{ "id": 122, "text": "pants" }
]},
{ "id": 13, "text": "shoes", "children": [
{ "id": 130, "text": "back" },
{ "id": 131, "text": "oxford" },
{ "id": 132, "text": "chukka" }
]}
]},
{ "id": 2, "text": "WOMEN", "children": [
{ "id": 20, "text": "back" },
{ "id": 21, "text": "accesoris", "children": [
{ "id": 210, "text": "back" },
{ "id": 211, "text": "ring" },
{ "id": 212, "text": "glove" }
]},
{ "id": 22, "text": "cloting", "children": [
{ "id": 220, "text": "back" },
{ "id": 221, "text": "tshirt" },
{ "id": 222, "text": "dress" }
]},
{ "id": 23, "text": "shoes", "children": [
{ "id": 230, "text": "back" },
{ "id": 231, "text": "sandals" },
{ "id": 232, "text": "heels" }
]}
]},
{ "id": 3, "text": "KIDS" }
]
,
second = [
{ "id": 1, "text": "Customer Care", "children": [
{ "id": 10, "text": "back" },
{ "id": 11, "text": "Product Information" },
{ "id": 12, "text": "Payment Information" },
{ "id": 13, "text": "Your Order" }
]},
{ "id": 2, "text": "Contact", "children": [
{ "id": 20, "text": "back" },
{ "id": 21, "text": "Careers" },
{ "id": 22, "text": "Affiliates" }
]}
];
;
const
fullList = first.concat(second) ,
$myList = $('#my-List') ;
var
List_Level = [] ,
current_List = fullList ;
function ShowList_F()
{
let xList = fullList;
for (let x=0, xMax=List_Level.length; x<xMax; x++)
{
xList = xList[ List_Level[x] ].children;
}
$myList.empty()
current_List = xList;
for (let i=0, iMax=xList.length; i<iMax; i++)
{
let aClass = 'levelentry' + (xList[i].hasOwnProperty('children')?' PLUS':''); // other possibility
$myList.append( `<li class="root-level"><a class="${aClass}" data-ref="${i}">${xList[i].text}</a></li>`);
}
}
ShowList_F(); // first attempt
$myList.on( "click", "a", function(e)
{
e.preventDefault();
let xItem = parseInt( $(this).data('ref') );
if ($(this).text()==='back') // level Up
{
List_Level.pop()
ShowList_F();
}
else if (current_List[xItem].hasOwnProperty('children')) // level Down (and same test)
{
List_Level.push(xItem);
ShowList_F();
}
})
#my-List { cursor: pointer; list-style-type:none }
.PLUS::before { content: '- '}
.PLUS:hover::before { content: '+'}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="my-List"></ul>

so it's a complete solution, unfortunately I lost the habit of coding jQuery, so it's an ES6 solution (which I find really less complicated)
var
first = [
{ "id": 1, "text": "MEN", "children": [
{ "id": 10, "text": "back" },
{ "id": 11, "text": "accesoris", "children": [
{ "id": 110, "text": "back" },
{ "id": 111, "text": "hat" },
{ "id": 112, "text": "belt" }
]},
{ "id": 12, "text": "cloting", "children": [
{ "id": 120, "text": "back" },
{ "id": 121, "text": "blazer" },
{ "id": 122, "text": "pants" }
]},
{ "id": 13, "text": "shoes", "children": [
{ "id": 130, "text": "back" },
{ "id": 131, "text": "oxford" },
{ "id": 132, "text": "chukka" }
]}
]},
{ "id": 2, "text": "WOMEN", "children": [
{ "id": 20, "text": "back" },
{ "id": 21, "text": "accesoris", "children": [
{ "id": 210, "text": "back" },
{ "id": 211, "text": "ring" },
{ "id": 212, "text": "glove" }
]},
{ "id": 22, "text": "cloting", "children": [
{ "id": 220, "text": "back" },
{ "id": 221, "text": "tshirt" },
{ "id": 222, "text": "dress" }
]},
{ "id": 23, "text": "shoes", "children": [
{ "id": 230, "text": "back" },
{ "id": 231, "text": "sandals" },
{ "id": 232, "text": "heels" }
]}
]},
{ "id": 3, "text": "KIDS" }
]
,
second = [
{ "id": 1, "text": "Customer Care", "children": [
{ "id": 10, "text": "back" },
{ "id": 11, "text": "Product Information" },
{ "id": 12, "text": "Payment Information" },
{ "id": 13, "text": "Your Order" }
]},
{ "id": 2, "text": "Contact", "children": [
{ "id": 20, "text": "back" },
{ "id": 21, "text": "Careers" },
{ "id": 22, "text": "Affiliates" }
]}
];
;
const
fullList = first.concat(second)
,
myList = document.querySelector('#my-List')
,
Messager = {
_zone : document.getElementById('MsgZone'),
Text(msg) {
this._zone.textContent = msg;
setTimeout(that=>that._zone.textContent='', 900, this);
}
};
var
List_Level = [],
current_List = fullList,
LI_elm = document.createElement('li');
function ShowList_F()
{
let
xList = fullList,
showingTxt = '';
List_Level.forEach( x=>{
showingTxt += ` / ${xList[x].text}`
xList=xList[x].children
})
while( myList.firstChild )
{ myList.removeChild( myList.firstChild ); }
current_List = xList;
xList.forEach((e,i)=>{
let xLI = myList.appendChild(LI_elm.cloneNode(false));
xLI.dataset.ref = i.toString();
xLI.textContent = e.text;
if (e.text==='back') { xLI.className='back' }
})
Messager.Text(showingTxt)
}
ShowList_F(); // first attempt
myList.onclick = function(e)
{
if (!e.target.matches('li')) return;
e.stopPropagation();
let xItem = parseInt(e.target.dataset.ref);
if (e.target.textContent==='back')
{
List_Level.pop()
ShowList_F();
}
else if ( 'children' in current_List[ xItem ])
{
List_Level.push(xItem);
ShowList_F();
}
else
{
Messager.Text('nothing to do with this click')
}
}
#my-List { cursor: pointer; list-style-type:square }
#MsgZone, .back { font-size: 0.8em; font-style: italic }
<ul id="my-List"></ul>
<div id="MsgZone"></div>

Javascript recursive function for converting JSON structure

I have a JSON object and I need to convert it into another JSON structure, using Javascript function.
My input JSON is:
{
"id": 116,
"name": "flow",
"op_start": 9,
"op_start_type": "web_hook",
"style": {
"x": 41,
"y": 35,
"width": 250,
"height": 250
},
"modules": {
"web_hook": {
"8": {
"id": 8,
"request_body": "auth",
"name": "nameew",
"op_success": null,
"op_failure": null,
"op_success_type": null,
"op_failure_type": null,
"style": {
"x": 628,
"y": 70,
"width": 250,
"height": 250
}
},
"9": {
"id": 9,
"request_body": "auth",
"name": "testontest",
"op_success": 1,
"op_failure": null,
"op_success_type": "ring",
"op_failure_type": null,
"style": {
"x": 438,
"y": 140,
"width": 250,
"height": 250
}
}
},
"ring": {
"1": {
"id": 1,
"request_body": "auth",
"name": "testontest",
"op_success": null,
"op_failure": null,
"op_success_type": null,
"op_failure_type": null,
"style": {
"x": 438,
"y": 140,
"width": 250,
"height": 250
}
}
}
}
}
and the desired output is:
{
"nodes": [
{
"name": "flow",
"id": 116,
"x": 41,
"y": 35,
"width": 250,
"inputConnectors": [],
"outputConnectors": [
{
"name": "op_start"
}
]
},
{
"name": "web_hook",
"id": 8,
"x": 628,
"y": 70,
"inputConnectors": [
{
"name": "iA"
}
],
"outputConnectors": [
{
"name": "op_success"
},
{
"name": "op_failure"
}
],
"width": 250
},
{
"name": "ring",
"id": 9,
"x": 438,
"y": 140,
"inputConnectors": [
{
"name": "iA"
}
],
"outputConnectors": [
{
"name": "op_success"
}
],
"width": 250
}
],
"connections": [
{
"source": {
"nodeID": 116,
"connectorIndex": 0
},
"dest": {
"nodeID": 8,
"connectorIndex": 0
}
},
{
"source": {
"nodeID": 8,
"connectorIndex": 0
},
"dest": {
"nodeID": 9,
"connectorIndex": 0
}
}
]
}
Here as we can see in output JSON the first node flow will be fixed.
I have tried it something like this:
var resData = response.data; // input json is inside response.data
// Creating first fixed node
var newDefinition = {
"nodes": [
{
"name": "flow",
"id": resData.id,
"x": resData.x,
"y": resData.y,
"width": resData.width,
"inputConnectors": [],
"outputConnectors": [
{
"name": "op_start"
}
]
}
],
"connections": []
};
// Getting the first connected node
var nextType = resData.op_start_type;
var nextId = resData.op_start;
var next = resData.modules[nextType][nextId];
newDefinition.nodes.push({
"name": next.name,
"id": next.id,
"x": next.style.x,
"y": next.style.y,
"width": next.style.width,
"inputConnectors": [
{
name: ''
}
],
"outputConnectors": [
{
"name": "op_start"
}
]
});
Till here everything is fine but now I am confused how I can add the node recursively, and I also need to add connections.
Thanks.
EDIT
Here is the output generated by output JSON

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>