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

Answer 1

Maybe you could try this:

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

Answer 2

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