How to use Object.keys()? - arrays

Question

I'm usually used to play with the Object.keys() function.
But this time, I'm having trouble to read the value of the properties by their name, for each object within the following JSON :
The JSON
var myData = {
"customNotes":{
"2017/04/17":{
"concernedDate":"April, 17, 2017",
"notesList":[
{
"id":25,
"title":"Note 25 Title"
},
{
"id":51,
"title":"Note 51 Title"
}
]
},
"2017/04/14":{
"concernedDate":"April, 14, 2017",
"notesList":[
{
"id":53,
"title":"Note 53 Title"
}
]
}
}
}
The OUTPUT I Need
What I Need is the following OUTPUT :
2017/04/17
concernedDate: April, 17, 2017
Number of notes: 2
Notes list:
- id: 25
- title: Note 25 Title
- id: 51
- title: Note 51 Title
- - - - - - - -
2017/04/14
concernedDate: April, 14, 2017
Number of notes: 1
Notes list:
- id: 53
- title: Note 53 Title
My buggy JS Code
$(Object.keys(myData.customNotes)).each(function(iGroup){
//Get Key/Val of each Group of notes
var keyGroup = Object.keys(myData.customNotes)[iGroup];
var valGroup = myData.customNotes[keyGroup];
//Print Key (the date as a string)
console.log(valGroup[0]);
//Print Key Property ('concernedDate')
console.log('concernedDate: ' + valGroup[0].concernedDate);
//Print Key Property Length ('notesList')
console.log('Number of notes: ' + valGroup[0].notesList.length);
//Print List of notes
console.log('Notes list:');
//If the property exists
if(valGroup[0].notesList){
//For each item in 'notesList'
$(Object.keys(valGroup[0].notesList)).each(function(iNote){
//Get Key/Val For each note
var keyNote = Object.keys(valGroup[0].notesList)[iNote];
var valNote = valGroup[0].notesList[keyNote];
//Print the properties of each note
console.log('- id: ' + valNote.id);
console.log('- title: ' + valNote.title);
});
}
});

Answer 1

es6
Object.keys(myData.customNotes).reduce((prev, curr) => {
const date = curr;
const concernedDate = myData.customNotes[curr].concernedDate;
const numberNotes = myData.customNotes[curr].notesList.length;
const notesList = myData.customNotes[curr].notesList.map(note => `- id: ${note.id} \n - title: ${note.title} \n\n`);
return prev + `${date} \n ${concernedDate} \n Number of notes: ${numberNotes} \n Notes list: \n ${notesList} \n - - - - - - - - \n`;
}, ''));
es5
Object.keys(myData.customNotes).reduce(function (prev, curr) {
const date = curr;
const concernedDate = myData.customNotes[curr].concernedDate;
const numberNotes = myData.customNotes[curr].notesList.length;
const notesList = myData.customNotes[curr].notesList.map(function(note) { return ‘- id: ‘ + note.id + ‘\n’ + ‘- title: ‘ + note.title + ‘\n\n’;});
return prev + 'date' + '\n' + concernedDate + '\n Number of notes: ' + numberNotes + '\n Notes list: \n' + notesList + ' \n - - - - - - - - \n';
}, ''));

Answer 2

First, I want to thank #cheesenthusiast for its answer: It works like a charm, and you should definitely rely on it, wether it is in ES6 or ES5 !
In the same time, I've experimented by myself, and found another working solution, in a more "classic loopy-style" way of achieving the same result.
Another working method (more classical)
So for those of you that want to have more control at every step of the script, Here is another working way to do it :
//WORKING
console.log('---START LIST---');
//For each GROUP OF NOTES
for (var item in myData.customNotes) {
//Print GROUP OF NOTES key
console.log(item);
//Print GROUP OF NOTES properties
console.log('concernedDate: ' + myData.customNotes[item].concernedDate);
console.log('Number of notes: ' + myData.customNotes[item].notesList.length);
console.log('Notes list: ');
//For each NOTE
$(Object.keys(myData.customNotes[item].notesList)).each(function(iGroup){
//Get this Array item
var keyGroup = Object.keys(myData.customNotes[item].notesList)[iGroup];
var valGroup = myData.customNotes[item].notesList[keyGroup];
//Print NOTE properties
console.log('- id: ' + valGroup.id);
console.log('- title: ' + valGroup.title);
});
console.log('- - - - - -');
}
console.log('---END LIST---');

Answer 3

SORTING
After having added some elements to my Object, I need to sort it by KEY (the date : example 2017/04/17).
But it always returns the same items in the same order, regardless of what I try :
//Creating an Array of SORTED values (Nothing works :-/)
var tmpArr = Object.keys(myData.customNotes).sort((a, b) => a > b ? a : b);
var tmpArr = Object.keys(myData.customNotes).sort((a, b) => Date(a).valueOf() > Date(b).valueOf() ? a : b);
var tmpArr = Object.keys(myData.customNotes).sort((a, b) => a.valueOf() > b.valueOf() ? a : b);
var tmpArr = Object.keys(myData.customNotes).sort((a, b) => a-b);
//Convert back the Array to an Object
var myData.customNotes = tmpArr.reduce(function(acc, cur, i) {
acc[i] = cur;
return acc;
}, {});