Create a new array from existing array and join each value into one unique value and check if a unique joined value is already set in the new array

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