Sorting indexes of an array in javascript

Question

I'm trying to build a small application on Vuejs where I'm having a set of array which comes up through an api response which gives following output:

{
    "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"
            }
        ]
    }
}

I want to sort this javascript as per the indexes with respect to following array:

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

So my final result will be:

{
    "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"
            }
        ]
    }
}

My code currently look like:

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

}

I get error of something like this:

Uncaught (in promise) TypeError: Cannot read property 'subscProDocument' of undefined

I already defined this subscProDocument in data() and initialized as an empty array. Help me out with this. Thanks

why not take the sorted keys array as ordered accessor of the object? — Nina Scholz, Feb 01 '19 at 11:46
@NinaScholz can you share some links where I can know more about it. — Nitish Kumar, Feb 01 '19 at 11:48
@NitishKumar why you need sorting in objects ? when you can access using keys directly ? moreover objects doesen't guaranty order. if you want property to be accessed in the order you have in array. than just loop on array and access each property — Code Maniac, Feb 01 '19 at 11:50
The error is because `this` references the anonymous `function() {}` passed to `forEach()`. You can `bind()` that function to the object that has `subscProDocument` attribute. — marekful, Feb 01 '19 at 11:51
If you want to keep the same structure, you will have to at least change the `data.data` Object to an Array, since the ordering of keys in a JS object is not guaranteed, see my answer below. — jo_va, Feb 01 '19 at 11:55

M Shafique · Answer 1 · 2019-02-01T12:14:44.963

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

Get Data from Object and assign to unordered variable

const unordered = data.data;

Declare new Variable ordered

const ordered = {};

Object.keys will get the array of keys from unordered object then will apply sort function on keys for ascending sort.

Then we'll execute forEach loop on array of keys and will assign value with key to ordered object;

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

console.log(ordered);

behzad besharati · Answer 2 · 2019-02-01T12:07:00.423

This is the solution:

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

jo_va · Answer 3 · 2019-02-01T12:05:47.630

Your data.data object should be an array if you want to order its items, as you can't rely on the ordering of keys in an Object since it is not guaranteed. Here is a post about key ordering in JS objects

You can do this ordering and conversion to an array with a single line:

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

This will give you:

{
  "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,
          ...
        }]
    }
  ]
}

Here is a working example:

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)

@Code Maniac, only in the input data, not in the transformed output. — jo_va, Feb 01 '19 at 11:57

Nina Scholz · Answer 4 · 2019-02-01T12:04:34.527

0

You need to take a reference to this as thisArg of Array#forEach

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

or take an arrow function, which takes this of the outer scope.

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

edited Feb 01 '19 at 12:04

answered Feb 01 '19 at 11:52

Nina Scholz

323,592
20
270
324

1

Seems that it's in some async callback, so propably `this` in given scope is different that expected, so it's not enough to take reference at this point – barbsan Feb 01 '19 at 12:12

score 0 · Answer 5 · answered Feb 01 '19 at 11:54

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

Sorting indexes of an array in javascript

5 Answers5