Develop Reference

How to sort nested array depending on values in the inner array?

I have an array of To-Do lists with an array of tasks inside of the array. I now need to sort the array depending on the value of the inner array. I want the array to be sorted by highest priority on the important attribute first. Then remove all todos that have a dueDateTime (if it exists) that are older than today (Because Microsoft Graph API returns all tasks in a separate list of todos, and don't exclude older tasks). todos that don't have a dueDateTime should not be removed from the array. The existing values should be sorted by the dueDateTime value.
How can I achieve this in JavaScript?
This is my array with all the tasks that Microsoft Graph API returns:
let todos = [{
"#odata.context": "https://graph.microsoft.com/v1.0/$metadata#users('f7dec6a0-3f91-43e2-8a28-d6de2f238caa')/todo/lists('AQMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OAAALgAAA7JK6Wv8LyFEhk0vxTmAtLMBANEaHwdeaklLnbQ6yUS32Z0AAAIBEgAAAA%3D%3D')/tasks",
"value": [{
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbfP5Q==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "test12341241241241451",
"createdDateTime": "2021-11-10T09:20:54.6522448Z",
"lastModifiedDateTime": "2021-11-12T06:23:04.4839213Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAAAAAESAADRGh8HXmpJS520OslEt9mdAAADfurHAAA=",
"body": {
"content": "",
"contentType": "text"
},
"dueDateTime": {
"dateTime": "2021-11-12T23:00:00.0000000",
"timeZone": "UTC"
}
}, {
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbefnQ==\"",
"importance": "high",
"isReminderOn": false,
"status": "notStarted",
"title": "test 1231551515155",
"createdDateTime": "2021-11-10T09:20:51.5538432Z",
"lastModifiedDateTime": "2021-11-11T09:19:14.5876034Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAAAAAESAADRGh8HXmpJS520OslEt9mdAAADfurGAAA=",
"body": {
"content": "",
"contentType": "text"
},
"dueDateTime": {
"dateTime": "2021-11-10T23:00:00.0000000",
"timeZone": "UTC"
}
}]
}, {
"#odata.context": "https://graph.microsoft.com/v1.0/$metadata#users('f7dec6a0-3f91-43e2-8a28-d6de2f238caa')/todo/lists('AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OAAuAAAAAACySulr-C8hRIZNL8U5gLSzAQDRGh8HXmpJS520OslEt9mdAAADfg5CAAA%3D')/tasks",
"value": [{
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbeZZg==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "test test testtest test testtest test testtest test testtest test testtest test testtest test test'",
"createdDateTime": "2021-11-11T06:55:42.8810298Z",
"lastModifiedDateTime": "2021-11-11T07:05:43.9657845Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAADfg5CAADRGh8HXmpJS520OslEt9mdAAAFujyNAAA=",
"body": {
"content": "",
"contentType": "text"
}
}, {
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbeZZA==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "test test testtest test testtest test testtest test test",
"createdDateTime": "2021-11-11T06:55:40.2346649Z",
"lastModifiedDateTime": "2021-11-11T07:05:41.8202032Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAADfg5CAADRGh8HXmpJS520OslEt9mdAAAFujyMAAA=",
"body": {
"content": "",
"contentType": "text"
}
}, {
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbeflQ==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "detta är ett test",
"createdDateTime": "2021-11-11T06:55:30.6219299Z",
"lastModifiedDateTime": "2021-11-11T09:19:13.9912155Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAADfg5CAADRGh8HXmpJS520OslEt9mdAAAFujyLAAA=",
"body": {
"content": "",
"contentType": "text"
}
}, {
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbeflw==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "Testar filips lista",
"createdDateTime": "2021-11-10T09:21:52.9503933Z",
"lastModifiedDateTime": "2021-11-11T09:19:14.1395668Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAADfg5CAADRGh8HXmpJS520OslEt9mdAAADfvKlAAA=",
"body": {
"content": "",
"contentType": "text"
}
}]
}, {
"#odata.context": "https://graph.microsoft.com/v1.0/$metadata#users('f7dec6a0-3f91-43e2-8a28-d6de2f238caa')/todo/lists('AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OAAuAAAAAACySulr-C8hRIZNL8U5gLSzAQDRGh8HXmpJS520OslEt9mdAAADfg5BAAA%3D')/tasks",
"value": [{
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbefmQ==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "Detta är ett test i test",
"createdDateTime": "2021-11-10T09:21:45.376632Z",
"lastModifiedDateTime": "2021-11-11T09:19:14.2918996Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAADfg5BAADRGh8HXmpJS520OslEt9mdAAADfu66AAA=",
"body": {
"content": "",
"contentType": "text"
}
}]
}];
Update:
I tried the first answers code from #Tom and got the error:
"Uncaught TypeError: item.dueDateTime.dateTime.getTime is not a
function",
I also tried to use new Date (item.dueDateTime.dateTime) to convert it to a valid date format but it did not work..
Update 2
I tried the answers updated code and i get the error:
"Uncaught TypeError: Cannot read properties of undefined (reading 'dateTime')"
let todos = [{
"#odata.context": "https://graph.microsoft.com/v1.0/$metadata#users('f7dec6a0-3f91-43e2-8a28-d6de2f238caa')/todo/lists('AQMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OAAALgAAA7JK6Wv8LyFEhk0vxTmAtLMBANEaHwdeaklLnbQ6yUS32Z0AAAIBEgAAAA%3D%3D')/tasks",
"value": [{
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbfP5Q==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "test12341241241241451",
"createdDateTime": "2021-11-10T09:20:54.6522448Z",
"lastModifiedDateTime": "2021-11-12T06:23:04.4839213Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAAAAAESAADRGh8HXmpJS520OslEt9mdAAADfurHAAA=",
"body": {
"content": "",
"contentType": "text"
},
"dueDateTime": {
"dateTime": "2021-11-12T23:00:00.0000000",
"timeZone": "UTC"
}
}, {
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbefnQ==\"",
"importance": "high",
"isReminderOn": false,
"status": "notStarted",
"title": "test 1231551515155",
"createdDateTime": "2021-11-10T09:20:51.5538432Z",
"lastModifiedDateTime": "2021-11-11T09:19:14.5876034Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAAAAAESAADRGh8HXmpJS520OslEt9mdAAADfurGAAA=",
"body": {
"content": "",
"contentType": "text"
},
"dueDateTime": {
"dateTime": "2021-11-10T23:00:00.0000000",
"timeZone": "UTC"
}
}]
}, {
"#odata.context": "https://graph.microsoft.com/v1.0/$metadata#users('f7dec6a0-3f91-43e2-8a28-d6de2f238caa')/todo/lists('AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OAAuAAAAAACySulr-C8hRIZNL8U5gLSzAQDRGh8HXmpJS520OslEt9mdAAADfg5CAAA%3D')/tasks",
"value": [{
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbeZZg==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "test test testtest test testtest test testtest test testtest test testtest test testtest test test'",
"createdDateTime": "2021-11-11T06:55:42.8810298Z",
"lastModifiedDateTime": "2021-11-11T07:05:43.9657845Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAADfg5CAADRGh8HXmpJS520OslEt9mdAAAFujyNAAA=",
"body": {
"content": "",
"contentType": "text"
}
}, {
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbeZZA==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "test test testtest test testtest test testtest test test",
"createdDateTime": "2021-11-11T06:55:40.2346649Z",
"lastModifiedDateTime": "2021-11-11T07:05:41.8202032Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAADfg5CAADRGh8HXmpJS520OslEt9mdAAAFujyMAAA=",
"body": {
"content": "",
"contentType": "text"
}
}, {
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbeflQ==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "detta är ett test",
"createdDateTime": "2021-11-11T06:55:30.6219299Z",
"lastModifiedDateTime": "2021-11-11T09:19:13.9912155Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAADfg5CAADRGh8HXmpJS520OslEt9mdAAAFujyLAAA=",
"body": {
"content": "",
"contentType": "text"
}
}, {
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbeflw==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "Testar filips lista",
"createdDateTime": "2021-11-10T09:21:52.9503933Z",
"lastModifiedDateTime": "2021-11-11T09:19:14.1395668Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAADfg5CAADRGh8HXmpJS520OslEt9mdAAADfvKlAAA=",
"body": {
"content": "",
"contentType": "text"
}
}]
}, {
"#odata.context": "https://graph.microsoft.com/v1.0/$metadata#users('f7dec6a0-3f91-43e2-8a28-d6de2f238caa')/todo/lists('AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OAAuAAAAAACySulr-C8hRIZNL8U5gLSzAQDRGh8HXmpJS520OslEt9mdAAADfg5BAAA%3D')/tasks",
"value": [{
"#odata.etag": "W/\"0RofB15qSUudtDrJRLfZnQAABbefmQ==\"",
"importance": "normal",
"isReminderOn": false,
"status": "notStarted",
"title": "Detta är ett test i test",
"createdDateTime": "2021-11-10T09:21:45.376632Z",
"lastModifiedDateTime": "2021-11-11T09:19:14.2918996Z",
"id": "AAMkAGU0Yjc1Y2U4LWE3ODYtNGE3YS04ZjVlLTQxYjlmNDZkYWM4OABGAAAAAACySulr-C8hRIZNL8U5gLSzBwDRGh8HXmpJS520OslEt9mdAAADfg5BAADRGh8HXmpJS520OslEt9mdAAADfu66AAA=",
"body": {
"content": "",
"contentType": "text"
}
}]
}];
let newArray = [];
// flatten the array so we can use Array.sort()
todos.forEach(list => {
list.value.forEach(item => {
newArray.push(item);
})
});
// filter out anything older than 1 day
newArray = newArray.filter((item) => {
return new Date(item.dueDateTime.dateTime).getTime() + 86400000 < new Date().getTime(); // 8.64 million = 1 day
});
// sort the array
newArray = newArray.sort((a, b) => {
// convert importance to numbers so we can compare
const aScore = a.importance === 'high' ? 1 : 0;
const bScore = b.importance === 'high' ? 1 : 0;
// sorts by importance. If the importances are equal a-b is 0, so
// instead we sort by dates, putting the lowest first
return aScore - bScore || !b.dueDateTime ? 1 : !a.dueDateTime ? -1 : new Date(b.dueDateTime.dateTime).getTime() - new Date(a.dueDateTime.dateTime).getTime();
});

It will probably be easier for you to flatten your array first and then run a sort function on it.
let newArray = [];
// flatten the array so we can use Array.sort()
todos.forEach((list) => {
list.forEach((item) => {
newArray.push(item);
}
}
// filter out anything older than 1 day
newArray = newArray.filter((item) => {
return !item.dueDateTime || new Date(item.dueDateTime.dateTime).getTime() + 86400000 < new Date().getTime(); // 8.64 million = 1 day
});
// sort the array
newArray = newArray.sort((a, b) => {
// convert importance to numbers so we can compare
const aScore = a.importance === 'high' ? 1 : 0;
const bScore = b.importance === 'high' ? 1 : 0;
// sorts by importance. If the importances are equal a-b is 0, so
// instead we sort by dates, putting the lowest first
return aScore - bScore || !b.dueDateTime ? 1 : !a.dueDateTime ? -1 : new Date(b.dueDateTime.dateTime).getTime() - new Date(a.dueDateTime.dateTime).getTime();
});

How to loop through nested JSON and append in HTML DOM

I am trying to loop through a JSON and append it to HTML in a nested way. What I am trying to do is add a Header tag for the title of the object and have tags for the titles of items. Some objects might not have the items as empty too. I am guessing a nested loop is required and I've tried implementing it. The JSON looks like:
[
{
"id": 1,
"title": "Hello",
"url": "http://localhost:8000/login/notes/1/",
"description": "Hello nice",
"created_at": "2019-08-10T06:02:55.468315Z",
"created_by": "Dude",
"items": [
{
"id": 1,
"url": "http://localhost:8000/login/items/1/",
"title": "baby's toy",
"note": "http://localhost:8000/login/notes/1/"
},
{
"id": 2,
"url": "http://localhost:8000/login/items/2/",
"title": "baby's toy",
"note": "http://localhost:8000/login/notes/1/"
},
{
"id": 4,
"url": "http://localhost:8000/login/items/4/",
"title": "postman5",
"note": "http://localhost:8000/login/notes/1/"
}
]
},
{
"id": 2,
"title": "abc",
"url": "http://localhost:8000/login/notes/2/",
"description": "asad",
"created_at": "2019-08-10T15:23:53.074848Z",
"created_by": "dude2",
"items": [
{
"id": 5,
"url": "http://localhost:8000/login/items/5/",
"title": "Parrot Toy",
"note": "http://localhost:8000/login/notes/2/"
}
]
}]
I've tried
fetch('http://localhost:8000/login/notes/?format=json',{mode: 'cors'})
.then(response => response.json())
.then(data => {
var output='';
var final='';
var semif='';
var darif='';
for (var i in data) {
output+=i+'<h2>'+data[i].title +'</h2>'
for(j in data[i].items){
final+='<li>'+data[i].items[j].title+'</li>'
}
semif=output+final
}
document.getElementById('test').innerHTML=darif
});
HTML
<p id="test">
</p>
What I want to achieve is:
<h1>Hello</h1>
<h5>baby's toy</h5>
<h5>baby's toy</h5>
<h5>postman5</h5>
<h1>abc</h1>
<h5>parrot's toy</h5>

I strongly advise against doing lengthy string concatenations. Strings are immutable objects and they can put unnecessary burden on your system.
In addition, using map and join is much more elegant and easier to read.
const data = [
{
"id": 1,
"title": "Hello",
"url": "http://localhost:8000/login/notes/1/",
"description": "Hello nice",
"created_at": "2019-08-10T06:02:55.468315Z",
"created_by": "Dude",
"items": [
{
"id": 1,
"url": "http://localhost:8000/login/items/1/",
"title": "baby's toy",
"note": "http://localhost:8000/login/notes/1/"
},
{
"id": 2,
"url": "http://localhost:8000/login/items/2/",
"title": "baby's toy",
"note": "http://localhost:8000/login/notes/1/"
},
{
"id": 4,
"url": "http://localhost:8000/login/items/4/",
"title": "postman5",
"note": "http://localhost:8000/login/notes/1/"
}
]
},
{
"id": 2,
"title": "abc",
"url": "http://localhost:8000/login/notes/2/",
"description": "asad",
"created_at": "2019-08-10T15:23:53.074848Z",
"created_by": "dude2",
"items": [
{
"id": 5,
"url": "http://localhost:8000/login/items/5/",
"title": "Parrot Toy",
"note": "http://localhost:8000/login/notes/2/"
}
]
}]
const result = data.map(el => {
return `<h1>${el.title}</h1>` + el.items.map(el => `<h5>${el.title}</h5>`).join("")
}).join("")
console.log(result)

fetch('http://localhost:8000/login/notes/?format=json',{mode: 'cors'})
.then(response => response.json())
.then(data => {
var html = '';
data.forEach(listItem => {
const h1 = `<h1> ${listItem.title} </h1>`;
html+=h1;
listItem.items.forEach(item=> {
const h5 = `<h5> ${item.title} </h5>`;
html+=h5;
});
});
document.getElementById('test').innerHTML=html;
});
I think you may use it.

Converting Multidimensional JSON key-value pairs into an Angular Menu (no Angular knowledge required)

I asked this question here:
Working With Dynamic Multidimensional key-value pairs in JSON
But it's become a bit more involved and I can't get where I'm going from that answer. If I have a data object that looks like this:
{
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
How can I convert that into an Angular menu? The menu would need to list all of the services, and then if the service has an associated item in "fields" that item should be listed underneath it. So for instance "svc1" and its description should be listed on a line (got that working) but then "Product1" and "Product2" with their descriptions should appear on the next two lines because you can see that "svc1" is listed in the "services" field for "Products." Similarly, "svc4" should appear on a line, and then "Wines" and its description on the next line because "svc4" appears in the "services" field of "Wines."
I think the best way is to unpack and re-pack this JSON object in sequential order in the Angular controller and then push this data out to the Angular view but there might be a solution using only the logic available from the view. I've tried a bunch of nested fors and ifs along these lines (very much not working):
var i, j;
var listArray = [];
for (i = 0; i < $scope.svcs.length; i++) {
var littleArray = [$scope.svcs[i].status, $scope.svcs[i].name, $scope.svcs.desc];
listArray.push[littleArray1];
for (j=0; j < $scope.jFA.length; j++) {
if ($scope.jFA[j] == $scope.svcs[i].name) {
if ($scope.jFA[j] == $scope.svcs[i].fields)
littleArray = [$scope.jFA[j].fields] //...etc
}
}
...but that logic just keeps getting more and more dense and isn't working no matter now I try to use it. I liked the simplicity in the answer to the other question but have not had success in replicating it.
So if someone can help me figure out how to get the data into the right sequence using JS I can handle the Angular part. Or if you're an Angular whiz and have an answer along those lines, even better.

So it was a little hard understanding your question, but I gave it my best shot. Does this fiddle show what you are trying to achieve? http://jsfiddle.net/arknr6qz/1/
JS:
var app = angular.module('TestApp',[]);
app.controller('TestController', function($scope)
{
$scope.checkService = function(service, fieldServices)
{
if (fieldServices.indexOf(service) != -1) return true;
return false;
};
$scope.data = {
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
});
HTML:
<div ng-app="TestApp">
<div ng-controller="TestController">
<div ng-repeat="service in data.custom.services">
{{ service.name }}
<div class="indent" ng-repeat="fields in data.custom.fields">
<span ng-if="checkService(service.name, fields.services)">
{{fields.services.values}}
<span ng-repeat="value in fields.values">
{{value.name}} - {{value.desc}}<br>
</span>
</span>
</div>
</div>
</div>
</div>
and finally css:
.indent {
margin-left:10px;
}

Passing function argument to retrieve data from an object

I am have some trouble with a script I am working on. I have been provided with an object with multiple items from a product catalog.
What I am trying to do is to write a function which to which will allow me to render this data easily.
<script type="application/javascript">
SKUinfo =
{
"s238554": {
"Age": {
"Description": "Age 18+",
"Thumbnail": "/productImages/assets/img/icon18.gif"
},
"Barcode": {
"Barcode": "50622132430794"
},
"Currency": "£",
"Description": "Description goes here",
"Id": 44305,
"Packshots": [
"/productImages/238556/1min.jpg",
"/productImages/238556/2med.jpg",
"/productImages/238556/3max.jpg"
],
"Pegis": [],
"Platform": {
"Button": "Xbox 360",
"ID": 0
},
"Publisher": {
"Description": null
},
"Release": "/Date(1392940800000+0000)/",
"Screenshots": [
{
"ScreenshotMax": "/productImages/238556/5scrmax1.jpg",
"ScreenshotMin": "/productImages/238556/4scrmin1.jpg"
}
],
"Title": "Product title 2 goes here",
"Variants": [
{
"Id": 58242,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 29.97,
"PriceCultureFormat": "29.97",
"PriceWithCurrencyFormat": "£29.97",
"Sku": 238556,
"Type": {
"Description": "New"
}
},
],
"Vendor": {
"Description": ""
},
},
"s238556": {
"Age": {
"Description": "Age 18+",
"Thumbnail": "/productImages/assets/img/pegi/icon18.gif"
},
"Barcode": {
"Barcode": "5060134530794"
},
"Currency": "£",
"Description": "Description here",
"Id": 654654,
"Packshots": [
"/productImages/238556/1min.jpg",
"/productImages/238556/2med.jpg",
"/productImages/238556/3max.jpg"
],
"Pegis": [],
"Platform": {
"Button": "PlayStation 3",
"ID": 0
},
"Publisher": {
"Description": null
},
"Release": "/Date(1392940800000+0000)/",
"Screenshots": [
{
"ScreenshotMax": "/productImages/238556/5scrmax1.jpg",
"ScreenshotMin": "/productImages/238556/4scrmin1.jpg"
},
{
"ScreenshotMax": "/productImages/238556/7scrmax2.jpg",
"ScreenshotMin": "/productImages/238556/6scrmin2.jpg"
},
],
"Title": "Product title 2 goes here",
"Variants": [
{
"Id": 58242,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 29.97,
"PriceCultureFormat": "29.97",
"PriceWithCurrencyFormat": "£29.97",
"Sku": 238556,
"Type": {
"Description": "New"
}
},
],
"Vendor": {
"Description": ""
},
"VideoHTML": "html here",
"status": {
"Response": "product found",
"Success": true
}
}
}
</script>
The above example is the output I get for two products.
If I try to get access to this data this is where I have a problem
<script type="application/javascript">
function getSKU(s)
{
console.log(SKUinfo.s.Title);
}
getSKU(s238554);
</script>
I imagine this is being caused when I am passing the argument s back to the function getSKU a the node selection in the data object. In this I would expect the console output to be the Title from SKU s238554.
What I get however, is: Uncaught ReferenceError: s238554 is not defined
I would appreciate any guidance that can be offered as I am a javascript novice.

Access your property by used[] on SKUinfo.s.Title like SKUinfo[s].Title
And also pass your property name within the quotes 's238554' as it's not variable.
Something like this.
function getSKU(s){
console.log(SKUinfo[s].Title);
}
getSKU('s238554'); // s238554 within quotes.

How to display an array returned by a json object (foreach dojo)

I have a json file returned as a json object (which is an array of arrays)...below is the returned json object
{
"Info": {
"Contact": ".... ",
"title": "..."
},
"details": [
{
"ID": 1,
"Question": "User ID",
"Information": "",
}, {
"ID": 2,
"Question": "Name",
"Information": "",
}, {
"ID": 3,
"Question": "Age",
"Information": "",
}
],
"list": [
{
"No": 1,
"response": ""
}, {
"No": 2,
"response": ""
}
]
}
Now i want to display only details...the below array
"Details": [
{
"ID": 1,
"Question": "User ID",
"Information": "",
}, {
"ID": 2,
"Question": "Name",
"Information": "",
}, {
"ID": 3,
"Question": "Age",
"Information": "",
}
],
How do i do this?? please help..
Thanks in advance.

1) parse the JSON into a javascript object
var parsedJSON = JSON.parse(jsonData);
2) access the properties you want
var details = parsedJSON.details;
edit: You are parsing your javascript object back into JSON, why??
working jsfiddle

var output = "";
for(var i=0; i<json.details.length; i++) {
var detail = json.details[i];
output += detail.ID +", "+ detail.Question +", "+ detail.Information +"\n";
}
alert(output);