Home > OS >  Compare json arrays and result in a simple array
Compare json arrays and result in a simple array

Time:12-02

I have two JSONS and i have to create an array from it

Array1: [{ label: "HEADER" value:"header" }, { label: "FOOTER" value:"footer" }]

Array2: [ { header: "Header 1", footer: "Footer 1" }, { header: "Header 2", footer: "Footer 2" }]

Expected Array(The label of Array1 will be the search criteria from Array2 Keys : [["Header 1","Header 2"],["Footer 1","Footer 2"]]

CodePudding user response:

You could use Array.map() on Array1, then for each value in this array, run .map() again, returning all matching items in Array2.

We'd use Array.find() and String.includes() to do this.

const Array1 = [ { label: "HEADER", value:"header" }, { label: "FOOTER", value:"footer" } ]  
const Array2 = [ { header: "Header 1", footer: "Footer 1" }, { header: "Header 2", footer: "Footer 2" } ]

const result = Array1.map(({ label, value}) => { 
    return Array2.map((obj) => { 
        let key = Object.keys(obj).find(key => key.includes(value));
        return key ? obj[key]: null;
    })
})
console.log('Result:', result);
        
.as-console-wrapper { max-height: 100% !important; top: 0; }
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Another example, this time Array2 has an entry with no footer property (as requested):

const Array1 = [ { label: "HEADER", value:"header" }, { label: "FOOTER", value:"footer" } ]  
const Array2 =  [ { header: "Header 1", footer: "Footer 1" }, { header: "Header 2" }]

const result = Array1.map(({ label, value}) => { 
    return Array2.map((obj) => { 
        let key = Object.keys(obj).find(key => key.includes(value));
        return key ? obj[key]: null;
    })
})
console.log('Result:', result);
        
.as-console-wrapper { max-height: 100% !important; top: 0; }
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

I'm taking for granted that array1 values can only contain 'header' | 'footer' and that each array2 item has a header and a footer property since it's not specified. So it would be:

const array1 = JSON.parse(/* JSON1 file content */);
const array2 = JSON.parse(/* JSON2 file content */);

const result = array1.map(item1 => {
    const criteria = item1.label.toLowerCase();
    return array2.map(item2 => item2[criteria]);
});

CodePudding user response:

let Array1=[{label:"HEADER",value:"header",},{label:"FOOTER",value:"footer",}] ,Array2=[{header:"Header 1",footer:"Footer 1"},{header:"Header 2",footer:"Footer 2"}]

let result = Array1.map(e => e.label.toLowerCase())
                   .map(s => Array2.map(n => n[s]))

console.log(result)
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

A simple double Array.map will help.

Logic

  • First Array.map will return the values from first array arr1.
  • Second Array.map will return elements from second array arr2 with keys as value from arr1

const arr1 = [{ label: "HEADER", value: "header" }, { label: "FOOTER", value: "footer" }]
const arr2 = [{ header: "Header 1", footer: "Footer 1" }, { header: "Header 2", footer: "Footer 2" }];
const output = arr1.map(item => arr2.map(node => node[item.value]));
console.log(output);
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related