Как отсортировать вложенный массив с помощью lodash

Question

У меня есть коллекция объектов в этом массиве, и мне нужно упорядочить их по ключу 'order' (asc).Есть ли способ отсортировать объекты внутри массива, а затем вернуть весь массив?Я полагаюсь на порядок, так как использую его в v-for с ключом:.

[
    {
        "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 Стек говорит мне, что это возможный дублирующий вопрос, но я в растерянности после нескольких часов поиска.Приношу свои извинения, если я пропустил уже отвеченный вопрос.

Answer 1

Глубокая сортировка с использованием Лодаш

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

Answer 2

Сортирует каждый подмассив в массиве

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

Answer 3

Вам также следует рассмотреть метод orderBy от lodash, поскольку вы можете легко изменить порядок сортировки с asc на desc, если захотите сделать это позже или получить его через переменную.прошло через пользовательский интерфейс и т.д:

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

На всякий случай, если вам нужно простое решение 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)