Сортировка индексов массива в javascript

Question

Я пытаюсь создать небольшое приложение на Vuejs, где у меня есть набор массивов, который приходит через ответ API, который дает следующий вывод:

{
    "data":
    {
        "Real Estate Regulatory Act":[
            {
                "id":603,
                "project_id":2392,
                "parent_type":"Real Estate Regulatory Act",
                "type":"Building Plan Approval",
                "name":"FORMS.pdf",
                "link":"https://.....DyumatHotelsFORMS.pdf"
            }
        ],
        "Environmental Clearance":[
            {
                "id":602,
                "project_id":2392,
                "parent_type":"Environmental Clearance",
                "type":"Form 1",
                "name":"HotelsCPEMP.pdf",
                "link":"https://.....MarineandDyumatHotelsCPEMP.pdf"
            }
        ],
        "Document":[
            {
                "id":601,
                "project_id":2392,
                "parent_type":"Document",
                "type":"Land Details",
                "name":"FORMS.pdf",
                "link":"https://....HotelsFORMS.pdf"
            }
        ],
        "Miscellaneous Approvals":[
            {
                "id":604,
                "project_id":2392,
                "parent_type":
                "Miscellaneous Approvals",
                "type":"Not Reported",
                "name":"Report Part 1.pdf",
                "link":"https://...Report Part 1.pdf"
            }
        ]
    }
}

Я хочу отсортироватьэтот javascript согласно индексам относительно следующего массива:

['Document', 'Environmental Clearance', 'Real Estate Regulatory Act', 'Miscellaneous Approvals']

Итак, мой окончательный результат будет:

{
    "data":
    {
        "Document":[
            {
                "id":601,
                "project_id":2392,
                "parent_type":"Document",
                "type":"Land Details",
                "name":"FORMS.pdf",
                "link":"https://....HotelsFORMS.pdf"
            }
        ],
        "Environmental Clearance":[
            {
                "id":602,
                "project_id":2392,
                "parent_type":"Environmental Clearance",
                "type":"Form 1",
                "name":"HotelsCPEMP.pdf",
                "link":"https://.....MarineandDyumatHotelsCPEMP.pdf"
            }
        ],
        "Real Estate Regulatory Act":[
            {
                "id":603,
                "project_id":2392,
                "parent_type":"Real Estate Regulatory Act",
                "type":"Building Plan Approval",
                "name":"FORMS.pdf",
                "link":"https://.....DyumatHotelsFORMS.pdf"
            }
        ],
        "Miscellaneous Approvals":[
            {
                "id":604,
                "project_id":2392,
                "parent_type":
                "Miscellaneous Approvals",
                "type":"Not Reported",
                "name":"Report Part 1.pdf",
                "link":"https://...Report Part 1.pdf"
            }
        ]
    }
}

Мой код в настоящее время выглядит так:

if(response.status === 200)
{
    let docs = response.data.data;
    let sortDocs = ['Document', 'Environmental Clearance', 'Real Estate Regulatory Act', 'Miscellaneous Approvals'];
    let result = []

    sortDocs.forEach(function(key) {
        this.subscProDocument[key] = result.push(docs[key])
    })

}

Я получаю сообщение об ошибке вроде этого:

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'subscProDocument' из неопределенного

Я уже определил это subscProDocumentв data () и инициализируется как пустой массив.Помоги мне с этим.Спасибо

Answer 1

let data = {
    "data":
    {
        "Real Estate Regulatory Act":[
            {
                "id":603,
                "project_id":2392,
                "parent_type":"Real Estate Regulatory Act",
                "type":"Building Plan Approval",
                "name":"FORMS.pdf",
                "link":"https://.....DyumatHotelsFORMS.pdf"
            }
        ],
        "Environmental Clearance":[
            {
                "id":602,
                "project_id":2392,
                "parent_type":"Environmental Clearance",
                "type":"Form 1",
                "name":"HotelsCPEMP.pdf",
                "link":"https://.....MarineandDyumatHotelsCPEMP.pdf"
            }
        ],
        "Document":[
            {
                "id":601,
                "project_id":2392,
                "parent_type":"Document",
                "type":"Land Details",
                "name":"FORMS.pdf",
                "link":"https://....HotelsFORMS.pdf"
            }
        ],
        "Miscellaneous Approvals":[
            {
                "id":604,
                "project_id":2392,
                "parent_type":
                "Miscellaneous Approvals",
                "type":"Not Reported",
                "name":"Report Part 1.pdf",
                "link":"https://...Report Part 1.pdf"
            }
        ]
    }
};

Получить данные из объекта и присвоить unordered переменную

const unordered = data.data;

Объявить новую переменную ordered

const ordered = {};

Object.keys получит массив keys от unordered object, затем применит sort function к ключам для ascending sort.

Затем мы выполним цикл forEach для array of keysи присвоит значение с ключом ordered object;

Object.keys(unordered).sort().forEach(function(key) {
  ordered[key] = unordered[key];
});

console.log(ordered);

Answer 2

let obj = {
    "data":
    {
        "Real Estate Regulatory Act":[
            {
                "id":603,
                "project_id":2392,
                "parent_type":"Real Estate Regulatory Act",
                "type":"Building Plan Approval",
                "name":"FORMS.pdf",
                "link":"https://.....DyumatHotelsFORMS.pdf"
            }
        ],
        "Environmental Clearance":[
            {
                "id":602,
                "project_id":2392,
                "parent_type":"Environmental Clearance",
                "type":"Form 1",
                "name":"HotelsCPEMP.pdf",
                "link":"https://.....MarineandDyumatHotelsCPEMP.pdf"
            }
        ],
        "Document":[
            {
                "id":601,
                "project_id":2392,
                "parent_type":"Document",
                "type":"Land Details",
                "name":"FORMS.pdf",
                "link":"https://....HotelsFORMS.pdf"
            }
        ],
        "Miscellaneous Approvals":[
            {
                "id":604,
                "project_id":2392,
                "parent_type":
                "Miscellaneous Approvals",
                "type":"Not Reported",
                "name":"Report Part 1.pdf",
                "link":"https://...Report Part 1.pdf"
            }
        ]
    }
};

const orderedObj = { data: {} };
Object.keys(obj.data).sort().forEach(function(key) {
  orderedObj.data[key] = obj.data[key];
});

Answer 3

Ваш data.data объект должен быть массивом, если вы хотите упорядочить его элементы , поскольку вы не можете полагаться на порядок ключей в Object, поскольку это не гарантируется.Вот пост о порядке расположения ключей в объектах JS

Вы можете сделать это упорядочение и преобразование в массив одной строкой:

data.data = orderedKeys.map(key => ({ [key]: data.data[key] }));

Это даст вам:

{
  "data": [
  {
      "Document": [{
          "id": 601,
          "project_id": 2392,
          ...
        }]
    },
    {
      "Environmental Clearance": [{
          "id": 602,
          "project_id": 2392,
          ...
        }]
    },
    {
      "Real Estate Regulatory Act": [{
          "id": 603,
          "project_id": 2392,
          ...
        }]
    },
    {
      "Miscellaneous Approvals": [{
          "id": 604,
          "project_id": 2392,
          ...
        }]
    }
  ]
}

Вот рабочий пример:

const data = {
    "data": {
        "Real Estate Regulatory Act": [{
            "id":603,
            "project_id":2392,
            "parent_type":"Real Estate Regulatory Act",
            "type":"Building Plan Approval",
            "name":"FORMS.pdf",
            "link":"https://.....DyumatHotelsFORMS.pdf"
        }],
        "Environmental Clearance": [{
            "id":602,
            "project_id":2392,
            "parent_type":"Environmental Clearance",
            "type":"Form 1",
            "name":"HotelsCPEMP.pdf",
            "link":"https://.....MarineandDyumatHotelsCPEMP.pdf"
        }],
        "Document": [{
            "id":601,
            "project_id":2392,
            "parent_type":"Document",
            "type":"Land Details",
            "name":"FORMS.pdf",
            "link":"https://....HotelsFORMS.pdf"
        }],
        "Miscellaneous Approvals": [{
            "id":604,
            "project_id":2392,
            "parent_type":
            "Miscellaneous Approvals",
            "type":"Not Reported",
            "name":"Report Part 1.pdf",
            "link":"https://...Report Part 1.pdf"
        }]
    }
};

const orderedKeys = ['Document', 'Environmental Clearance', 'Real Estate Regulatory Act', 'Miscellaneous Approvals'];

data.data = orderedKeys.map(key => ({ [key]: data.data[key] }));

console.log(data)

Answer 4

Вам нужно взять ссылку на this как thisArg из Array#forEach

sortDocs.forEach(function(key) {
    this.subscProDocument[key] = result.push(docs[key]);
}, this);

или взять функцию стрелки , которая принимаетthis внешнего объема.

sortDocs.forEach(key => this.subscProDocument[key] = result.push(docs[key]));

Answer 5

Это решение:

var obj={
    "data":
    {
        "Real Estate Regulatory Act":[
            {
                "id":603,
                "project_id":2392,
                "parent_type":"Real Estate Regulatory Act",
                "type":"Building Plan Approval",
                "name":"FORMS.pdf",
                "link":"https://.....DyumatHotelsFORMS.pdf"
            }
        ],
        "Environmental Clearance":[
            {
                "id":602,
                "project_id":2392,
                "parent_type":"Environmental Clearance",
                "type":"Form 1",
                "name":"HotelsCPEMP.pdf",
                "link":"https://.....MarineandDyumatHotelsCPEMP.pdf"
            }
        ],
        "Document":[
            {
                "id":601,
                "project_id":2392,
                "parent_type":"Document",
                "type":"Land Details",
                "name":"FORMS.pdf",
                "link":"https://....HotelsFORMS.pdf"
            }
        ],
        "Miscellaneous Approvals":[
            {
                "id":604,
                "project_id":2392,
                "parent_type":
                "Miscellaneous Approvals",
                "type":"Not Reported",
                "name":"Report Part 1.pdf",
                "link":"https://...Report Part 1.pdf"
            }
        ]
    }
};

function map(it){
   var item={};
   item[it]=obj.data[it];
   return item;
}

console.log(Object.keys(obj.data).sort().map(map));