在javascript中转换为分层数组

Question

小提琴的例子

我想转换此JSON数据

var data = [
  {
    "computer": 24,
    "brand": "Italy A",
    "phone": 0,
    "country": "Italy"
  },
  {
    "brand": "Italy C",
    "computer": 0,
    "phone": 0,
    "country": "Italy"
  },
  {
    "brand": "Brazil B",
    "computer": 0,
    "phone": 22,
    "country": "Brazil"
  },
  {
    "computer": 0,
    "brand": "Brazil D",
    "phone": 62,
    "country": "Brazil"
  },
  {
    "computer": 34,
    "brand": "US E",
    "phone": 41,
    "country": "US"
  }
];

成为d3图的分层形式：

{
  "name": "categories",
  "children": [
    {
      "name": "phone",
      "children": [
        {
          "name": "US",
          "children": [
            {
              "brand": "US E",
              "size": 41
            }
          ]
        },
        {
          "name": "Brazil",
          "children": [
            {
              "brand": "Brazil B",
              "size": 22
            },
            {
              "brand": "Brazil D",
              "size": 62
            }
          ]
        },
        {
          "name": "Italy",
          "children": []
        }
      ]
    },
    {
      "name": "computer",
      "children": [
        {
          "name": "US",
          "children": [
            {
              "brand": "US E",
              "size": 34
            }
          ]
        },
        {
          "name": "Brazil",
          "children": []
        },
        {
          "name": "Italy",
          "children": [
            {
              "brand": "Italy A",
              "size": 24
            }
          ]
        }
      ]
    }
  ]
}

我想出了以下代码来生成格式：

function group_children(data){
    var categories = ["phone","computer"];
    var countries = ["US","Brazil","Italy"];
    var object = {name:"categories",children:[]};
    for(var c =0; c < categories.length;c++){
      object.children.push({"name":categories[c],children:[]});

     for(var con = 0;con < countries.length;con++){
       object.children[c].children.push({"name":countries[con],"children":[]});
     }
    }

    for(var i = 0;i < data.length;i++){
     var row = data[i];
     for(var c =0; c < categories.length;c++){
      for(var con = 0;con < countries.length;con++){
        var cat_key = categories[c],
            country_key = countries[con];
        if(row[cat_key] > 0){
          if(object.children[c].name == cat_key && row.country == country_key){  object.children[c].children[con].children.push({brand:row["brand"],size:row[cat_key]});        
          }
        }
      }   
    }
 }
 return object;
}

如果该国家/地区的children级数组为空，是否有可能在迭代过程中不将某个国家/地区推入品牌或计算机的children级数组？

例如，应删除这些对象

        // computer
        {
          "name": "Brazil",
          "children": []
        }
        // phone:

        {
          "name": "Italy",
          "children": []
        }

这是将每个国家/地区推入每个类别的子级数组的部分：

    for(var c =0; c < categories.length;c++){
      object.children.push({"name":categories[c],children:[]});

     for(var con = 0;con < countries.length;con++){
       object.children[c].children.push({"name":countries[con],"children":[]});
     }
    }

我的方法可能是错误的，因此也欢迎将数据转换为该分层形式的任何其他建议。

Answer 1

检查这个小提琴 ，这是您要找的东西吗？ 我决定对您遵循的方法采取不同的方法，希望您不要介意。 我对代码进行了注释，以使其更清晰：

var result = {
    name: "categories",
    children: [{
        "name": "phone",
            "children": []
    }, {
        "name": "computer",
            "children": []
    }]
};

$.each(data, function (index, item) {// Go through data and populate the result object.
    if (+item.computer > 0) { // Computer has items.
        filterAndAdd(item, result.children[1], "computer");
    }
    if (+item.phone > 0) { // Phone has items.
        filterAndAdd(item, result.children[0], "phone");
    }
});

function filterAndAdd(item, result_place, type) {// Search and populate.
    var i = -1;
    $.each(result_place.children, function (index,a) {
        if( a.name === item.country ) {
            i = index;
            return false;
        }
    });

    if (i > -1) {// Country already exists, add to children array.
        result_place.children[i].children.push({
            "brand": item.brand,
                "size": item[type]
        });
    } else {// Country doesn't exist, create it.
        result_place.children.push({
            "name": item.country,
                "children": [{
                "brand": item.brand,
                    "size": item[type]
            }]
        });
    }
}

希望能帮助到你。

Answer 2

您必须使用d3.nest()函数对数组元素进行分层分组。 该文档可在此处获得 。 还要仔细阅读本教程，它绝对可以帮助您创建分层数据。

仅凭键和值对就可以获得层次结构数据，这还不够。 但是如果您想转换成名字和孩子，已经对SO提出了疑问，请检查此 。

Answer 3

使用当前的方法，您应该在推入国家/地区之前对数据进行迭代以查找空值，这将导致更多的迭代，而不仅仅是简单地对结果进行迭代以过滤空值。

否则，您应该在数据插入的相同迭代中创建脚本，从而将迭代次数减少到1。