javascript - 使用 JSON 构建层次结构树

Question

我有一个带有 C_PARENT 字段的对象列表。此父字段引用列表中的另一个对象。我想根据此字段从此列表创建树层次结构。

这是我的数据。

[{
    "C_ID" : 1.0,
    "C_TITLE" : "Sparklers",
    "C_PARENT" : 0.0,
    "C_STATUS" : "Active"
},

{
    "C_ID" : 2.0,
    "C_TITLE" : "Twinklers",
    "C_PARENT" : 0,
    "C_STATUS" : "Active"
},

{
    "C_ID" : 3.0,
    "C_TITLE" : "Candles",
    "C_PARENT" : 0.0,
    "C_STATUS" : "Active"
},

{
    "C_ID" : 4.0,
    "C_TITLE" : "Chakkars",
    "C_PARENT" : 0.0,
    "C_STATUS" : "Active"
},

{
    "C_ID" : 5.0,
    "C_TITLE" : "Colour Chakkars",
    "C_PARENT" : 4.0,
    "C_STATUS" : "Active"
},

{
    "C_ID" : 6.0,
    "C_TITLE" : "Fancy Chakkars",
    "C_PARENT" : 4.0,
    "C_STATUS" : "Active"
},

{
    "C_ID" : 7.0,
    "C_TITLE" : "Fountains",
    "C_PARENT" : 0.0,
    "C_STATUS" : "Active"
},

{
    "C_ID" : 8.0,
    "C_TITLE" : "Whistling Fountains",
    "C_PARENT" : 7.0,
    "C_STATUS" : "Active"
},

{
    "C_ID" : 9.0,
    "C_TITLE" : "Fancy Fountains",
    "C_PARENT" : 7.0,
    "C_STATUS" : "Active"
},

{
    "C_ID" : 10.0,
    "C_TITLE" : "Fancy Colour Fountains",
    "C_PARENT" : 7.0,
    "C_STATUS" : "Active"
},

{
    "C_ID" : 11.0,
    "C_TITLE" : "Rockets",
    "C_PARENT" : 0.0,
    "C_STATUS" : "Active"
}]

我需要转换成树结构。

[
  {
    'C_ID': 1,
    'C_TITLE': 'Sparklers',
    'C_PARENT': 0,
    'C_STATUS':'Active'
  },
  {
    "C_ID" : 2.0,
    "C_TITLE" : "Twinklers",
    "C_PARENT" : 0,
    "C_STATUS" : "Active"
  },
  {
    "C_ID" : 3.0,
    "C_TITLE" : "Candles",
    "C_PARENT" : 0.0,
    "C_STATUS" : "Active"
  }
  {
    '"C_ID" : 4.0,
    "C_TITLE" : "Chakkars",
    "C_PARENT" : 0.0,
    "C_STATUS" : "Active"
    children:  [
      {
        "C_ID" : 5.0,
        "C_TITLE" : "Colour Chakkars",
        "C_PARENT" : 4.0,
        "C_STATUS" : "Active"
      },
      {
        "C_ID" : 6.0,
        "C_TITLE" : "Fancy Chakkars",
        "C_PARENT" : 4.0,
        "C_STATUS" : "Active"
      }
    ]
]

我不知道。

请给我建议，

谢谢

Answer 1

我通常用来创建一个带有正确信息的新字符串

String.prototype.replaceAll = function (search, replacement) {
  return this.replace(new RegExp(search, 'g'), replacement);
};

var data = JSON.parse('[{"C_ID" : 1.0,"C_TITLE" : "Sparklers","C_PARENT" : 0.0, "C_STATUS" : "Active"},{    "C_ID" : 2.0,    "C_TITLE" : "Twinklers",    "C_PARENT" : 0,    "C_STATUS" : "Active"},{   "C_ID" : 3.0,    "C_TITLE" : "Candles",    "C_PARENT" : 0.0,    "C_STATUS" : "Active"},{    "C_ID" : 4.0,    "C_TITLE" : "Chakkars",    "C_PARENT" : 0.0,    "C_STATUS" : "Active"},{    "C_ID" : 5.0,    "C_TITLE" : "Colour Chakkars",    "C_PARENT" : 4.0,    "C_STATUS" : "Active"},{    "C_ID" : 6.0,    "C_TITLE" : "Fancy Chakkars",    "C_PARENT" : 4.0,    "C_STATUS" : "Active"},{    "C_ID" : 7.0,    "C_TITLE" : "Fountains",    "C_PARENT" : 0.0,    "C_STATUS" : "Active"},{    "C_ID" : 8.0,    "C_TITLE" : "Whistling Fountains",    "C_PARENT" : 7.0,    "C_STATUS" : "Active"},{    "C_ID" : 9.0,    "C_TITLE" : "Fancy Fountains",    "C_PARENT" : 7.0,    "C_STATUS" : "Active"},{    "C_ID" : 10.0,    "C_TITLE" : "Fancy Colour Fountains",    "C_PARENT" : 7.0,    "C_STATUS" : "Active"},{    "C_ID" : 11.0,    "C_TITLE" : "Rockets",    "C_PARENT" : 0.0,    "C_STATUS" : "Active"}]');

var result = '[';

for (i = 0; i < data.length; i++) {
  if (data[i].C_PARENT == 0 || data[i].C_PARENT == "0") {
    if (i != 0)
      result += ']},';
    result += '{"C_ID" : ' + data[i].C_ID + ', "C_TITLE" : "' + data[i].C_TITLE + '", "C_PARENT" : ' + data[i].C_PARENT + ', "C_STATUS" : "' + data[i].C_STATUS + '", "children" : [';
  } else {
    result += '{"C_ID" : ' + data[i].C_ID + ', "C_TITLE" : "' + data[i].C_TITLE + '", "C_PARENT" : ' + data[i].C_PARENT + ', "C_STATUS" : "' + data[i].C_STATUS + '"},';
  }
}
result += ']}]';
result = result.replaceAll("},]", "}]");
var a = JSON.parse(result);
document.getElementById('result').innerHTML = result + "<br/><br/><br/>" + a;

https://jsfiddle.net/g9h9a9ep/