Compare json arrays and result in a simple array

Question

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"]]

Terry Lennox · Accepted Answer · 2021-12-01 09:57:40Z

3

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

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

edited Dec 1, 2021 at 9:57

answered Dec 1, 2021 at 8:36

Terry Lennox

30.9k5 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FrontEndDeveloper Over a year ago

it seems to work but if Array2 has less data like this [ { header: "Header 1", footer: "Footer 1" }, { header: "Header 2" }] I wanted the result to be like[["Header 1","Header 2"],["Footer 1",null]] . Is that possible?

Terry Lennox Over a year ago

Sure, that's a small change. I've updated the answer and included a second snippet with that use case. Hope that help!

eroironico · Accepted Answer · 2021-12-01 08:41:49Z

1

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

edited Dec 1, 2021 at 8:41

answered Dec 1, 2021 at 8:35

eroironico

1,4307 silver badges18 bronze badges

Comments

Alan Omar · Accepted Answer · 2021-12-01 08:43:19Z

1

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)

answered Dec 1, 2021 at 8:43

Alan Omar

4,2871 gold badge13 silver badges26 bronze badges

Comments

Nitheesh · Accepted Answer · 2021-12-01 08:52:30Z

1

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

answered Dec 1, 2021 at 8:52

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

Compare json arrays and result in a simple array

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related