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" } ] } ]entonces tengo estas dos matrices, una que estoy creando para rastrear la variación seleccionada del producto del usuario, hay un error en ella, el orden de la variación en mi matriz creada depende del orden en que el usuario hace clic en los campos de entrada que necesito para asigne mi matriz en el orden de la API resultante y las variaciones no son fijas, en realidad varía según el producto, por lo que mi salida esperada
let selected_variation = [ {"type":"Color","value":"#000000"}, {"type":"Capacity","value":"512G"} ]el mismo orden que sigue la API
Tal vez podrías probar esto:
const order = attributes.map((attribute) => selected_variation.find((v) => v.type === attribute.id) ); console.log(order)Basado en la respuesta aceptada de esta pregunta:Javascript: ordene la matriz según otra matriz
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); Pero funcionará durante mucho tiempo si habrá muchos elementos porque debemos recorrer la matriz de attributes dos veces para cada par una y otra vez. Pero si usamos un poco más de memoria, podemos optimizar mucho el algoritmo. La idea principal es crear un diccionario donde las claves sean identificadores de atributos y los valores estén indexados en la matriz de attributes :
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);