将子组中的名称分组到组中 - 重构json数据

时间：2018-02-15 14:37:11

标签： javascript d3.js lodash

我尝试重构我的JSON数据，将其传递给D3.js以创建树形图。下面的链接有虚拟数据。原始数据包括不同的水果/蔬菜名称以及一些属性，例如此水果的组（例如{name: apple, group1: tree fruit}），但我想将水果名称构建到子组中，将子组构建到顶级组中（例如水果＆gt;树）水果＆gt;苹果）。您将找到正确的结构，我试着在最后一行作为评论。

我目前的问题是组名重复多次，我无法找到一种方法来获取group3名称（可能是4和5）一次将其推送到新的数据结构。您将在第145行找到逻辑错误，但我也会复制我的尝试以获取此帖子中的group3名称。

项目：https://codepen.io/phng/pen/JpGEVg?editors=0010 

if (group3) {
  var checkGroup3 = function(recentName) {
    for (var j = 0; j < materialData.children.length; j++) {
      for (var k = 0; k < materialData.children[j].children.length; k++) {
        console.log(_.find(materialData.children[j].children[k].children, {
          'name': recentName
        }));
        if (!_.find(materialData.children[j].children[k].children, {
            'name': recentName
          })) {
          //console.log(recentName);
        }
      }
    }
  }
  checkGroup3(); // this function was a try to get the group3 names once, failed
  if (i != 0) {
    if (group.name != data.children[i - 1].gruppe_3) { // error here. Condition checks the group 3 aka "gruppe_3" multiple times because in first round the group name isn't in the JSON, then another group name follows, is also not in JSON but then the first one comes again and the group name isn't again like the grupp_3 name and get pushed to the JSON again.
      materialData.children[aboveGroupPosition].children[aboveGroupPositionThirdLayer].children.push(group)
    }
  } else if (i === 0) {
    materialData.children[aboveGroupPosition].children[aboveGroupPositionThirdLayer]

      .children.push(group)
  }
}

原始数据：

var data = {
'name': 'Big Data',
'children': [
    {
        'name': 'Apple',
        'gruppe_1': 'Fruits',
        'gruppe_2': 'Red Fruits',
        'gruppe_3': 'Tree Fruits',
        'gruppe_4': 'Winter Favourite Fruits',
        'gruppe_5': 'Candy Fruits'
    },
    {
        'name': 'Pomegranate',
        'gruppe_1': 'Fruits',
        'gruppe_2': 'Red Fruits',
        'gruppe_3': 'Tree Fruits',
        'gruppe_4': 'Winter Favourite Fruits',
        'gruppe_5': 'Candy Fruits'
    },
    {
        'name': 'Pear',
        'gruppe_1': 'Fruits',
        'gruppe_2': 'Green Fruits',
        'gruppe_3': 'Medium Tree Fruits'
    },
    {
        'name': 'Strawberry',
        'gruppe_1': 'Nuts',
        'gruppe_2': 'Red Nuts',
        'gruppe_3': 'Awkward Nuts'
    },
    {
        'name': 'Hazelnuts',
        'gruppe_1': 'Nuts',
        'gruppe_2': 'Brown Nuts',
        'gruppe_3': 'Normal Nuts'
    },
    {
        'name': 'Cucumber',
        'gruppe_1': 'Vegetable',
        'gruppe_2': 'Green Vegetable',
        'gruppe_3': 'Long Vegetable'
    },
    {
        'name': 'Maracuya'
    },
    {
        'name': 'Green Kiwi',
        'gruppe_1': 'Fruits',
        'gruppe_2': 'Green Fruits'
    },
    {
        'name': 'Cherry',
        'gruppe_1': 'Fruits',
        'gruppe_2': 'Red Fruits',
        'gruppe_3': 'Tree Fruits'
    },
]

}

结构我试图得到：

{
  "name":"Big Data",
  "children":[
    {
      "name":"Fruits",
      "children":[
        "Maracuya",
        {
          "name":"Red Fruits",
          "parent":"Fruits",
          "children":[
            {
              "name":"Tree Fruits",
              "children":[
                "Cherry",
                {
                  "name":"Winter Favourite Fruits",
                  "children":[
                    {
                      "name":"Candy Fruits",
                      "children":[
                        "Apple",
                        "Pomegranate"
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "name":"Green Fruits",
          "children":[
            "Green Kiwi",
            {
              "name":"Medium Tree Fruits",
              "children":[
                "Pear"
              ]
            }
          ]
        }
      ]
    },
    {
      "name":"Vegetable",
      "children":[
        {
          "name":"Green Vegetable",
          "children":[
            {
              "name":"Long Vegetable",
              "children":[
                "Cucumber"
              ]
            }
          ]
        }
      ]
    },
    {
      "name":"Nuts",
      "children":[
        {
          "name":"Red Nuts",
          "children":[
            {
              "name":"Awkward Nuts",
              "children":[
                "Strawberry"
              ]
            }
          ]
        },
        {
          "name":"Brown Nuts",
          "children":[
            {
              "name":"Normal Nuts",
              "children":[
                "Hazelnuts"
              ]
            }
          ]
        }
      ]
    }
  ]
}

我是如何尝试重组数据的：

var materialData = {
  'name': 'Big Data',
  'children': []
};


var numberOfElements = data.children.length;

for (var i = 0; i < numberOfElements; i++) {
  var elemObject = data.children.slice(i, i + 1),
    elemInArray = elemObject[0],
    elem = {},
    elem = elemInArray;
  var name = elem.name,
    preview = elem.preview,
    group1 = elem.gruppe_1,
    group2 = elem.gruppe_2,
    group3 = elem.gruppe_3,
    group4 = elem.gruppe_4,
    group5 = elem.gruppe_5;


  // group 1
  var group = {
    'name': group1,
    // 'parent': 'Material Archiv',
    'children': []
  }
  // get first layer groups
  if (i != 0) {
    if (group.name != data.children[i - 1].gruppe_1) {
      materialData.children.push(group)
    }
  } else if (i === 0) {
    materialData.children.push(group)
  }

  // group 2
  var group = {
    'name': group2,
    // 'parent': 'Material Archiv',
    'children': []
  }

  var aboveGroupPosition = materialData.children.map(function(g) {
    return g.name;
  }).indexOf(group1);

  // get second layer groups
  if (group2) {
    if (i != 0) {
      if (group.name != data.children[i - 1].gruppe_2) {
        materialData.children[aboveGroupPosition].children.push(group)
      }
    } else if (i === 0) {
      materialData.children[aboveGroupPosition].children.push(group)
    }
  }

  // group 3
  var group = {
    'name': group3,
    // 'parent': '',
    'children': []
  }

  var aboveGroupPositionThirdLayer = materialData.children[aboveGroupPosition].children.map(function(g) {
    return g.name;
  }).indexOf(group2);

  // get third layer groups
  if (group3) {
    var checkGroup3 = function(recentName) {
      for (var j = 0; j < materialData.children.length; j++) {
        for (var k = 0; k < materialData.children[j].children.length; k++) {
          console.log(_.find(materialData.children[j].children[k].children, {
            'name': recentName
          }));
          if (!_.find(materialData.children[j].children[k].children, {
              'name': recentName
            })) {
            //console.log(recentName);
          }
        }
      }
    }
    checkGroup3(); // this function was a try to get the group3 names once, failed
    if (i != 0) {
      if (group.name != data.children[i - 1].gruppe_3) { // error here. Condition checks the group 3 aka "gruppe_3" multiple times because in first round the group name isnt in the json, then another group name follows, is also not in json but then the first one comes again and the group name isnt again like the grupp_3 name and get pushed to the json again.
        materialData.children[aboveGroupPosition].children[aboveGroupPositionThirdLayer].children.push(group)
      }
    } else if (i === 0) {
      materialData.children[aboveGroupPosition].children[aboveGroupPositionThirdLayer].children.push(group)
    }
  }

}

console.log(materialData);

1 个答案:

答案 0 :(得分：1)

一种方法。

您可以通过迭代嵌套组的键并搜索组来采用迭代方法。如果未找到，请生成一个包含子项的新组，然后继续，直到所有组都在对象中。

最后在可能的后续对象前面将name属性分配给新组。

var data = { name: "Big Data", children: [{ name: "Apple", gruppe_1: "Fruits", gruppe_2: "Red Fruits", gruppe_3: "Tree Fruits", gruppe_4: "Winter Favourite Fruits", gruppe_5: "Candy Fruits" }, { name: "Pomegranate", gruppe_1: "Fruits", gruppe_2: "Red Fruits", gruppe_3: "Tree Fruits", gruppe_4: "Winter Favourite Fruits", gruppe_5: "Candy Fruits" }, { name: "Pear", gruppe_1: "Fruits", gruppe_2: "Green Fruits", gruppe_3: "Medium Tree Fruits" }, { name: "Strawberry", gruppe_1: "Nuts", gruppe_2: "Red Nuts", gruppe_3: "Awkward Nuts" }, { name: "Hazelnuts", gruppe_1: "Nuts", gruppe_2: "Brown Nuts", gruppe_3: "Normal Nuts" }, { name: "Cucumber", gruppe_1: "Vegetable", gruppe_2: "Green Vegetable", gruppe_3: "Long Vegetable" }, { name: "Maracuya" }, { name: "Green Kiwi", gruppe_1: "Fruits", gruppe_2: "Green Fruits" }, { name: "Cherry", gruppe_1: "Fruits", gruppe_2: "Red Fruits", gruppe_3: "Tree Fruits" }] },
    result = { name: data.name, children: [] };

data.children.forEach(function (object) {
    const getKey = i => 'gruppe_' + i;

    var i = 1, index,
        level = result.children,
        temp,
        key = getKey(i);

    while (key in object) {
        temp = level.find(({ name }) => object[key] === name);
        if (!temp) {
            temp = { name: object[key], children: [] };
            level.push(temp);
        }
        level = temp.children;
        key = getKey(++i);
    }
    index = level.findIndex(o => typeof o === 'object');
    level.splice(index === -1 ? level.length : index, 0, object.name);
});

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

相关问题
最新问题