Combine Nested Array in ES6

Question

I need to combine and display the validationMessages. How do it combine since they are nested?

const errors = [
    {
        "id": "101_1.jpeg",
        "imageValidationMessages": [
            {
                "attribute": "test",
                "validationMessages": [
                    "Error message 1"
                ]
            }
        ]
    }
]


  const errorMessages =
    errors?.length &&
    errors?.imageValidationMessages?.flatMap(
      (o) => o.validationMessages
    )
    
    
    console.log(errorMessages)

Answer 1

const errors = [
    {
        "id": "101_1.jpeg",
        "imageValidationMessages": [
            {
                "attribute": "test",
                "validationMessages": [
                    "Error message 1"
                ]
            }
        ]
    }
]
let arr=errors.map(e=>e.imageValidationMessages.map(p=>p.validationMessages)).flat(2)
console.log(arr)

---

const errors = [
    {
        "id": "101_1.jpeg",
        "imageValidationMessages": [
            {
                "attribute": "test",
                "validationMessages": [
                    "Error message 1"
                ]
            }
        ]
    }
]
let arr=errors.flatMap(e=>e.imageValidationMessages.flatMap(p=>p.validationMessages))
console.log(arr)

Answer 2

You can do something like this

 const errorMessages =
 errors?.length &&
 errors?.flatMap((err => err.imageValidationMessages?.flatMap(
  (o) => o.validationMessages
 )))