I have an array of objects with Name, Key in all objects and ParentKey in some of the objects.
I want to group objects by unique 'Key' excluding those which have 'ParentKey'. The objects having ParentKey should be nested as reflected in required ans.
Initial Input :-
const arr = [
{
Name: 'Manage Leads',
Key: 'Manage Leads',
},
{
Name: 'Dashboard',
Key: 'Dashboard',
},
{
Name: 'Smart Views',
Key: 'Smart Views',
},
{
Name: 'Lead Details',
Key: 'Lead Details',
},
{
Name: 'Opportunity Details',
Key: 'Opportunity Details',
},
{
Name: 'Header',
Key: 'Header',
},
{
Name: 'Settings',
Key: 'Settings',
},
{
Name: 'Test 1',
Key: 'Test1Key',
},
{
Name: 'Test 1.1',
Key: 'Test1.1Key',
ParentKey: 'Test1',
},
{
Name: 'Test 1.2',
Key: 'Test1.2Key',
ParentKey: 'Test1',
},
{
Name: 'Test 1.1.1',
Key: 'Test1.1.1Key',
ParentKey: 'Test 1.1',
},
{
Name: 'Test 1.1.2',
Key: 'Test1.1.2Key',
ParentKey: 'Test 1.1',
},
{
Name: 'Test 1.2.1',
Key: 'Test1.2.1Key',
ParentKey: 'Test 1.2',
},
];
Required Output :-
[
{
groupName: 'Manage Leads',
actionsArr: [{ Name: 'Manage Leads', Key: 'Manage Leads' }],
},
{
groupName: 'Dashboard',
actionsArr: [{ Name: 'Dashboard', Key: 'Dashboard' }],
},
{
groupName: 'Smart Views',
actionsArr: [{ Name: 'Smart Views', Key: 'Smart Views' }],
},
{
groupName: 'Lead Details',
actionsArr: [{ Name: 'Lead Details', Key: 'Lead Details' }],
},
{
groupName: 'Opportunity Details',
actionsArr: [
{
Name: 'Opportunity Details',
Key: 'Opportunity Details',
},
],
},
{
groupName: 'Header',
actionsArr: [{ Name: 'Header', Key: 'Header' }],
},
{
groupName: 'Settings',
actionsArr: [{ Name: 'Settings', Key: 'Settings' }],
},
{
groupName: 'Test1Key',
actionsArr: [
{
Name: 'Test 1',
Key: 'Test1Key',
subActions: [
{
Name: 'Test 1.1',
Key: 'Test1.1',
ParentKey: 'Test1Key',
subActions: [
{
Name: 'Test 1.1.1',
Key: 'Test1.1.1Key',
ParentKey: 'Test 1.1',
},
{
Name: 'Test 1.1.2',
Key: 'Test1.1.2Key',
ParentKey: 'Test 1.1',
},
],
},
{
Name: 'Test 1.2',
Key: 'Test1.2',
ParentKey: 'Test1Key',
subActions: [
{
Name: 'Test 1.2.1',
Key: 'Test1.2.1Key',
ParentKey: 'Test 1.2',
},
],
},
],
},
],
},
];
I was able to group by unique Key with the follwoing code but i'm not able to nest the objects which have ParentKey.
const groupNames = [...new Set(actions.map((item) => item.GroupKey))];
const actionsList = groupNames.map((groupName) => {
const actionsArr = actions.filter((act) => act.GroupKey === groupName);
return { label: groupName, value: actionsArr }});
I found some inconsistencies between Key and ParentKey for the given data.
I have fixed the inconsistencies in the input data, and I would be using the same.
Here is the solution that worked for me.
const arr = [
{
Name: "Manage Leads",
Key: "Manage Leads",
},
{
Name: "Dashboard",
Key: "Dashboard",
},
{
Name: "Smart Views",
Key: "Smart Views",
},
{
Name: "Lead Details",
Key: "Lead Details",
},
{
Name: "Opportunity Details",
Key: "Opportunity Details",
},
{
Name: "Header",
Key: "Header",
},
{
Name: "Settings",
Key: "Settings",
},
{
Name: "Test 1",
Key: "Test1Key",
},
{
Name: "Test 1.1",
Key: "Test1.1Key",
ParentKey: "Test 1",
},
{
Name: "Test 1.2",
Key: "Test1.2Key",
ParentKey: "Test 1",
},
{
Name: "Test 1.1.1",
Key: "Test1.1.1Key",
ParentKey: "Test 1.1",
},
{
Name: "Test 1.1.2",
Key: "Test1.1.2Key",
ParentKey: "Test 1.1",
},
{
Name: "Test 1.2.1",
Key: "Test1.2.1Key",
ParentKey: "Test 1.2",
},
];
//recursively look for the child and append child to parent
const appendChild = (parent, arr) => {
for (let index = 0; index < arr.length; index++) {
const childElement = arr[index];
if (childElement.ParentKey == parent.Name) {
appendChild(childElement, arr);
if (parent.subActions) {
parent.subActions.push(childElement);
} else {
parent.subActions = [childElement];
}
//remove the child from that list and match the index
arr.splice(index, 1);
index--;
}
}
};
//convert data into a parent-child hierarchy
const convert = (arr) => {
for (const parent of arr) {
appendChild(parent, arr);
}
//filter out items which has been already added as child/subActions
return arr.filter((x) => !Boolean(x.ParentKey));
};
const groupBy = (items, callback) => {
const groupedData = items.reduce(
(acc, value, index) => (
(acc[callback(value, index, items)] ||= []).push(value), acc
),
{}
);
//convert grouped data as the required output
return Object.entries(groupedData).map(([key, value]) => ({
groupName: key,
actionsArr: value,
}));
};
const data = groupBy(convert(arr), (x) => x.Name);
console.log(JSON.stringify(data, null, 2));
Output:
[
{
"groupName": "Manage Leads",
"actionsArr": [
{
"Name": "Manage Leads",
"Key": "Manage Leads"
}
]
},
{
"groupName": "Dashboard",
"actionsArr": [
{
"Name": "Dashboard",
"Key": "Dashboard"
}
]
},
{
"groupName": "Smart Views",
"actionsArr": [
{
"Name": "Smart Views",
"Key": "Smart Views"
}
]
},
{
"groupName": "Lead Details",
"actionsArr": [
{
"Name": "Lead Details",
"Key": "Lead Details"
}
]
},
{
"groupName": "Opportunity Details",
"actionsArr": [
{
"Name": "Opportunity Details",
"Key": "Opportunity Details"
}
]
},
{
"groupName": "Header",
"actionsArr": [
{
"Name": "Header",
"Key": "Header"
}
]
},
{
"groupName": "Settings",
"actionsArr": [
{
"Name": "Settings",
"Key": "Settings"
}
]
},
{
"groupName": "Test 1",
"actionsArr": [
{
"Name": "Test 1",
"Key": "Test1Key",
"subActions": [
{
"Name": "Test 1.1",
"Key": "Test1.1Key",
"ParentKey": "Test 1",
"subActions": [
{
"Name": "Test 1.1.1",
"Key": "Test1.1.1Key",
"ParentKey": "Test 1.1"
},
{
"Name": "Test 1.1.2",
"Key": "Test1.1.2Key",
"ParentKey": "Test 1.1"
}
]
},
{
"Name": "Test 1.2",
"Key": "Test1.2Key",
"ParentKey": "Test 1",
"subActions": [
{
"Name": "Test 1.2.1",
"Key": "Test1.2.1Key",
"ParentKey": "Test 1.2"
}
]
}
]
}
]
}
]
Related
I have array of objects. All Objects and its children contain permission property array. I have to gather permission property values from children assign to corresponding parent. if multi children for a parent permissions of parent should all children's Permissions.
const navItems: any[] = [
{
text: 'Analytics',
imageUrl: '../assets/images/Qi-white.png',
permissions: [],
children: [
{
text: 'Reports',
icon: 'layout',
permissions: ['rep1'],
route: 'reports/reports',
},
{
text: 'NewSelectionPanel',
icon: 'layout',
permissions: ['rep2'],
route: 'reports/reportsNew',
},
],
},
{
text: 'Static Data',
icon: 'parameters',
permissions:[],
children: [
{
text: 'Geographic Defs',
permissions:[],
maticon: 'settings',
children: [
{
text: 'Country',
maticon: 'grid_view',
permissions: ['cou'],
route: 'static-data/country',
},
{
text: 'Country Allocation',
maticon: 'grid_view',
permissions: ['cou-allo'],
route: 'static-data/group-to-country',
}
],
},
{
text: 'Node Defs',
maticon: 'settings',
permissions:[],
children: [
{
text: 'Node Category',
maticon: 'grid_view',
permissions: ['no1'],
route: 'static-data/category',
},
{
text: 'Node Class',
maticon: 'grid_view',
permissions: ['no2'],
route: 'static-data/node-class',
},
{
text: 'Node Classification',
maticon: 'grid_view',
permissions: ['no3'],
route: 'static-data/classification',
}
],
},
],
}
];
After gathering permission Is should be following structure
const navItems: any[] = [
{
text: 'Analytics',
imageUrl: '../assets/images/Qi-white.png',
permissions: ['rep1','rep2'],
children: [
{
text: 'Reports',
icon: 'layout',
permissions: ['rep1'],
route: 'reports/reports',
},
{
text: 'NewSelectionPanel',
icon: 'layout',
permissions: ['rep2'],
route: 'reports/reportsNew',
},
],
},
{
text: 'Static Data',
icon: 'parameters',
permissions:['cou-allo','cou','no1','no2','no3'],
children: [
{
text: 'Geographic Defs',
permissions:['cou-allo','cou'],
maticon: 'settings',
children: [
{
text: 'Country',
maticon: 'grid_view',
permissions: ['cou'],
route: 'static-data/country',
},
{
text: 'Country Allocation',
maticon: 'grid_view',
permissions: ['cou-allo'],
route: 'static-data/group-to-country',
}
],
},
{
text: 'Node Defs',
maticon: 'settings',
permissions:['no1','no2','no3'],
children: [
{
text: 'Node Category',
maticon: 'grid_view',
permissions: ['no1'],
route: 'static-data/category',
},
{
text: 'Node Class',
maticon: 'grid_view',
permissions: ['no2'],
route: 'static-data/node-class',
},
{
text: 'Node Classification',
maticon: 'grid_view',
permissions: ['no3'],
route: 'static-data/classification',
}
],
},
],
}
];
You apparently want to mutate your object, which is blasphemy to the Gods of Immutability, Purity and Functional Programming.
On the other hand, since you're doomed no matter what, you can at least dispense with the ritual of duplicating everything and restricting JavaScript to a litany of chained array function.
Simple loops will do the trick nicely, without all this squandering of memory and CPU.
function GatherPermissions (input)
{
function flatten_permissions (item) {
// will merge two arrays and remove duplicates
/* If permissions are unique (i.e. you won't find the same permission in two different
children) and you use that function wisely (i.e. you call it only once), then you don't
need to enforce uniqueness and a simple "a.concat(b)" will be enough */
function merge_unique (a, b) {
return a.concat(b).filter((i, p, c) => c.indexOf(i) === p);
}
let flat_permissions = item.permissions ?? [];
for (child of item.children ?? []) {
flat_permissions = merge_unique (flat_permissions, flatten_permissions(child))
}
return item.permissions = flat_permissions; // mutation occurs there (booh!)
}
for (item of input) flatten_permissions(item);
}
Sample output using your input:
GatherPermissions (navItems);
console.log(`${JSON.stringify(navItems,undefined,4)}`);
[
{
"text": "Analytics",
"imageUrl": "../assets/images/Qi-white.png",
"permissions": [
"rep1",
"rep2"
],
"children": [
{
"text": "Reports",
"icon": "layout",
"permissions": [
"rep1"
],
"route": "reports/reports"
},
{
"text": "NewSelectionPanel",
"icon": "layout",
"permissions": [
"rep2"
],
"route": "reports/reportsNew"
}
]
},
{
"text": "Static Data",
"icon": "parameters",
"permissions": [
"cou",
"cou-allo",
"no1",
"no2",
"no3"
],
"children": [
{
"text": "Geographic Defs",
"permissions": [
"cou",
"cou-allo"
],
"maticon": "settings",
"children": [
{
"text": "Country",
"maticon": "grid_view",
"permissions": [
"cou"
],
"route": "static-data/country"
},
{
"text": "Country Allocation",
"maticon": "grid_view",
"permissions": [
"cou-allo"
],
"route": "static-data/group-to-country"
}
]
},
{
"text": "Node Defs",
"maticon": "settings",
"permissions": [
"no1",
"no2",
"no3"
],
"children": [
{
"text": "Node Category",
"maticon": "grid_view",
"permissions": [
"no1"
],
"route": "static-data/category"
},
{
"text": "Node Class",
"maticon": "grid_view",
"permissions": [
"no2"
],
"route": "static-data/node-class"
},
{
"text": "Node Classification",
"maticon": "grid_view",
"permissions": [
"no3"
],
"route": "static-data/classification"
}
]
}
]
}
]
Suppose I have a Nested array of objects like below:
let a = [{
title: "A123",
book: "A",
tags: [{
key: "Romantic",
ID: 1
}, {
key: "Sad",
ID: 2
},{
key: "Strange",
ID: 3
}]
}, {
title: "B123",
book: "B",
tags: [{
key: "Parody",
ID: 1
}, {
key: "Romantic",
ID: 2
},{
key: "Happy",
ID: 3
}]
}, {
title: "C123",
book: "C",
tags: [{
key: "Dark",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}, {
title: "D123",
book: "D",
tags: [{
key: "New Life",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}]
Now I am trying to get the output of those objects which does not contain the tags as 'Romantic'.
** Expected Output:**
{
title: "C123",
book: "C",
tags: [{
key: "Dark",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}, {
title: "D123",
book: "D",
tags: [{
key: "New Life",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}
I have tried the below from my end but it is returning all the elements. Is there a way to achieve the expected output?
a.filter( (ele) => ele.tags.filter( (eachTags) => eachTags.key !== 'Romantic'))
You can use every instead of the 2nd filter:
a.filter(book => book.tags.every(tag => tag.key !== "Romantic"));
Which is saying filter the array and exclude a book where any tag is Romantic.
Example:
let a = [{
title: "A123",
book: "A",
tags: [{
key: "Romantic",
ID: 1
}, {
key: "Sad",
ID: 2
},{
key: "Strange",
ID: 3
}]
}, {
title: "B123",
book: "B",
tags: [{
key: "Parody",
ID: 1
}, {
key: "Romantic",
ID: 2
},{
key: "Happy",
ID: 3
}]
}, {
title: "C123",
book: "C",
tags: [{
key: "Dark",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}, {
title: "D123",
book: "D",
tags: [{
key: "New Life",
ID: 1
}, {
key: "Science Fiction",
ID: 2
}]
}];
let notRomantic = a.filter(book => book.tags.every(tag => tag.key !== "Romantic"));
console.log(notRomantic);
Alternatively you could use Array.prototype.some():
let a = [
{title: "A123",book: "A",tags: [{key: "Romantic",ID: 1}, {key: "Sad",ID: 2},{key: "Strange",ID: 3}]},
{title: "B123",book: "B",tags: [{key: "Parody",ID: 1}, {key: "Romantic",ID: 2},{key: "Happy",ID: 3}]},
{title: "C123",book: "C",tags: [{key: "Dark",ID: 1}, {key: "Science Fiction",ID: 2}]},
{title: "D123",book: "D",tags: [{key: "New Life",ID: 1}, {key: "Science Fiction",ID: 2}]}]
console.log(a.filter(o=>!o.tags.some(t=>t.key==="Romantic")))
you can achieve this result using filter and some
const result = a.filter((obj) => !obj.tags.some((o) => o.key === "Romantic"));
let a = [
{
title: "A123",
book: "A",
tags: [
{
key: "Romantic",
ID: 1,
},
{
key: "Sad",
ID: 2,
},
{
key: "Strange",
ID: 3,
},
],
},
{
title: "B123",
book: "B",
tags: [
{
key: "Parody",
ID: 1,
},
{
key: "Romantic",
ID: 2,
},
{
key: "Happy",
ID: 3,
},
],
},
{
title: "C123",
book: "C",
tags: [
{
key: "Dark",
ID: 1,
},
{
key: "Science Fiction",
ID: 2,
},
],
},
{
title: "D123",
book: "D",
tags: [
{
key: "New Life",
ID: 1,
},
{
key: "Science Fiction",
ID: 2,
},
],
},
];
const result = a.filter((obj) => !obj.tags.some((o) => o.key === "Romantic"));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Could you help me plese? I need to compare and calculate the percentage of the difference between the values and return an array. I need to compare arrays, get to objects with name and value, and count the percentage. Suppose for the first item in array {name: 'Name 1', value: 1945}, go into the second item to find there {name: 'Name 1', value: 699}. The percentage for 1945 will be 100, for 699 - 36. I'm confused about nesting((
//input data
const data = [
{
_id: "0090908",
groups: [
{
_id: "24424",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 1945 },
{ name: "Name 2", value: 0 },
{ name: "Name 3", value: 39 },
],
},
{
_id: "23030",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 67 },
{ name: "Name 5", value: 123 },
{ name: "Name 6", value: 13 },
],
},
]
},
{
_id: "00390395",
groups: [
{
_id: "837583",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 699 },
{ name: "Name 2", value: 55},
{ name: "Name 3", value: 39 },
],
},
{
_id: "8989305",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 998 },
{ name: "Name 5", value: 12 },
{ name: "Name 6", value: 485 },
],
},
]
}
];
//result data
const result = [
{
_id: "0090908",
groups: [
{
_id: "24424",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 1945, percent: 100, best: true },
{ name: "Name 2", value: 0, percent: 0, best: false },
{ name: "Name 3", value: 39, percent: 100, best: true },
],
},
{
_id: "23030",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 67, percent: 6, best: false },
{ name: "Name 5", value: 123, percent: 100, best: true },
{ name: "Name 6", value: 13, percent: 3, best: true },
],
},
]
},
{
_id: "00390395",
groups: [
{
_id: "837583",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 699, percent: 36, best: false },
{ name: "Name 2", value: 55, percent: 100, best: true},
{ name: "Name 3", value: 39, percent: 100, best: true },
],
},
{
_id: "8989305",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 998, percent: 100, best: true },
{ name: "Name 5", value: 12, percent: 9, best: false },
{ name: "Name 6", value: 485, percent: 100, best: true },
],
},
]
}
];
First you need to run through all elements, finding the largest values of each name. Then you run again, placing the percentages.
var best = {}; // Our database of higher values
function checkLargest(data) {
if (!data) return;
// If is iterable perform the function on each element
if (Symbol.iterator in Object(data)) for (var el of data) checkLargest(el);
if (data.name && data.value !== undefined)
if (!best[data.name] || best[data.name] < data.value)
best[data.name] = data.value;
checkLargest(data.groups); // If doesn't exist will return
checkLargest(data.items);
}
function placePercentages(data) {
if (!data) return;
if (Symbol.iterator in Object(data)) for (var el of data) placePercentages(el);
if (data.name && data.value !== undefined) {
var higher = best[data.name];
data.percent = Math.round(data.value / higher * 100);
data.best = (higher == data.value);
}
placePercentages(data.groups);
placePercentages(data.items);
}
const d = [
{
_id: "0090908",
groups: [
{
_id: "24424",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 1945 },
{ name: "Name 2", value: 0 },
{ name: "Name 3", value: 39 },
],
},
{
_id: "23030",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 67 },
{ name: "Name 5", value: 123 },
{ name: "Name 6", value: 13 },
],
},
]
},
{
_id: "00390395",
groups: [
{
_id: "837583",
name: "Group 1",
group_type: "group_1",
items: [
{ name: "Name 1", value: 699 },
{ name: "Name 2", value: 55},
{ name: "Name 3", value: 39 },
],
},
{
_id: "8989305",
name: "Group 2",
group_type: "group_2",
items: [
{ name: "Name 4", value: 998 },
{ name: "Name 5", value: 12 },
{ name: "Name 6", value: 485 },
],
},
]
}
];
checkLargest(d);
placePercentages(d);
console.log(d);
I have a object array
list Format like this
var myFormData = [
{
id: 1,
name: "first name",
type: "test",
root: "/myfolder"
},
{
id: 3,
name: "your name",
type: "test 2",
root: "/myfolder2"
}, {
id: 4,
name: "your test",
type: "test 3",
root: "/myfold",
child: [
{
id: 5,
name: "name",
type: "testf",
root: "/myfoldertr"
},
{
id: 6,
name: "first-name",
type: "test",
root: "/myfolderoot",
child: [
{
id: 8,
name: "sub first name",
type: "test5",
root: "/myfoldertest"
}, {
id: 9,
name: "first name root",
type: "test9",
root: "/myfolder",
child: [
{
id: 10,
name: "normal first name",
type: "test5",
root: "/myfoldertest"
}, {
id: 11,
name: "last first name",
type: "test5",
root: "/myfoldertest"
}
]
},
{
id: 12,
name: "name Name",
type: "testf",
root: "/myfoldertr"
}
]
},
{
id: 7,
name: "first name",
type: "test",
root: "/myfolder"
}
]
}]
This format is created with database so i cant conform that the datas are exact.Some times they have child or not.
I want to delete one object if id is equal to given id (get from programatically) Eg: i want to delete id=11.
The key point is that you have to look deep into the target array. This code snippet sample used the recursive call to deep into the nested array.
function deleteObj(target, id) {
if (!Array.isArray(target)) return;
target.forEach(function(item, index) {
if (item.child) {
target = deleteObj(item.child, id);
}
if (item.id === 11) {
target.splice(index, 1);
}
});
}
var myFormData = [{
id: 1,
name: "first name",
type: "test",
root: "/myfolder"
},
{
id: 3,
name: "your name",
type: "test 2",
root: "/myfolder2"
}, {
id: 4,
name: "your test",
type: "test 3",
root: "/myfold",
child: [{
id: 5,
name: "name",
type: "testf",
root: "/myfoldertr"
},
{
id: 6,
name: "first-name",
type: "test",
root: "/myfolderoot",
child: [{
id: 8,
name: "sub first name",
type: "test5",
root: "/myfoldertest"
}, {
id: 9,
name: "first name root",
type: "test9",
root: "/myfolder",
child: [{
id: 10,
name: "normal first name",
type: "test5",
root: "/myfoldertest"
}, {
id: 11,
name: "last first name",
type: "test5",
root: "/myfoldertest"
}]
},
{
id: 12,
name: "name Name",
type: "testf",
root: "/myfoldertr"
}
]
},
{
id: 7,
name: "first name",
type: "test",
root: "/myfolder"
}
]
}
];
function deleteObj(target, id) {
if (!Array.isArray(target)) return;
target.forEach(function(item, index) {
if (item.child) {
target = deleteObj(item.child, id);
}
if (item.id === 11) {
target.splice(index, 1);
}
});
}
deleteObj(myFormData, 11);
console.log(myFormData);
guys i have this json
var menu = [{
name: 'Computers',
children: [{
name: 'Notebook'
children: [{
name: 'Apple'
}, {
name: 'Windows'
}]
}, {
name: Tablets
children: [{
name: 'Apple'
}, {
name: 'Android'
}, {
name: 'Windows'
}]
}]
}, {
name: 'Phones',
children: [{
name: 'Android'
children: [{
name: 'Samsung'
}, {
name: 'Nokia'
}, {
name: 'Lenovo'
}]
}, {
name: 'Windows Phones'
children: [{
name: 'Microsoft'
}, {
name: 'Nokia'
}]
}]
}, {
name: 'Cameras',
children: [{
name: 'Digital'
children: [{
name: 'Nikon'
}, {
name: 'Fuji'
}]
}, {
name: 'DSLR'
children: [{
name: 'Canon'
}, {
name: 'Nikon'
}]
}]
}];
it says it is not valid json ... so how to make it valid json ??
any help would be appreciated ... thanks a lot
btw i am beginner so please help me
any suggestions ?? thanks again :)
You have some missing commas, where noted and a suposed to be a string without delimiters in your object literal.
var menu = [{
name: 'Computers',
children: [{
name: 'Notebook', // missing ,
children: [{
name: 'Apple'
}, {
name: 'Windows'
}]
}, {
name: 'Tablets', // missing string delimiter and comma
children: [{
name: 'Apple'
}, {
name: 'Android'
}, {
name: 'Windows'
}]
}]
}, {
name: 'Phones',
children: [{
name: 'Android', // missing ,
children: [{
name: 'Samsung'
}, {
name: 'Nokia'
}, {
name: 'Lenovo'
}]
}, {
name: 'Windows Phones', // missing ,
children: [{
name: 'Microsoft'
}, {
name: 'Nokia'
}]
}]
}, {
name: 'Cameras',
children: [{
name: 'Digital', // missing ,
children: [{
name: 'Nikon'
}, {
name: 'Fuji'
}]
}, {
name: 'DSLR', // missing ,
children: [{
name: 'Canon'
}, {
name: 'Nikon'
}]
}]
}];
console.log(menu);
.as-console-wrapper { max-height: 100% !important; top: 0; }
There are two problems
After name property values, comma is missing (at various places)
Tablets is not in quotes
Correct syntax would be.
var menu = [{
name: 'Computers',
children: [{
name: 'Notebook',
children: [{
name: 'Apple'
}, {
name: 'Windows'
}]
}, {
name: 'Tablets',
children: [{
name: 'Apple'
}, {
name: 'Android'
}, {
name: 'Windows'
}]
}]
}, {
name: 'Phones',
children: [{
name: 'Android',
children: [{
name: 'Samsung'
}, {
name: 'Nokia'
}, {
name: 'Lenovo'
}]
}, {
name: 'Windows Phones',
children: [{
name: 'Microsoft'
}, {
name: 'Nokia'
}]
}]
}, {
name: 'Cameras',
children: [{
name: 'Digital',
children: [{
name: 'Nikon'
}, {
name: 'Fuji'
}]
}, {
name: 'DSLR',
children: [{
name: 'Canon'
}, {
name: 'Nikon'
}]
}]
}];
You can copy your code is chrome's console to see where the error is.
you need to put double quotes on key an value like this "key" : "value"
[{
"name": "Computers",
"children": [{
"name": "Notebook",
"children": [{
"name": "Apple"
}, {
"name": "Windows"
}]
}, {
"name": "Tablets",
"children": [{
"name": "Apple"
}, {
"name": "Android"
}, {
"name": "Windows"
}]
}]
}]
And after name property values, comma is missing (at various places)
key and value should be wrapped by double quotes
copy paste the code validate here https://jsonformatter.curiousconcept.com/
[
{
"name":"Computers",
"children":[
{
"name":"Notebook",
"children":[
{
"name":"Apple"
},
{
"name":"Windows"
}
]
},
{
"name":"Tablets",
"children":[
{
"name":"Apple"
},
{
"name":"Android"
},
{
"name":"Windows"
}
]
}
]
},
{
"name":"Phones",
"children":[
{
"name":"Android",
"children":[
{
"name":"Samsung"
},
{
"name":"Nokia"
},
{
"name":"Lenovo"
}
]
},
{
"name":"Windows Phones",
"children":[
{
"name":"Microsoft"
},
{
"name":"Nokia"
}
]
}
]
},
{
"name":"Cameras",
"children":[
{
"name":"Digital",
"children":[
{
"name":"Nikon"
},
{
"name":"Fuji"
}
]
},
{
"name":"DSLR",
"children":[
{
"name":"Canon"
},
{
"name":"Nikon"
}
]
}
]
}
]