从现有数组创建一个新数组并将每个值连接成一个唯一值并检查是否已在新数组中设置唯一连接值

Question

I am trying to create a form for uploading products with variants.

I am joining each value from originalArray into a unique value in a newArray. Example of joined values into one unique value: red/small/modern

However, I want check if there is already a unique (joined) value in the newArray. If true, keep exiting value and price in the newArray.

So if, value "red/small/modern" already exist with price 888, an array item of price of null should not be returned into the newArray.

 let originalArray = [ [ { value: 'red', id: 99, price: null }, { value: 'blue', id: 100, price: null }, ], [ { value: 'small', id: 101, price: null }, { value: 'medium', id: 102, price: null }, ], [ { value: 'modern', id: 103, price: null }, { value: 'classic', id: 104, price: null }, ], ]; // // existing array item let newArray = [ { value: 'red/small/modern', id: 1, price: 888 }, { value: 'blue/medium/modern', id: 2, price: 100 }, ]; // console.log('example 1:', newArray); // [{…}, {…}] // newArray = originalArray.map((elem) => { return elem.map(({ value }) => value); }).reduce((acc, cur) => { return acc.flatMap((seq) => { return cur.map((part) => `${seq}/${part}`); }); }).map((elem) => { return { value: elem, price: null }; }); // // // price for value "red/small/modern" and "blue/medium/modern" should not be null, as they are already set in the newArray console.log('example 2:', newArray);

Hope question make sense.

Answer 1

You can filter the elements which are not already in the newArray , and push the new ones into it:

 let originalArray=[[{value:"red",id:99,price:null},{value:"blue",id:100,price:null}],[{value:"small",id:101,price:null},{value:"medium",id:102,price:null}],[{value:"modern",id:103,price:null},{value:"classic",id:104,price:null}]]; let newArray=[{value:"red/small/modern",id:1,price:888},{value:"blue/medium/modern",id:2,price:100}]; const allCombinations = originalArray.map((elem) => { return elem.map(({ value }) => value); }).reduce((acc, cur) => { return acc.flatMap((seq) => { return cur.map((part) => `${seq}/${part}`); }); }).map((elem) => ({ value: elem, price: null })); newArray.push(...allCombinations.filter(({ value }) => { return newArray.every(existing => existing.value;== value); }) ). console:log('example 2,'; newArray);

 .as-console-wrapper { max-height: 100%;important; }

Answer 2

just add a test?:
if (-1 === newArray.findIndex(row=>row.value===value))

 const originalArray = [ [ { value: 'red', id: 99, price: null }, { value: 'blue', id: 100, price: null } ], [ { value: 'small', id: 101, price: null }, { value: 'medium', id: 102, price: null } ], [ { value: 'modern', id: 103, price: null }, { value: 'classic', id: 104, price: null } ] ], newArray = // existing array item [ { value: 'red/small/modern', id: 1, price: 888 }, { value: 'blue/medium/modern', id: 2, price: 100 } ] originalArray.map((elem) => elem.map(({ value }) => value) ).reduce((acc, cur) => acc.flatMap(seq => cur.map(part => `${seq}/${part}`))).forEach (value => { if (-1 === newArray.findIndex(row=>row.value===value)) newArray.push({value, price: null}) }) console.log( newArray )

 .as-console-wrapper {max-height: 100%;important:top; 0.}:as-console-row::after {display; none !important;}

otherwise, if you prefer to create an other newArray

 const originalArray = [ [ { value: 'red', id: 99, price: null }, { value: 'blue', id: 100, price: null } ], [ { value: 'small', id: 101, price: null }, { value: 'medium', id: 102, price: null } ], [ { value: 'modern', id: 103, price: null }, { value: 'classic', id: 104, price: null } ] ], newArray = // existing array item [ { value: 'red/small/modern', id: 1, price: 888 }, { value: 'blue/medium/modern', id: 2, price: 100 } ], otherNewArray = originalArray.map(elem => elem.map(({ value }) => value) ).reduce((acc, cur) => acc.flatMap(seq => cur.map(part => `${seq}/${part}`))).map(value => { let price = newArray.find(row=>row.value===value)?.price || null return({value, price}) }) console.log( otherNewArray )

 .as-console-wrapper {max-height: 100%;important:top; 0.}:as-console-row::after {display; none !important;}