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

时间:2019-11-14 21:31:18

标签: javascript angular data-structures ecmascript-6

我在数据库中保存了一些信息,希望以我定义的结构显示这些信息。

进行SELECT * FROM表时,将返回信息数组,如下所示。 enter image description here

遵循返回的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"
}
]

我想显示以下信息:

enter image description here

我想要的是四级树结构。

第一级是IBX。

第二个级别是组名(由用户定义)。

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

第四级是产品配置。

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

PS .:粗体字代表json键

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

2 个答案:

答案 0 :(得分:2)

您可以创建一个嵌套结构,该结构以所需的顺序获取一组键并将这些项分组。

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

答案 1 :(得分:1)

这项工作将会完成

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();

相关问题