使用 lodash 显示嵌套 json 的所有值

【问题标题】：Showing all values of a nested json using lodash使用 lodash 显示嵌套 json 的所有值
【发布时间】：2019-07-28 21:41:54
【问题描述】：

我正在尝试使用 lodash 显示我拥有的 JSON 的所有值，我读到它最适合这种情况，如您所见，json 很深，有些类别是空的，这使得它更具挑战性对我来说，我想知道哪个函数最适合显示这种非结构化和深度 JSON。是foreach还是filter？ 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"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

    • 【问题讨论】：

    • 请告知预期输出或部分输出
    • 预期输出是什么？
    • 列出项目
    • @Harish
  • 列出项目
  • @MaheerAli
  • @AlxL 您想显示嵌套树还是只显示<li> 中的所有内容？

    • 标签： javascript json ecmascript-6 foreach mapping


    【解决方案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);

    【讨论】：

      【解决方案2】：

      这是一种没有 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));

      【讨论】：

        猜你喜欢
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode