在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])
    })

}

我收到類似以下內容的錯誤：

未捕獲（承諾）TypeError：無法讀取未定義的屬性“ subscProDocument”

我已經在data（）中定義了此subscProDocument ，並將其初始化為空數組。 幫我解決這個問題。 謝謝

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將從unordered object獲取keys的數組，然后將sort function應用到鍵上以進行ascending sort 。

然后我們將在array of keys執行forEach循環，並將帶鍵的值賦給ordered object ;

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

console.log(ordered);

Answer 2

這是解決方案：

 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)); 

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 thisArg

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

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];
});