在Javascript中对JSON进行分组和排序，同时维护原始键

Question

我正在寻找一种方法来转换这种JSON：

​

{  
   "component-0":{  
  "parent":"grid-item-0",
  "position":1
   },
   "component-1":{  
  "parent":"grid-item-0",
  "position":0
   },
   "component-2":{  
  "parent":"grid-item-1",
  "position":0
   } ...
}

​

分为(按“家长”分组并按“位置”排序)：

{  
   "grid-item-0":[  
      {  
         "id":"component-1",
         "parent":"grid-item-1",
         "position":0
      },
      {  
         "id":"component-0",
         "parent":"grid-item-0",
         "position":1
      }
   ],
   "grid-item-1":[  
      {  
         "id":"component-2",
         "parent":"grid-item-1",
         "position":0
      }
   ] ...
}

​

请注意，保留原始密钥/标识符("component-0“等)很重要。在分组之后。我尝试了下划线groupBy方法，但是它用数字替换了我的id。

提前感谢！

Answer 1

​

var obj = {  
   "component-0":{  
  "parent":"grid-item-0",
  "position":1
   },
   "component-1":{  
  "parent":"grid-item-0",
  "position":0
   },
   "component-2":{  
  "parent":"grid-item-1",
  "position":0
   }
}

_.each(obj, (v, k) => v.id = k)
var grouped = _.groupBy(obj, 'parent');
var sorted = _.mapObject(grouped, v => _.sortBy(v,'position'))
console.log(sorted)

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

​

Answer 2

A香草JS解决方案：

首先，我们需要将原始对象转换为对象数组，将id添加到每个对象中：

var objects = Object.keys(original_object).
  reduce(function(arr, key) {
    arr.push(
      Object.assign({}, original_object[key], { id: key })
    );
    return arr;
  }, []);

这将为我们提供一个具有以下结构的数组：

​

​

然后按位置对objects进行排序：

var sorted_objects = objects.sort(function(a, b) {
  return a.position >= b.position ? 1 : -1;
});

最后，我们使用parent对对象进行分组。

var groups = sorted_objects.reduce(function(res, item) {
  res[item.parent] = res[item.parent] || [];
  res[item.parent].push(item);
  return res;
}, {});

最终结果：

​

​

最终代码：

​

var original_object = {  
  "component-0":{  
    "parent":"grid-item-0",
    "position":1
  },
  "component-1":{  
    "parent":"grid-item-0",
    "position":0
  },
  "component-2":{  
    "parent":"grid-item-1",
    "position":0
  }
}

var objects = Object.keys(original_object).
  reduce(function(arr, key) {
    arr.push(
      Object.assign({}, original_object[key], { id: key })
    );
    return arr;
  }, []);

var sorted_objects = objects.sort(function(a, b) {
  return a.position >= b.position ? 1 : -1;
});

var groups = sorted_objects.reduce(function(res, item) {
  res[item.parent] = res[item.parent] || [];
  res[item.parent].push(item);
  return res;
}, {});

console.log(groups);

​