Отображение всех значений вложенного json с использованием lodash

Question

Я пытаюсь показать все значения JSON, которые у меня есть, используя lodash, который я прочитал, что он лучше всего подходит в таких ситуациях, как json, как вы можете видеть, глубоко, а некоторые категории пусты, что делает его более сложныммне интересно, какая функция наиболее подходит для отображения такого неструктурированного и глубокого JSON.это foreach или фильтр?и lodash лучший вариант здесь?в конечном итоге данные будут отображаться в приложении реакции, но сейчас я пытаюсь выполнить сопоставление / foreach / фильтр или что-то еще, что может динамически проходить через все элементы.

Ожидаемый результат - элементы спискавложенное дерево.

{

  "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"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Answer 1

Всякий раз, когда вы обрабатываете данные неизвестной глубины, вы должны использовать рекурсию.

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);

Answer 2

Вот путь без лодаш.

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));