Sort only few objects from an array of object coming from api response in React

Question

I am looking for an efficient way of sorting the API response which is array of Objects. This Array has many fields and I just want to sort only few of them.

The Array looks like this

result =  {type: Array(), status: Array(), nature: Array(), health: Array(), fitness: Array(), wealth: Array()}

and Array have name and value property like {name:"", value:""}

so let's say I just need to sort type, status, and nature out of this result. The thing that I have tried now looks like this which juts sorts one of the records.

const typeName = "type"
if(result[typeName]){
    result[typeName] = sortingFunction(result[typeName], "name")
}

Now I need to sort other fields as well and also for few fields I need to sort on the basis of "value" property as well. So please let me know if you have any efficient way of doing this.

Answer 1

You could create a sort function which can sort the given input object for the given keys.

I have create a sample function for sorting.

This function has two parameters.

1. First the object which needs to be sorted
2. Second option, you can pass the option for sort.
   a. sortBy: Name of the property on which the function will perform the sort .
   b. sortKeys: Array | String, the keys/key of the object which need to be sorted.

Function:

function sortObject(input, options = {}) {
    if (!options)
        return;

    let keys = options.sortKeys;
    let sortBy = options.sortby



    if (!sortBy) {
        console.error("sort by option is not defiend");
        return;
    }

    if (!keys) {
        console.error("sort keys are not defiend");
        return;
    }


    if (Array.isArray(keys) && keys.length > 0) {
        keys.forEach(item => sortObjectByKey(item, sortBy));
        return;
    }

    if (typeof keys === "string" && keys) {
        sortObjectByKey(keys, sortBy);
        return;
    }

    function sortObjectByKey(sortKey, sortBy) {
        input[sortKey].sort(function (a, b) {
            let _a = (typeof a[sortBy] === "string") ? a[sortBy].toLowerCase() : a[sortBy];
            let _b = (typeof b[sortBy] === "string") ? b[sortBy].toLowerCase() : b[sortBy];
            if (_a < _b)
                return -1
            if (_a > _b)
                return 1
            return 0
        });
    }
}

Example:

//sortObject(sampleObject, { sortby: ["name", "value"], sortKeys: ["status", "type"] });
function sortObject(input, options = {}) {
    if (!options)
        return;

    let keys = options.sortKeys;
    let sortBy = options.sortby



    if (!sortBy) {
        console.error("sort by option is not defiend");
        return;
    }

    if (!keys) {
        console.error("sort keys are not defiend");
        return;
    }


    if (Array.isArray(keys) && keys.length > 0) {
        keys.forEach(item => sortObjectByKey(item, sortBy));
        return;
    }

    if (typeof keys === "string" && keys) {
        sortObjectByKey(keys, sortBy);
        return;
    }

    function sortObjectByKey(sortKey, sortBy) {
        input[sortKey].sort(function (a, b) {
            let _a = (typeof a[sortBy] === "string") ? a[sortBy].toLowerCase() : a[sortBy];
            let _b = (typeof b[sortBy] === "string") ? b[sortBy].toLowerCase() : b[sortBy];
            if (_a < _b)
                return -1
            if (_a > _b)
                return 1
            return 0
        });
    }
}

let sampleObject = {
    type: [
        { name: "c", value: 4 },
        { name: "a", value: 2 },
        { name: "b", value: 1 },
        { name: "d", value: 3 },
    ],
    status: [
        { name: "c", value: 25 },
        { name: "a", value: 25 },
        { name: "b", value: 25 },
        { name: "d", value: 25 },
    ],
    nature: [
        { name: "c", value: 25 },
        { name: "a", value: 25 },
        { name: "b", value: 25 },
        { name: "d", value: 25 },
    ],
}
sortObject(sampleObject, { sortby: "value", sortKeys: ["type"] });
sortObject(sampleObject, { sortby: "name", sortKeys: ["status", "nature"] });
console.log(sampleObject)

Answer 2

One way is to translate the object of arrays into an array of objects, then merge it back after sorting.

const result = {
  type: ['foo', 'bar', 'baz'], 
  status: [4, 3, 5],
  nature: ['forest', 'animal', 'water'],
  health: ['athlete', 'couch potato', 'dead'],
  fitness: [200, 50, 60],
  wealth: [5, 2, 99]
};

// 1. combine
const combined = result.type.map((_, index) => {
  return Object.fromEntries(Object.keys(result).map(key => [key, result[key][index]]));
});

// 2. example sort by status
combined.sort((a, b) => a.status - b.status)

// 3. merge
combined.forEach((object, index) => {
  for (const [key, value] of Object.entries(object)) {
    result[key][index] = value
  }
})

console.log(result);