Javascript：打印 JSON 树中的所有路径，包括数组

Posted 2023-02-23

【中文标题】Javascript：打印 JSON 树中的所有路径，包括数组

【英文标题】：Javascript: Print all paths in a JSON tree including arrays

【发布时间】：2019-05-05 08:28:04

【问题描述】：

示例 JSON：

  name: "A",
  childNodes: [
    name: "B",
    childProps: [
      prop_list: [
        name: "BS1"
      , 
        name: "BS2"
      ]
    ],
    childNodes: [
      name: "C",
      childProps: [
        prop_list: [
          name: "CS1"
        , 
          name: "CS2"
        ]
      ],

    ]


  ],
  childProps: [
    prop_list: [
      name: "AS1"
    , 
      name: "AS2"
    ]
  ]

我想以下列方式打印输出。

    A, B, BS1
    A, B, BS2
    A, B, C, CS1
    A, B, C, CS2
    A, AS1
    A, AS2

基本上，我想打印每个叶节点的路径。 （而且我需要获取每个对象的 name 属性值）

【问题讨论】：

javascript flattening an array of arrays of objects的可能重复

不清楚你不包括A的childProps（CS1和AS2）。

另见developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

我已经更正了。 AS1 和 AS2 在 A 的 childProps 属性中

@Lizzzz90 您首先必须将其展平为数组；然后.join(', ') 到字符串...遍历结构，同时构建字符串也可以。

【参考方案1】：

要解决您的问题，您必须遍历对象中的每个项目并使用递归函数将嵌套名称附加到路径字符串。

这是一个让您入门的示例

var obj = 
  name: "A",
  childNodes: [
    name: "B",
    childProps: [
      prop_list: [
        name: "BS1"
      , 
        name: "BS2"
      ]
    ],
    childNodes: [
      name: "C",
      childProps: [
        prop_list: [
          name: "CS1"
        , 
          name: "CS2"
        ]
      ],

    ]


  ],
  childProps: [
    prop_list: [
      name: "AS1"
    , 
      name: "AS2"
    ]
  ]
;

(function findName(o, path = '') 
  const isLastLevel = !o.childProps && !o.childNodes;
  path += isLastLevel ? o.name : o.name + ', ';

  if (o.childProps) 
    o.childProps.forEach(props => 
      props.prop_list.forEach(prop => 
        findName(prop, path);
      );
    );
  

  if (o.childNodes) 
    o.childNodes.forEach(node => 
      findName(node, path);
    );
  

  if (isLastLevel) 
    console.log(path);
  
)(obj);

【讨论】：

非常感谢！正是我想要的。

这就是我所说的遍历。

【参考方案2】：

也许您可以采用更通用的方法来使用 recusion 来实现这一点，以便您的遍历适用于任何格式的输入数据：

function printPaths(node, path) 

  const nodeName = node.name ? (path ? ',' : '') + node.name : ''
  const nodePath = (path ? path : '') + nodeName  
  const nodeChildren = Object.values(node).filter(Array.isArray).flat()

  return nodeChildren.length > 0 ? nodeChildren
  .map(nodeChild => printPaths(nodeChild, nodePath)).flat() : nodePath

此解决方案与您的特定输入数据格式分离，这意味着它将检查当前的node 对象并遍历找到的任何数组值，最终返回所有发现的路径：

var input = 
  name: "A",
  childNodes: [
    name: "B",
    childProps: [
      prop_list: [
        name: "BS1"
      , 
        name: "BS2"
      ]
    ],
    childNodes: [
      name: "C",
      childProps: [
        prop_list: [
          name: "CS1"
        , 
          name: "CS2"
        ]
      ],
    ]
  ],
  childProps: [
    prop_list: [
      name: "AS1"
    , 
      name: "AS2"
    ]
  ]


function printPaths(node, path) 
  
  const nodeName = node.name ? (path ? ',' : '') + node.name : ''
  const nodePath = (path ? path : '') + nodeName  
  const nodeChildren = Object.values(node).filter(Array.isArray).flat()
    
  return nodeChildren.length > 0 ? nodeChildren
  .map(nodeChild => printPaths(nodeChild, nodePath)).flat() : nodePath


console.log( printPaths(input) )