如何使用lodash对嵌套数组进行排序

Question

我在这个数组中有一组对象，我需要通过'order'键（asc）对它们进行排序。 有没有办法对数组中的对象进行排序，然后返回整个数组？ 我依靠订单，因为我在一个v-for中使用它与：key。

[
    {
        "id":0,
        "type":"Header",
        "order":1,
        "props":{
            "order":0,
            "id":0,
            "section_id":0
        },
        "data":{
            "header":""
        },
        "component":"header-block"
    },
    {
        "id":1,
        "type":"Header",
        "order":0,
        "props":{
            "order":1,
            "id":1,
            "section_id":0
         },
         "data":{
            "header":""
         },
         "component":"header-block"
    }
],
[
    //Another collection of objects
]

我目前正在这样做 -

getters: {
        sorted: state => {
            return _.orderBy(state.experience_sections, function(block) {
                if(block.experience_blocks[0]) {
                    return block.experience_blocks[0].order;
                }
            });
        }
    }

上面的解决方案似乎没有按'asc'顺序对对象进行排序。 我是在正确的轨道上吗？

谢谢！

PS Stack告诉我这可能是一个重复的问题，但是经过几个小时的搜索我不知所措。 如果我错过了已经回答的问题，我很抱歉。

Answer 1

以防万一你需要简单的javascript解决方案..使用Array.forEach

我还扩展了您的数组以包含更多数据

 var arr = [[ { "id":0, "type":"Header", "order":1, "props":{ "order":0, "id":0, "section_id":0 }, "data":{ "header":"" }, "component":"header-block" }, { "id":1, "type":"Header", "order":0, "props":{ "order":1, "id":1, "section_id":0 }, "data":{ "header":"" }, "component":"header-block" } ], [ { "id":0, "type":"Header", "order":2, "props":{ "order":0, "id":0, "section_id":0 }, "data":{ "header":"" }, "component":"header-block" }, { "id":1, "type":"Header", "order":1, "props":{ "order":1, "id":1, "section_id":0 }, "data":{ "header":"" }, "component":"header-block" } ]] arr.forEach(d => d.sort((a,b) => a.order - b.order)) console.log(arr) 

Answer 2

将对数组中的每个子数组进行排序

const sortedArr = _.map(arr, subArray => _.sortBy(subArray, "order"));

Answer 3

您还应该考虑来自lodash的orderBy方法，因为您可以轻松地从asc更改为desc排序顺序，如果您希望以后更新或通过通过UI传递的变量等等：

 const data = [ [{ "id": 0, "type": "Header", "order": 1, "props": { "order": 0, "id": 0, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" }, { "id": 1, "type": "Header", "order": 0, "props": { "order": 1, "id": 1, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" } ], [{ "id": 0, "type": "Header", "order": 2, "props": { "order": 0, "id": 0, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" }, { "id": 1, "type": "Header", "order": 1, "props": { "order": 1, "id": 1, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" } ] ] console.log('asc:', _.map(data, x => _.orderBy(x, 'order'))) // asc order console.log('desc:', _.map(data, x => _.orderBy(x, 'order', 'desc'))) // desc 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script> 

Answer 4

使用lodash进行深度分类

const sortedArray = _.orderBy(items, [(item) => {
    const nestedObj = _.get(item, 'props');
    item['props'] = _.orderBy(nestedObj,'order','desc');
  return item['order'];
}], 'desc');