javascript 获取每个子节点的所有父节点路径

h7wcgrx3 于 2023-02-18 发布在 Java

关注(0)|答案(1)|浏览(166)

嗨，我有下面的代码运行，但我想添加一个名为路径的属性，应该包括所有其父节点路径
预期输出我需要cardTtile中显示的内容，因此每个节点都需要相同的内容。

[
  {
    "id": "cardShop",
    "key": "cardShop",
    "title": "cardShop",
    "selectable": false,
     "path":cardShop"
    "children": [
      {
        "id": "cardData",
        "key": "cardData",
        "title": "cardData",
        "parentId": "cardShop",
        "path":cardShop.cardData"
        "selectable": false,
        "children": [
          {
            "id": "cardTitle",
            "key": "cardTitle",
            "title": "cardTitle",
            "parentId": "cardData",
             "path":cardShop.cardData.cardTitle"
            "isLeaf": true
          },
          {
            "id": "cardType",
            "key": "cardType",
            "title": "cardType",
            "parentId": "cardData",
            "isLeaf": true
          },
          {
            "id": "dtmProductName",
            "key": "dtmProductName",
            "title": "dtmProductName",
            "parentId": "cardData",
            "isLeaf": true
          },
          {
            "id": "viewAllCards",
            "key": "viewAllCards",
            "title": "viewAllCards",
            "parentId": "cardData",
            "selectable": false,
            "children": [
              {
                "id": "url",
                "key": "url",
                "title": "url",
                "parentId": "viewAllCards",
                "isLeaf": true
              },
              {
                "id": "text",
                "key": "text",
                "title": "text",
                "parentId": "viewAllCards",
                "isLeaf": true
              }
            ]
          }
        ]
      },
      {
        "id": "eligibilityChecker",
        "key": "eligibilityChecker",
        "title": "eligibilityChecker",
        "parentId": "cardShop",
        "selectable": false,
        "children": [
          {
            "id": "header",
            "key": "header",
            "title": "header",
            "parentId": "eligibilityChecker",
            "isLeaf": true
          },
          {
            "id": "subHeader",
            "key": "subHeader",
            "title": "subHeader",
            "parentId": "eligibilityChecker",
            "isLeaf": true
          },
          {
            "id": "bulletPoints",
            "key": "bulletPoints",
            "title": "bulletPoints",
            "parentId": "eligibilityChecker",
            "isLeaf": true
          }
        ]
      }
    ]
  }
]

我有下面的运行代码的例子在这里。我试图坚持parentKey递归，但它没有给我预期的输出。
x一个一个一个一个x一个一个二个x
您的建议将不胜感激谢谢

JavaScript

来源：https://stackoverflow.com/questions/75470984/get-all-its-parent-nodes-path-for-each-child-nodes

1条答案

按热度按时间

pqwbnv8z1#

您可以为path取另一个变量，并将实际的key添加到其中。

const transform = data => {
    const loop = (data, parentId, previousPath = '') => Object
        .entries(data)
        .map(([key, value]) => {
            const
                additional = parentId ? { parentId } : {},
                path = previousPath  + (previousPath && '.') + key;

            Object.assign(
                additional,
                value && typeof value === 'object' && !Array.isArray(value)
                    ? { selectable: false, children: loop(value, key, path) }
                    : { isLeaf: true }
            );

            return { id: key, key, title: key, path, ...additional };
        });

    return loop(data);
}

const data = { cardShop: { cardData: { cardTitle: "The Platinum Card<sup>®</sup>", cardType: "credit-cards", dtmProductName: "PlatinumCard", viewAllCards: { url: "credit-cards/all-cards", text: "All Cards" } }, eligibilityChecker: { header: "Check your eligibility", subHeader: "The Platinum Card®", bulletPoints: ["Only takes a couple of minutes to complete", "Will not impact your credit rating", "Allows you to apply with confidence"] } } };

console.log(transform(data));

.as-console-wrapper { max-height: 100% !important; top: 0; }

赞(0）回复(0）举报 2023-02-18

我来回答

javascript 获取每个子节点的所有父节点路径

1条答案

相关问题

热门标签

最新问答