how can I sort array by other array

Question

There are 2 json arrays below.

arrayA = [
    {attr1: "text", attr2: true, field: "format4"},
    {attr1: "text", attr2: true, field: "format2"},
    {attr1: "text", attr2: true, field: "format1"},
    {attr1: "text", attr2: true, field: "format3"}];

arrayB = [
    { name: 'format1', type: 'text' },
    { name: 'format2', type: 'text' },
    { name: 'format3', type: 'text' },
    { name: 'format4', type: 'text' }
];

I want to sort array B name by array A's field my goal is like this

arrayB = [
    { name: 'format4', type: 'text' },
    { name: 'format2', type: 'text' },
    { name: 'format1', type: 'text' },
    { name: 'format3', type: 'text' }
];

I thought like this but this is not my goal.

arrayB = arrayA.map((a) => {
    return arrayB.filter((b) => {
        return a.field === b.name 
    });
});

please give me a advise for accomplish my goal.

Answer 1

If you are comfortable using ES6 features, you can use Array.findIndex to get the index and return difference

Array.findIndex

 var arrayA = [{attr1: "text", attr2: true, field: "format4"}, {attr1: "text", attr2: true, field: "format2"}, {attr1: "text", attr2: true, field: "format1"}, {attr1: "text", attr2: true, field: "format3"}]; var arrayB = [ { name: 'format1', type: 'text' }, { name: 'format2', type: 'text' }, { name: 'format3', type: 'text' }, { name: 'format4', type: 'text' }]; function getIndexInArrayA(name) { return arrayA.findIndex(function(obj){ return obj.field === name}) } arrayB.sort(function(a, b) { return getIndexInArrayA(a.name) - getIndexInArrayA(b.name); }); console.log(arrayB) 

HashMap

Loop over array and create a map that holds name and index. This way you do not need to loop over array to get index.

Note: This is more preferred as it involves less iterations. retrieving data from object is faster than getting index form array.

 var arrayA = [{attr1: "text", attr2: true, field: "format4"}, {attr1: "text", attr2: true, field: "format2"}, {attr1: "text", attr2: true, field: "format1"}, {attr1: "text", attr2: true, field: "format3"}]; var arrayB = [ { name: 'format1', type: 'text' }, { name: 'format2', type: 'text' }, { name: 'format3', type: 'text' }, { name: 'format4', type: 'text' }]; var indexNameMap = arrayA.reduce(function(acc, obj, i) { acc[obj.field] = i; return acc; }, {}) arrayB.sort(function(a, b) { return indexNameMap[a.name] - indexNameMap[b.name]; }); console.log(arrayB) 

Answer 2

You can try following

 var arrayA = [{attr1: "text", attr2: true, field: "format4"}, {attr1: "text", attr2: true, field: "format2"}, {attr1: "text", attr2: true, field: "format1"}, {attr1: "text", attr2: true, field: "format3"}]; var arrayB = [ { name: 'format1', type: 'text' }, { name: 'format2', type: 'text' }, { name: 'format3', type: 'text' }, { name: 'format4', type: 'text' }]; // Create a temporary array of fields of array A var tempArr = arrayA.map(function(item) { return item.field; }); // Create custom sort function to sort based on temp Arr arrayB.sort(function(a, b) { return tempArr.indexOf(a.name) - tempArr.indexOf(b.name); }) console.log(arrayB); 

Answer 3

另一个解决方案：

const res = _.map(arrayA, a => _.find(arrayB, { name: a.field }));