javascript - 将对象数组转换为树形数据结构

Question

我在数据库中保存了一些信息，我希望将其显示在我定义的结构中。

当进行 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
        }), [])
      }), [])
    }), [])
  })
}, []);

Answer 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; }