how to sort an array in comparison to another array

Question

let selected_variation = [{
    "type": "Capacity",
    "value": "512G",
  },
  {
    "type": "Color",
    "value": "#000000",
  }
]

let attributes = [{
    "id": "Color",
    "name": "Color",
    "type": "swatch",
    "items": [{
        "displayValue": "Green",
        "value": "#44FF03",
        "id": "Green"
      },
      {
        "displayValue": "Cyan",
        "value": "#03FFF7",
        "id": "Cyan"
      },
      {
        "displayValue": "Blue",
        "value": "#030BFF",
        "id": "Blue"
      },
      {
        "displayValue": "Black",
        "value": "#000000",
        "id": "Black"
      },
      {
        "displayValue": "White",
        "value": "#FFFFFF",
        "id": "White"
      }
    ]
  },
  {
    "id": "Capacity",
    "name": "Capacity",
    "type": "text",
    "items": [{
        "displayValue": "512G",
        "value": "512G",
        "id": "512G"
      },
      {
        "displayValue": "1T",
        "value": "1T",
        "id": "1T"
      }
    ]
  }
]

so I have these two arrays one I am creating to track the selected variation of the product from the user there is a bug in it the order of the variation in my created array depends on which order the user clicks on the input fields I need to map my array in the order of the resulted api and the variations are not fixed it actually varies according to the product so my expected output

Output

let selected_variation = [
   {"type":"Color","value":"#000000"},
   {"type":"Capacity","value":"512G"}
]

the same order the API is following

Does this answer your question? [Javascript - sort array based on another array](https://stackoverflow.com/questions/13304543/javascript-sort-array-based-on-another-array) — mahan, May 30 '22 at 07:47

score 1 · Accepted Answer · answered May 30 '22 at 07:53

1

Maybe you could try this:

const order = attributes.map((attribute) =>
  selected_variation.find((v) => v.type === attribute.id)
);

console.log(order)

answered May 30 '22 at 07:53

Leroy

56
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 30 '22 at 08:56

EzioMercer · Answer 2 · 2022-05-30T11:32:55.873

Based on accepted answer of this question: Javascript - sort array based on another array

const selected_variation = [{
    "type": "Capacity",
    "value": "512G",
  },
  {
    "type": "Color",
    "value": "#000000",
  }
]

const attributes = [{
    "id": "Color",
    "name": "Color",
    "type": "swatch",
    "items": [{
        "displayValue": "Green",
        "value": "#44FF03",
        "id": "Green"
      },
      {
        "displayValue": "Cyan",
        "value": "#03FFF7",
        "id": "Cyan"
      },
      {
        "displayValue": "Blue",
        "value": "#030BFF",
        "id": "Blue"
      },
      {
        "displayValue": "Black",
        "value": "#000000",
        "id": "Black"
      },
      {
        "displayValue": "White",
        "value": "#FFFFFF",
        "id": "White"
      }
    ]
  },
  {
    "id": "Capacity",
    "name": "Capacity",
    "type": "text",
    "items": [{
        "displayValue": "512G",
        "value": "512G",
        "id": "512G"
      },
      {
        "displayValue": "1T",
        "value": "1T",
        "id": "1T"
      }
    ]
  }
]

selected_variation.sort((a, b) => {  
  return attributes.findIndex(attr => attr.id === a.type) - attributes.findIndex(attr => attr.id === b.type);
});

console.log(selected_variation);

But it will work really long if there will be a lot of elements because we must to loop through attributes array twice for each pair again and again. But if we will use a little more memory we can greatly optimize the algorithm. The main idea is to create a dictionary where the keys are ids of attributes and values are they index in attributes array:

const selected_variation = [{
    "type": "Capacity",
    "value": "512G",
  },
  {
    "type": "Color",
    "value": "#000000",
  }
]

const attributes = [{
    "id": "Color",
    "name": "Color",
    "type": "swatch",
    "items": [{
        "displayValue": "Green",
        "value": "#44FF03",
        "id": "Green"
      },
      {
        "displayValue": "Cyan",
        "value": "#03FFF7",
        "id": "Cyan"
      },
      {
        "displayValue": "Blue",
        "value": "#030BFF",
        "id": "Blue"
      },
      {
        "displayValue": "Black",
        "value": "#000000",
        "id": "Black"
      },
      {
        "displayValue": "White",
        "value": "#FFFFFF",
        "id": "White"
      }
    ]
  },
  {
    "id": "Capacity",
    "name": "Capacity",
    "type": "text",
    "items": [{
        "displayValue": "512G",
        "value": "512G",
        "id": "512G"
      },
      {
        "displayValue": "1T",
        "value": "1T",
        "id": "1T"
      }
    ]
  }
]

const attributesMap = new Map();

attributes.forEach((attribute, index) => attributesMap.set(attribute.id, index))

selected_variation.sort((a, b) => attributesMap.get(a.type) - attributesMap.get(b.type));

console.log(selected_variation);

how to sort an array in comparison to another array

Output

2 Answers2