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
– Nina Scholz, Commented Feb 1, 2019 at 11:46
@NinaScholz can you share some links where I can know more about it. — Nitish Kumar
– Nitish Kumar, Commented Feb 1, 2019 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
– Code Maniac, Commented Feb 1, 2019 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
– marekful, Commented Feb 1, 2019 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
– jo_va, Commented Feb 1, 2019 at 11:55

M Shafique · Accepted Answer · 2019-02-01 12:14:44Z

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

MarcoS · Accepted Answer · 2019-02-01 11:54:14Z

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

Nina Scholz · Accepted Answer · 2019-02-01 12:04:34Z

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 1, 2019 at 12:04

answered Feb 1, 2019 at 11:52

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

barbsan Over a year ago

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

jo_va · Accepted Answer · 2019-02-01 12:05:47Z

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.

behzad besharati · Accepted Answer · 2019-02-01 12:07:00Z

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

Collectives™ on Stack Overflow

Sorting indexes of an array in javascript

5 Answers 5

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related