CODEWITHSUNDEEP
javascriptvue.jsecmascript-6vuejs2
Nitish Kumar
Nitish Kumar

Reputation: 6276

Sorting indexes of an array in javascript

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

Upvotes: 0

Views: 73

Answers (5)

M Shafique
M Shafique

Reputation: 816

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

Upvotes: 1

behzad besharati
behzad besharati

Reputation: 6910

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

Upvotes: 0

jo_va
jo_va

Reputation: 13964

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)

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386560

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

Upvotes: 0

MarcoS
MarcoS

Reputation: 17711

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

Upvotes: 0

Related Questions