Attempting to restructure nested JSON data (data1) into "proper" format (data2)
with no success so far.
data1 is generated based on a given parent directory (recipes) that looks for html files.
data2 is what I'm trying to output using data1 since whatever content inside a folder is better represented as array of objects than just pure nested objects.
var data1 = {
"cake": {
"chocolate": {
"black-forest": {
"name": "Black Forest",
"path": "recipes/cake/chocolate/black-forest.html"
},
"new-shortcake": {
"milk-chocolate-shortcake": {
"name": "Milk chocolate shortcake",
"path": "recipes/cake/chocolate/shortcake/milk-chocolate-shortcake.html"
},
"dark-chocolate-shortcake": {
"name": "Dark chocolate shortcake",
"path": "recipes/cake/chocolate/shortcake/dark-chocolate-shortcake.html"
}
}
}
},
"pasta": {
"spaghetti": {
"aglio-olio": {
"name": "Spagehetti Aglio Olio",
"path": "recipes/pasta/spaghetti/aglio-olio.html"
},
"carbonara": {
"name": "Carbonara",
"path": "recipes/pasta/spaghetti/carbonara.html"
}
},
"lasagna": {
"name": "Lasagna",
"path": "recipes/pasta/lasagna.html"
}
}
}
var data2 = [
{
"name": "cake",
"children": [
{
"name": "chocolate",
"children": [
{
"name": "Black Forest",
"path": "recipes/cake/chocolate/black-forest.html"
},
{
"name": "New Shortcake",
"children": [
{
"name": "Milk chocolate shortcake",
"path": "recipes/cake/chocolate/shortcake/milk-chocolate-shortcake. html"
},
{
"name": "Dark chocolate shortcake",
"path": "recipes/cake/chocolate/shortcake/dark-chocolate-shortcake. html"
}
]
}
]
}
]
},
{
"name": "pasta",
"children": [
{
"name": "spaghetti",
"children": [
{
"name": "Spagehetti Aglio Olio",
"path": "recipes/pasta/spaghetti/aglio-olio.html"
},
{
"name": "Carbonara",
"path": "recipes/pasta/spaghetti/carbonara.html"
}
]
},
{
"name": "Lasagna",
"path": "recipes/pasta/lasagna.html"
}
]
}
]
https://codepen.io/kyooriouskoala/pen/LLLXmG
Any help much appreciated!
PS: End goal is to build a menu with the new data structure.
I hope this output is what you meant.
var final = [];
function tree(object, temp){
for(var key in object){
var folder = {};
if(object[key] !== null && typeof object[key] == 'object'){
//console.log(key);
if(_.has(object[key], "path")){
folder.name = object[key].name;
folder.path = object[key].path;
folder.children = [];
} else{
folder.name = key;
folder.children = object[key];
}
final.push(folder);
tree(object[key]);
}
}
return final;
}
This outputs your data as a associative object with values needed.
Related
I have a nested array like below. There are about 100 de objects in the array. The de objects also have deg[0] array but most likely I will only have the first index. Now the trick is that the de are subset of deg. Which means each deg can have say 10 de. How can I retrieve the deg and there associated de and map it into a new array like:
newArray = [
deg1: [
{de1},
{de2}
],
deg2: [
{de1},
{de2}
]
]
Here is my nested array. I posted four but the list is over a 100.
{
"name": "Report",
"id": "2YYUEZ6I1r9",
"dse1": [
{
"de1": {
"name": "Number",
"id": "HjMOngg3kuy",
"de1-av": [
{
"value": "FHaQMPv9zc7",
"attribute": {
"id": "uwVkIP7PZDt"
}
},
{
"value": "something",
"attribute": {
"id": "FHaQMPv9zc7"
}
}
],
"deg1": [
{
"name": "TB",
"id": "2XJB1JO9qX8"
}
]
}
},
{
"de2": {
"name": "Number of",
"id": "a3dtGETTawy",
"de2-av": [
{
"value": "FHaQMPv9zc7",
"attribute": {
"id": "uwVkIP7PZDt"
}
},
{
"value": "something",
"attribute": {
"id": "FHaQMPv9zc7"
}
}
],
"deg1": [
{
"name": "Secondary",
"id": "w99RWzXHgtw"
}
]
}
},
{
"de1": {
"name": "Number of",
"id": "a3dtGETTawy",
"de1av": [
{
"value": "FHaQMPv9zc7",
"attribute": {
"id": "uwVkIP7PZDt"
}
},
{
"value": "something",
"attribute": {
"id": "FHaQMPv9zc7"
}
}
],
"deg2": [
{
"name": "Secondary",
"id": "w99RWzXHgtw"
}
]
}
},
{
"de2": {
"name": "Number of",
"id": "a3dtGETTawy",
"de2av": [
{
"value": "FHaQMPv9zc7",
"attribute": {
"id": "uwVkIP7PZDt"
}
},
{
"value": "something",
"attribute": {
"id": "FHaQMPv9zc7"
}
}
],
"deg2": [
{
"name": "Tertiary",
"id": "w99RWzXHgtw"
}
]
}
}
]
}
Group array of objects by property (this time a property to be matched by a reg exp) using Array.reduce.
Update: Ignoring missing keys.
var input={name:"Report",id:"2YYUEZ6I1r9",dse1:[{de1:{name:"Number",id:"HjMOngg3kuy","de1-av":[{value:"FHaQMPv9zc7",attribute:{id:"uwVkIP7PZDt"}},{value:"something",attribute:{id:"FHaQMPv9zc7"}}],deg1:[{name:"TB",id:"2XJB1JO9qX8"}]}},{de2:{name:"Number of",id:"a3dtGETTawy","de2-av":[{value:"FHaQMPv9zc7",attribute:{id:"uwVkIP7PZDt"}},{value:"something",attribute:{id:"FHaQMPv9zc7"}}],deg1:[{name:"Secondary",id:"w99RWzXHgtw"}]}},{de1:{name:"Number of",id:"a3dtGETTawy",de1av:[{value:"FHaQMPv9zc7",attribute:{id:"uwVkIP7PZDt"}},{value:"something",attribute:{id:"FHaQMPv9zc7"}}],deg2:[{name:"Secondary",id:"w99RWzXHgtw"}]}},{de2:{name:"Number of",id:"a3dtGETTawy",de2av:[{value:"FHaQMPv9zc7",attribute:{id:"uwVkIP7PZDt"}},{value:"something",attribute:{id:"FHaQMPv9zc7"}}],deg2:[{name:"Tertiary",id:"w99RWzXHgtw"}]}}]}
var reg = new RegExp("^de[0-9]+$");
var reg2 = new RegExp("^deg[0-9]+$");
let obj = input['dse1'].reduce(function(agg, item) {
// do your group by logic below this line
var key = Object.keys(item).find(function(key) {
return key.match(reg) ? key : null;
})
if (key) {
var key2 = Object.keys(item[key]).find(function(key) {
return key.match(reg2) ? key : null;
})
agg[key] = agg[key] || [];
if (key2) {
var to_push = {}
to_push[key2] = item[key][key2]
agg[key].push(to_push)
}
}
// do your group by logic above this line
return agg
}, {});
console.log(obj)
.as-console-wrapper {
max-height: 100% !important;
}
I need to create a function the would return the name of the car when given the id.
I have this data:
{
"cars": [
{
"id": "661",
"name": "ford"
},
{
"id": "657",
"name": "fiat",
},
{
"id": "654",
"name": "volvo",
},
{
"id": "653",
"name": "porche",
},
{
"id": "650",
"name": "mazda",
}
]
}
So I've done this:
function getCarNameFromId(id) {
theData = {
"cars": [
{
"id": "661",
"name": "ford"
},
{
"id": "657",
"name": "fiat",
},
{
"id": "654",
"name": "volvo",
},
{
"id": "653",
"name": "porche",
},
{
"id": "650",
"name": "mazda",
}
]
};
console.log(theData.name);
}
then call it:
function getCarNameFromId('650');
How do I finish this code so I can get the code to return me the name of the id specified?
JS solution
var findCar = function(id) {
var theData = {
"cars": [{
"id": "661",
"name": "ford"
},
{
"id": "657",
"name": "fiat",
},
{
"id": "654",
"name": "volvo",
},
{
"id": "653",
"name": "porche",
},
{
"id": "650",
"name": "mazda",
}
]
};
for (var i = 0; i < theData.cars.length; i++) {
var car = theData.cars[i];
if (car.id === id)
return car.name;
}
}
console.log(findCar("654"));
If you are using any mordenr browser you can use find method to find object from array
function getCarNameFromId(id) {
......
..........
.....
var obj = theData.cars.find( function(el) {
return el.id == id
})
if(obj){
return obj.name
} else {
return ''; // or just without any value.
}
}
if still want to support old browsers i would recommand to use lodash.js or underscore.js
cars.find(car => car.id === id).name
Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
I want to build an new JSON from existing one. The source has sections and rubrics that I no longer need for a listing. The new object called 'items' should have an array of the items.
The final JSON should be sorted by attribute 'name' and look like
{
"items": [
{
"id": 10000006,
"name": "Boah"
},
{
"id": 10000013,
"name": "Gut"
},
{
"id": 10000003,
"name": "Ipsum"
},
{
"id": 10000001,
"name": "Lorem"
},
{
"id": 10000005,
"name": "Lorum"
},
{
"id": 10000004,
"name": "Name"
},
{
"id": 10000002,
"name": "Stet"
}
]
}
For building the new JSON I get this source:
{
"sections": [
{
"name": "FooBar",
"rubrics": [
{
"name": "Foo",
"items": [
{
"id": 10000001,
"name": "Lorem"
},
{
"id": 10000002,
"name": "Stet"
},
{
"id": 10000003,
"name": "Ipsum"
}
]
},
{
"name": "Bar",
"items": [
{
"id": 10000004,
"name": "Name"
},
{
"id": 10000005,
"name": "Lorum"
},
{
"id": 10000006,
"name": "Boah"
}
]
}
]
},
{
"name": "BlahBloob",
"rubrics": [
{
"name": "Bla",
"items": [
{
"id": 10000013,
"name": "Gut"
}
]
},
{
"name": "Bloob",
"items": [
{
"id": 10000014,
"name": "Name"
},
{
"id": 10000015,
"name": "Lorem"
}
]
}
]
}
]
}
What do you think? How can I do this with plain JavaScript or maybe TypeScript?
Thanks for reading and have time for my question. And thanks for reply in advance.
Here you go. You just need to iterate over each rubric of each section of your source to get the items. At the end, sort your list of items by items, and you're done.
This example uses ES6 syntax, but it's easy to convert it to ES5 if needed.
function extractItems(source) {
const items = [];
for (const section of source.sections) {
for (const rubric of section.rubrics) {
items.push(...rubric.items);
}
}
items.sort((a, b) => a.name.localeCompare(b.name));
return { items };
}
A more functional approach use map and reduce to pick the rubrics and merge them.
data.sections
.map(section => section.rubrics) // get rubrics
.reduce((a, b) => a.concat(b)) // merge rubrics
.map(rubric => rubric.items) // get items from each rubric
.reduce((a, b) => a.concat(b)) // merge items
.sort((a, b) => a.name.localeCompare(b.name)); // sort
function(oldObj) {
var newObj = {
"items": []
};
oldObj.sections.forEach(function(section) {
section.rubrics.forEach(function(rubric) {
rubric.items.forEach(function(item) {
newObj.items.push(item);
});
});
});
newObj.items = newObj.items.sort(function(a, b) {
if (a.name < b.name) { return -1; }
if (a.name > b.name) { return 1; }
return 0;
});
return newObj;
}
And simply use JSON.parse() and JSON.stringify() to convert JSON to and from objects.
It might help you
var data ={
"sections": [
{
"name": "FooBar",
"rubrics": [{"name": "Foo", "items": [{"id": 10000001,"name": "Lorem"}, {"id": 10000002,"name": "Stet"}, {"id": 10000003,"name": "Ipsum"}]
}, {
"name": "Bar",
"items": [{
"id": 10000004,
"name": "Name"
}, {
"id": 10000005,
"name": "Lorum"
}, {
"id": 10000006,
"name": "Boah"
}]
}]
}, {
"name": "BlahBloob",
"rubrics": [{
"name": "Bla",
"items": [{
"id": 10000013,
"name": "Gut"
}]
}, {
"name": "Bloob",
"items": [{
"id": 10000014,
"name": "Name"
}, {
"id": 10000015,
"name": "Lorem"
}]
}]
}]
};
var itemObj = {};
var itemArr = [];
var sections = data.sections;
for(var i=0;i<sections.length;i++)
{
for(var j=0;j<sections[i].rubrics.length;j++){
for(var k=0;k<sections[i].rubrics[j].items.length;k++){
var itemObj;
itemObj['id'] = sections[i].rubrics[j].items[k].id;
itemObj['name'] = sections[i].rubrics[j].items[k].name;
itemArr.push(itemObj);
}
}
}
var finalObj = {"items":itemArr};
console.log(finalObj);
JSFiddle
How can I produce something like this?
{
"drink": {
"2": {
"name": "coke",
"type": "drink"
},
"3": {
"name": "coke",
"type": "drink"
}
},
"food": {
"id": "1",
"name": "1 Hour Snooker",
"type": "food"
}
}
I have problem producing multiple object under 'drink' object. It got overwritten with my below code:
http://jsfiddle.net/jLgh4at5/
var json = {
"results": {
"slots": [{
"id": "3",
"name": "pepsi",
"type": "drink"
}, {
"id": "1",
"name": "1 Hour Snooker",
"type": "food"
}, {
"id": "2",
"name": "coke",
"type": "drink"
}]
}
}
var data = {
"slots": {
}
}
json.results.slots.forEach(function (b) {
if (b["type"] == "food") {
data.slots["food"] = b;
} else {
data.slots["drink"] = b;
}
});
console.log(data);
Use array index to resolve the issue.
json.results.slots.forEach(function (b,i) {
if (b["type"] == "food") {
if(data.slots["food"])
data.slots["food"][i] = {"name":b.name,"type":"food"};
else
data.slots["food"] = {};
} else {
if(data.slots["drink"])
data.slots["drink"][i] = {"name":b.name,"type":"drink"};
else
data.slots["drink"] = {};
}
});
Or you can optimize the code as shown below.
var data = {
"slots": {
"food": {},
"drink": {}
}
};
json.results.slots.forEach(function (b,i) {
if (b["type"] == "food") {
data.slots["food"][i] = {"name":b.name,"type":"food"};
} else {
data.slots["drink"][i] = {"name":b.name,"type":"drink"};;
}
});
Here is the updated JSFiddle
I have the following JSON object. Using JQuery I need to find the values of the following:
summary.nameValues.ID and detail.TypedNameValues.size
Could somebody please show how this can be achieved using JQuery?
[
{
"path": "\\Users\\john.smith\\test",
"summary": {
"NameValues": [
{
"Name": "Id",
"Values": [
"232639"
]
},
{
"Name": "City",
"Values": [
"London"
]
}
]
},
"detail": {
"String": "some data",
"Result": 0,
"TypedNameValues": [
{
"Name": "name1",
"Type": "string",
"Value": "data here!!"
},
{
"Name": "size",
"Type": "long",
"Value": "434353"
}
]
}
}
]
jQuery doesn't work on plain object literals. You can use the below function in a similar way to search all 'id's (or any other property), regardless of its depth in the object:
function getObjects(obj, key, val) {
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == 'object') {
objects = objects.concat(getObjects(obj[i], key, val));
} else if (i == key && obj[key] == val) {
objects.push(obj);
}
}
return objects;
}
Use like so:
getObjects(TestObj, 'id', 'A'); // Returns an array of matching objects
This answer taken from another thread. You may find more help here: use jQuery's find() on JSON object
Performing this kind of queries on JSON structures are trivial using DefiantJS (http://defiantjs.com). This lib extends the global object JSON with the method "search" - with which one can execute XPath expressive searches.
Check out this fiddle;
http://jsfiddle.net/hbi99/kLE2v/
The code can look like this:
var data = [
{
"path": "\\Users\\john.smith\\test",
"summary": {
"NameValues": [
{
"Name": "Id",
"Values": "232639"
},
{
"Name": "City",
"Values": "London"
}
]
},
"detail": {
"String": "some data",
"Result": 0,
"TypedNameValues": [
{
"Name": "name1",
"Type": "string",
"Value": "data here!!"
},
{
"Name": "size",
"Type": "long",
"Value": "434353"
}
]
}
}
],
res = JSON.search( data, '//*[Name="size"]' );
console.log( res[0].Value );
// 434353
Some one else as already answered, either way here is my version for the same.
<textarea id="ta" style="display:none;">[
{
"path": "\\Users\\john.smith\\test",
"summary": {
"NameValues": [
{
"Name": "Id",
"Values": [
"232639"
]
},
{
"Name": "City",
"Values": [
"London"
]
}
]
},
"detail": {
"String": "some data",
"Result": 0,
"TypedNameValues": [
{
"Name": "name1",
"Type": "string",
"Value": "data here!!"
},
{
"Name": "size",
"Type": "long",
"Value": "434353"
}
]
}
}
]</textarea>
Parser
var obj = $.parseJSON($('#ta').val());
var nameValues = obj[0].summary.NameValues;
var typedNameValues = obj[0].detail.TypedNameValues;
function getObjByName(o, name) {
for (var i = 0; i < o.length; i++) {
if (o[i].Name == name) {
return o[i];
}
}
return null;
}
alert(getObjByName(nameValues, 'Id').Values.join(", "));
alert(getObjByName(typedNameValues, 'size').Value);
A working fiddle for you on the same.
http://jsfiddle.net/3EVE4/