Find value in an object and set the value in another object

I have two objects with a structure like below:

const pageContent = 
[
    {
        header: 'title 1',
        subHeader: [ 'subtitle 1']
    },
    {
        header: 'title 2',
        subHeader: [  ]
    },
    {
        header: 'title 3',
        subHeader: [ 'subtitle 2', 'subtitle 3', 'subtitle 4' ]
    }
]

const subPageContent = 
[
    {
        masterHeader: ' ', // === header: 'title 1'
        header: [ 'subtitle 1' ]
    },
    {
        masterHeader: ' ', // === header: 'title 3'
        header: [ 'subtitle 2' ]
    },
    {
        masterHeader: ' ', // === header: 'title 3'
        header: [ 'subtitle 3' ]
    },
    {
        masterHeader: ' ', // === header: 'title 3'
        header: [ 'subtitle 4' ]
    }
]

EDIT-NOTE: subPageContent-Object was wrong defined.

At the moment, both objects are separated, but will be concatenated in a further step. However, I need for each 'header' of subPageContent the corresponding 'masterHeader', which can be found within the pageContent as 'header'

So what I have is:

function search(searchTerm, array){
    for ( let i = 0; i < array.length; i  ) {
        if ( array[i].subHeader[i] === searchTerm ) {
            return array[i].header
        }
    }
}

let searchTerm = 'subtitle 1'
let resultObject = search(searchTerm, pageContent)

This works fine, in case I have only one value within my subHeader-Array of pageContent.

I struggle with the iteration over an array with more than one value. I thought I would do a second for loop and then return the corresponding header:

function searchTwo(searchTerm, array) {
    for ( let i = 0; i < array.length; i  ) {
        for ( let j = 0; j < array[j].length; j  ) {
            if ( array[j].subHeader[j] === searchTerm ) {
                return array[j].header
            }
        }
    }
}

Does anyone know, how i can loop over an array within an object? And once I found that object set the header as masterHeader value within the subPageContent?

The next step, would be, to build a forEach-Loop, so it will search the missing masterHeader for each element within the subPageContent-Object.

CodePudding user response：

As @pilchard mentioned in the comments, you can use Array.find in conjunction with Array.includes to implement your search function where the subHeader property is an array. You can then use this function in combination with a forEach to update the subPageContent array with the masterHeader values:

const pageContent = 
[
    {   header: 'title 1',  subHeader: [ 'subtitle 1']  },
    {   header: 'title 2',  subHeader: [  ]  },
    {   header: 'title 3',  subHeader: [ 'subtitle 2', 'subtitle 3', 'subtitle 4' ]  }
]

const subPageContent = 
[
    {   masterHeader: ' ',  header: [ 'subtitle 1' ]  },
    {   masterHeader: ' ',  header: [ 'subtitle 2' ]  },
    {   masterHeader: ' ',  header: [ 'subtitle 3' ]  },
    {   masterHeader: ' ',  header: [ 'subtitle 4' ]  }
]

function search(searchTerm, array) {
    return array.find(({ subHeader }) => subHeader.includes(searchTerm))?.header
}

subPageContent.forEach(o => o.masterHeader = search(o.header[0], pageContent) || o.masterHeader)

console.log(subPageContent)

Note we use || o.masterHeader in the updater so that if the header value is not found in any subHeader array (in which case search will return undefined), the value of masterHeader remains what it was.