将对象数组转换为树数据结构答案

【问题标题】：Transform object array into a tree data structure将对象数组转换为树数据结构
【发布时间】：2019-11-14 21:31:18
【问题描述】：

我有一些信息保存在数据库中，我想以我定义的结构显示它。

当做一个SELECT * FROM表时返回一个数组信息，如下图。

按照返回的 JSON 来提供帮助。

[
{
    "IBX": "RJ1",
    "GroupName": "N/A",
    "ProductName": "Computer Hardware - Server Product",
    "POFName": "N/A"
},
{
    "IBX": "RJ1",
    "GroupName": "N/A",
    "ProductName": "Computer Hardware - Server Product",
    "POFName": "N/A"
},
{
    "IBX": "RJ1",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "N/A"
},
{
    "IBX": "RJ1",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "N/A"
},
{
    "IBX": "RJ1",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "Teste_1"
},
{
    "IBX": "RJ1",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "Teste_1"
},
{
    "IBX": "RJ1",
    "GroupName": "group_2",
    "ProductName": "Computer Hardware - Server Product",
    "POFName": "N/A"
},
{
    "IBX": "RJ1",
    "GroupName": "group_2",
    "ProductName": "Computer Hardware - Server Product",
    "POFName": "teste_2"
},
{
    "IBX": "RJ2",
    "GroupName": "TESTE",
    "ProductName": "Computer Hardware - Server Product",
    "POFName": "teste_3"
},
{
    "IBX": "RJ2",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "N/A"
},
{
    "IBX": "RJ2",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "N/A"
}
]

我想显示如下信息：

我想要的是一个四级树结构。

第一层是IBX。

第二层是组名（定义它的用户）。

第三层是产品名称和用户昵称之间的连接。

第四层是产品配置。

下面是我尝试做的，但我没有成功。

PS.：粗体字代表json key

public transformInNestedList(products: ProductDatabase[]) {

var IBXs = products
  .map(x => x.IBX)
  .filter((v, i, s) => s.indexOf(v) === i);

var test = IBXs.reduce((a, c) => {
  var product_name = products
    .filter(x => x.IBX == c)
    .map(x => x.ProductName)
    .filter((v, i, s) => s.indexOf(v) === i);

  console.log(product_name)

  var group_name = products
    .filter(x => x.IBX == c)
    .map(x => x.GroupName)
    .filter((v, i, s) => s.indexOf(v) === i);

  return a.concat({
    IBX: products.find(x => x.IBX == c).IBX,
    GROUP_NAMES: group_name.reduce((a2, c2) => a2.concat({
      GROUP_NAME: products.find(x => x.IBX == c && x.GroupName == c2).GroupName,
      PRODUCTS: product_name.reduce((a3, c3) => a3.concat({
        PRODUCT_NAME: products.find(x => x.IBX == c && x.ProductName == c3).ProductName,
        ATTRIBUTES: products.filter(x => x.IBX == c && x.ProductName == c3).reduce((a4, c4) => a4.concat({
          POE: c4.POE,
          ATTRIBUTE: c4.Attributes,
          ID: c4.id,
          times: c4.times,
          Price: c4.Price
        }), [])
      }), [])
    }), [])
  })
}, []);

【问题讨论】：

第四层（即产品配置）从何而来？？
顺便说一句，您有多个具有相同内容的对象。在这种情况下应该怎么办？

标签： javascript angular data-structures ecmascript-6

【解决方案1】：

您可以创建一个嵌套结构，该结构采用所需顺序的键数组并将项目分组。

var data = [{ IBX: "RJ1", GroupName: "N/A", ProductName: "Computer Hardware - Server Product", POFName: "N/A" }, { IBX: "RJ1", GroupName: "TESTE", ProductName: "Storage Area Network Product", POFName: "N/A" }, { IBX: "RJ1", GroupName: "TESTE", ProductName: "Storage Area Network Product", POFName: "Teste_1" }, { IBX: "RJ1", GroupName: "group_2", ProductName: "Computer Hardware - Server Product", POFName: "N/A" }, { IBX: "RJ1", GroupName: "group_2", ProductName: "Computer Hardware - Server Product", POFName: "teste_2" }, { IBX: "RJ2", GroupName: "TESTE", ProductName: "Computer Hardware - Server Product", POFName: "teste_3" }, { IBX: "RJ2", GroupName: "TESTE", ProductName: "Storage Area Network Product", POFName: "N/A" }],
    keys = ['IBX', 'GroupName', 'ProductName', 'POFName'],
    result = data
        .reduce((r, o) => {
            keys.reduce((q, k) => {
                var temp = (q.children = q.children || []).find(t => t[k] === o[k]);
                if (!temp) q.children.push(temp = { [k]: o[k] });
                return temp;
            }, r);
            return r;
        }, { children: [] })
        .children;

console.log(result);

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

【讨论】：

感谢您帮助我。我将测试您的代码，然后验证答案。

【解决方案2】：

这行得通吗：

const jsontest = [{
    "IBX": "RJ1",
    "GroupName": "N/A",
    "ProductName": "Computer Hardware - Server Product",
    "POFName": "N/A"
  },
  {
    "IBX": "RJ1",
    "GroupName": "N/A",
    "ProductName": "Computer Hardware - Server Product",
    "POFName": "N/A"
  },
  {
    "IBX": "RJ1",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "N/A"
  },
  {
    "IBX": "RJ1",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "N/A"
  },
  {
    "IBX": "RJ1",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "Teste_1"
  },
  {
    "IBX": "RJ1",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "Teste_1"
  },
  {
    "IBX": "RJ1",
    "GroupName": "group_2",
    "ProductName": "Computer Hardware - Server Product",
    "POFName": "N/A"
  },
  {
    "IBX": "RJ1",
    "GroupName": "group_2",
    "ProductName": "Computer Hardware - Server Product",
    "POFName": "teste_2"
  },
  {
    "IBX": "RJ2",
    "GroupName": "TESTE",
    "ProductName": "Computer Hardware - Server Product",
    "POFName": "teste_3"
  },
  {
    "IBX": "RJ2",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "N/A"
  },
  {
    "IBX": "RJ2",
    "GroupName": "TESTE",
    "ProductName": "Storage Area Network Product",
    "POFName": "N/A"
  }
];

function createProductName(nodes) {
  const productNames = [];
  const exists = {};
  nodes.forEach(n => {
    if (!exists[n.ProductName + n.POFName]) {
      productNames.push({
        ProductName: n.ProductName,
        'POF NAME': n.POFName
      })
    }
    exists[n.ProductName + n.POFName] = true;
  });
  return productNames;
}

function createGrpNames(nodes) {

  const groupNames = [];
  const grpNm = Array.from(new Set(nodes.map(j => j.GroupName)));
  grpNm.forEach(n => groupNames.push({
    GroupName: n,
    ProductNames: createProductName(nodes.filter(js => js.GroupName === n))
  }));
  return groupNames;
}

function start() {
  const hierarchy = [];
  const ibx = Array.from(new Set(jsontest.map(j => j.IBX)));
  ibx.forEach(ib => hierarchy.push({
    IBX: ib,
    GroupNames: createGrpNames(jsontest.filter(js => js.IBX === ib))
  }));

  console.log(JSON.stringify(hierarchy));
}
start();

【讨论】：