Showing all values of a nested json using lodashWhich “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?Can comments be used in JSON?How can I pretty-print JSON in a shell script?What is the correct JSON content type?How to replace all occurrences of a string in JavaScriptWhy does Google prepend while(1); to their JSON responses?Why can't Python parse this JSON data?How can I pretty-print JSON using JavaScript?Parse JSON in JavaScript?Differences between lodash and underscore
How does electrical safety system work on ISS?
How can I, as DM, avoid the Conga Line of Death occurring when implementing some form of flanking rule?
How would you translate "more" for use as an interface button?
A variation to the phrase "hanging over my shoulders"
Taxes on Dividends in a Roth IRA
Does the reader need to like the PoV character?
Did the UK lift the requirement for registering SIM cards?
How to get directions in deep space?
Non-trope happy ending?
Does an advisor owe his/her student anything? Will an advisor keep a PhD student only out of pity?
How could a planet have erratic days?
What's the name of the logical fallacy where a debater extends a statement far beyond the original statement to make it true?
What is the highest possible scrabble score for placing a single tile
Are Captain Marvel's powers affected by Thanos breaking the Tesseract and claiming the stone?
What are some good ways to treat frozen vegetables such that they behave like fresh vegetables when stir frying them?
The IT department bottlenecks progress, how should I handle this?
How to make money from a browser who sees 5 seconds into the future of any web page?
Permission on Database
How to draw a matrix with arrows in limited space
Why does this expression simplify as such?
How can ping know if my host is down
How to preserve electronics (computers, iPads and phones) for hundreds of years
Mimic lecturing on blackboard, facing audience
Does the Linux kernel need a file system to run?
Showing all values of a nested json using lodash
Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?Can comments be used in JSON?How can I pretty-print JSON in a shell script?What is the correct JSON content type?How to replace all occurrences of a string in JavaScriptWhy does Google prepend while(1); to their JSON responses?Why can't Python parse this JSON data?How can I pretty-print JSON using JavaScript?Parse JSON in JavaScript?Differences between lodash and underscore
3
I am trying to show all the values of the JSON i have using lodash, which ive read that it is best suited in situations like this, the json is deep as you can see and some categories are empty which made it more challenging to me, i am wondering which function is most suitable to display such unstructured and deep JSON. is it foreach or filter? and is lodash the best option here? the data will eventually be displayed in a react app, but for now i am trying to do the mapping/foreach/filter or whatever it is that can go dynamically go through all the items.
Expected output is list items nested tree.
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
javascript json ecmascript-6 foreach mapping
asked Mar 7 at 5:02
AlxLAlxL
196
|
show 2 more comments
3
I am trying to show all the values of the JSON i have using lodash, which ive read that it is best suited in situations like this, the json is deep as you can see and some categories are empty which made it more challenging to me, i am wondering which function is most suitable to display such unstructured and deep JSON. is it foreach or filter? and is lodash the best option here? the data will eventually be displayed in a react app, but for now i am trying to do the mapping/foreach/filter or whatever it is that can go dynamically go through all the items.
Expected output is list items nested tree.
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
javascript json ecmascript-6 foreach mapping
asked Mar 7 at 5:02
AlxLAlxL
196
Please tell expected output or part of it
– Maheer Ali
Mar 7 at 5:04
what is expected output?
– Harish
Mar 7 at 5:04
List items <li> @Harish
– AlxL
Mar 7 at 5:06
List items <li> @MaheerAli
– AlxL
Mar 7 at 5:07
@AlxL Do you want to display a nested tree or just everything in<li>?
– Maheer Ali
Mar 7 at 5:11
|
show 2 more comments
3
3
3
I am trying to show all the values of the JSON i have using lodash, which ive read that it is best suited in situations like this, the json is deep as you can see and some categories are empty which made it more challenging to me, i am wondering which function is most suitable to display such unstructured and deep JSON. is it foreach or filter? and is lodash the best option here? the data will eventually be displayed in a react app, but for now i am trying to do the mapping/foreach/filter or whatever it is that can go dynamically go through all the items.
Expected output is list items nested tree.
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
javascript json ecmascript-6 foreach mapping
asked Mar 7 at 5:02
AlxLAlxL
196
I am trying to show all the values of the JSON i have using lodash, which ive read that it is best suited in situations like this, the json is deep as you can see and some categories are empty which made it more challenging to me, i am wondering which function is most suitable to display such unstructured and deep JSON. is it foreach or filter? and is lodash the best option here? the data will eventually be displayed in a react app, but for now i am trying to do the mapping/foreach/filter or whatever it is that can go dynamically go through all the items.
Expected output is list items nested tree.
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
javascript json ecmascript-6 foreach mapping
javascript json ecmascript-6 foreach mapping
asked Mar 7 at 5:02
AlxLAlxL
196
asked Mar 7 at 5:02
AlxLAlxL
196
edited Mar 7 at 5:19
AlxL
asked Mar 7 at 5:02
AlxLAlxL
196
asked Mar 7 at 5:02
AlxLAlxL
196
asked Mar 7 at 5:02
AlxLAlxL
196
196
Please tell expected output or part of it
– Maheer Ali
Mar 7 at 5:04
what is expected output?
– Harish
Mar 7 at 5:04
List items <li> @Harish
– AlxL
Mar 7 at 5:06
List items <li> @MaheerAli
– AlxL
Mar 7 at 5:07
@AlxL Do you want to display a nested tree or just everything in<li>?
– Maheer Ali
Mar 7 at 5:11
|
show 2 more comments
Please tell expected output or part of it
– Maheer Ali
Mar 7 at 5:04
what is expected output?
– Harish
Mar 7 at 5:04
List items <li> @Harish
– AlxL
Mar 7 at 5:06
List items <li> @MaheerAli
– AlxL
Mar 7 at 5:07
@AlxL Do you want to display a nested tree or just everything in<li>?
– Maheer Ali
Mar 7 at 5:11
Please tell expected output or part of it
– Maheer Ali
Mar 7 at 5:04
Please tell expected output or part of it
– Maheer Ali
Mar 7 at 5:04
what is expected output?
– Harish
Mar 7 at 5:04
what is expected output?
– Harish
Mar 7 at 5:04
List items <li> @Harish
– AlxL
Mar 7 at 5:06
List items <li> @Harish
– AlxL
Mar 7 at 5:06
List items <li> @MaheerAli
– AlxL
Mar 7 at 5:07
List items <li> @MaheerAli
– AlxL
Mar 7 at 5:07
@AlxL Do you want to display a nested tree or just everything in
<li>?– Maheer Ali
Mar 7 at 5:11
@AlxL Do you want to display a nested tree or just everything in
<li>?– Maheer Ali
Mar 7 at 5:11
|
show 2 more comments
2 Answers
2
active
oldest
votes
1
Whenever you have handle the data of unknown depth you should use recursion.
let obj =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
let body = document.querySelector('body');
function print(obj)
let str = `<li>$obj.name</li>`;
if(obj.children)
str += '<ul>'
for(let c of obj.children) str += print(c)
str += '</ul>'
return str;
document.body.innerHTML = print(obj);answered Mar 7 at 5:22
Maheer AliMaheer Ali
6,836518
add a comment |
1
Here is a way without lodash.
const buildMenu = (data) =>
let ul = document.createElement('ul');
data.children.forEach(i =>
let li = document.createElement('li');
li.innerText = i.name;
li.className = i.type;
if (i.children) li.appendChild(buildMenu(i));
ul.appendChild(li);
);
return ul;
;
let data =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
;
document.body.appendChild(buildMenu(data));answered Mar 7 at 5:21
BibbertyBibberty
2,0391315
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55036413%2fshowing-all-values-of-a-nested-json-using-lodash%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Whenever you have handle the data of unknown depth you should use recursion.
let obj =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
let body = document.querySelector('body');
function print(obj)
let str = `<li>$obj.name</li>`;
if(obj.children)
str += '<ul>'
for(let c of obj.children) str += print(c)
str += '</ul>'
return str;
document.body.innerHTML = print(obj);answered Mar 7 at 5:22
Maheer AliMaheer Ali
6,836518
add a comment |
1
Whenever you have handle the data of unknown depth you should use recursion.
let obj =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
let body = document.querySelector('body');
function print(obj)
let str = `<li>$obj.name</li>`;
if(obj.children)
str += '<ul>'
for(let c of obj.children) str += print(c)
str += '</ul>'
return str;
document.body.innerHTML = print(obj);answered Mar 7 at 5:22
Maheer AliMaheer Ali
6,836518
add a comment |
1
1
1
Whenever you have handle the data of unknown depth you should use recursion.
let obj =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
let body = document.querySelector('body');
function print(obj)
let str = `<li>$obj.name</li>`;
if(obj.children)
str += '<ul>'
for(let c of obj.children) str += print(c)
str += '</ul>'
return str;
document.body.innerHTML = print(obj);answered Mar 7 at 5:22
Maheer AliMaheer Ali
6,836518
Whenever you have handle the data of unknown depth you should use recursion.
let obj =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
let body = document.querySelector('body');
function print(obj)
let str = `<li>$obj.name</li>`;
if(obj.children)
str += '<ul>'
for(let c of obj.children) str += print(c)
str += '</ul>'
return str;
document.body.innerHTML = print(obj);let obj =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
let body = document.querySelector('body');
function print(obj)
let str = `<li>$obj.name</li>`;
if(obj.children)
str += '<ul>'
for(let c of obj.children) str += print(c)
str += '</ul>'
return str;
document.body.innerHTML = print(obj);let obj =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
let body = document.querySelector('body');
function print(obj)
let str = `<li>$obj.name</li>`;
if(obj.children)
str += '<ul>'
for(let c of obj.children) str += print(c)
str += '</ul>'
return str;
document.body.innerHTML = print(obj);answered Mar 7 at 5:22
Maheer AliMaheer Ali
6,836518
edited Mar 7 at 5:29
answered Mar 7 at 5:22
Maheer AliMaheer Ali
6,836518
answered Mar 7 at 5:22
Maheer AliMaheer Ali
6,836518
answered Mar 7 at 5:22
Maheer AliMaheer Ali
6,836518
6,836518
add a comment |
add a comment |
1
Here is a way without lodash.
const buildMenu = (data) =>
let ul = document.createElement('ul');
data.children.forEach(i =>
let li = document.createElement('li');
li.innerText = i.name;
li.className = i.type;
if (i.children) li.appendChild(buildMenu(i));
ul.appendChild(li);
);
return ul;
;
let data =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
;
document.body.appendChild(buildMenu(data));answered Mar 7 at 5:21
BibbertyBibberty
2,0391315
add a comment |
1
Here is a way without lodash.
const buildMenu = (data) =>
let ul = document.createElement('ul');
data.children.forEach(i =>
let li = document.createElement('li');
li.innerText = i.name;
li.className = i.type;
if (i.children) li.appendChild(buildMenu(i));
ul.appendChild(li);
);
return ul;
;
let data =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
;
document.body.appendChild(buildMenu(data));answered Mar 7 at 5:21
BibbertyBibberty
2,0391315
add a comment |
1
1
1
Here is a way without lodash.
const buildMenu = (data) =>
let ul = document.createElement('ul');
data.children.forEach(i =>
let li = document.createElement('li');
li.innerText = i.name;
li.className = i.type;
if (i.children) li.appendChild(buildMenu(i));
ul.appendChild(li);
);
return ul;
;
let data =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
;
document.body.appendChild(buildMenu(data));answered Mar 7 at 5:21
BibbertyBibberty
2,0391315
Here is a way without lodash.
const buildMenu = (data) =>
let ul = document.createElement('ul');
data.children.forEach(i =>
let li = document.createElement('li');
li.innerText = i.name;
li.className = i.type;
if (i.children) li.appendChild(buildMenu(i));
ul.appendChild(li);
);
return ul;
;
let data =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
;
document.body.appendChild(buildMenu(data));const buildMenu = (data) =>
let ul = document.createElement('ul');
data.children.forEach(i =>
let li = document.createElement('li');
li.innerText = i.name;
li.className = i.type;
if (i.children) li.appendChild(buildMenu(i));
ul.appendChild(li);
);
return ul;
;
let data =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
;
document.body.appendChild(buildMenu(data));const buildMenu = (data) =>
let ul = document.createElement('ul');
data.children.forEach(i =>
let li = document.createElement('li');
li.innerText = i.name;
li.className = i.type;
if (i.children) li.appendChild(buildMenu(i));
ul.appendChild(li);
);
return ul;
;
let data =
"name": "Menu",
"children": [
"type": "category",
"name": "Burgers",
"children": [
"type": "item",
"name": "Burger 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Burger 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Tomato"
,
"type": "ingredient",
"name": "Pickles"
]
]
,
"type": "item",
"name": "Coming Soon Offers"
]
,
"type": "category",
"name": "Pizzas",
"children": [
"type": "item",
"name": "Pizza 1",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
,
"type": "item",
"name": "Pizza 2",
"children": [
"type": "modifier",
"name": "Promo",
"children": [
"type": "item",
"name": "Promo 1"
]
,
"type": "group",
"name": "Drinks",
"children": [
"type": "item",
"name": "Coke"
,
"type": "item",
"name": "Light Coke"
,
"type": "item",
"name": "Sprite"
,
"type": "item",
"name": "Fanta"
]
,
"type": "modifier",
"name": "Without",
"children": [
"type": "ingredient",
"name": "Onion"
,
"type": "ingredient",
"name": "Mashrooms"
,
"type": "ingredient",
"name": "Olives"
]
]
]
]
;
document.body.appendChild(buildMenu(data));answered Mar 7 at 5:21
BibbertyBibberty
2,0391315
answered Mar 7 at 5:21
BibbertyBibberty
2,0391315
answered Mar 7 at 5:21
BibbertyBibberty
2,0391315
answered Mar 7 at 5:21
BibbertyBibberty
2,0391315
2,0391315
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55036413%2fshowing-all-values-of-a-nested-json-using-lodash%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please tell expected output or part of it
– Maheer Ali
Mar 7 at 5:04
what is expected output?
– Harish
Mar 7 at 5:04
List items <li> @Harish
– AlxL
Mar 7 at 5:06
List items <li> @MaheerAli
– AlxL
Mar 7 at 5:07
@AlxL Do you want to display a nested tree or just everything in
<li>?– Maheer Ali
Mar 7 at 5:11