map values to an array inside an object

Question

I have this object below

{
  "root": {
    "data": {
      "page": 1,
        "contents": [
          {
            "node": {
              "id": "UzpfSTE",
              "stats": {
                "viewers": {
                  "nodes": [
                    {
                      "id": "1",
                      "name": "John"
                    },
                    {
                      "id": "2",
                      "name": "Shaun"
                    }
                  ]
                }
              }
            }
          },
          {
            "node": {
              "id": "UzpfSTG",
              "stats": {
                "viewers": {
                  "nodes": [
                    {
                      "id": "3",
                      "name": "Liam"
                    }
                  ]
                }
              }
            }
          }
        ]
    }
  }
}

There is contents node, each of them will have many viewers, all I want is to extract all viewers name to an array, in this instance my result will be [John, Shaun, Liam]

I have this approach:

const data = JSON.parse(rt)

const contents = data.root.data.contents
const newArray = []

for (i = 0; i < contents.length; i++) {
  arr2 = contents[i].node.stats.viewers.nodes
  for (n = 0; n < arr2.length; n++) {
    name = arr2[n].name
    newArray.push(name)
  }
}

console.log(newArray)
>>> [John, Shaun, Liam]

Which does the job, but occasionaly the object key names change and I have to alter everytime.

So is there more elegant way to do this?

Answer 1

You can simplify that imperative logic like this. I don't understand what you mean by "the object key names change" though

const data = {
  "root": {
    "data": {
      "page": 1,
      "contents": [{
          "node": {
            "id": "UzpfSTE",
            "stats": {
              "viewers": {
                "nodes": [{
                    "id": "1",
                    "name": "John"
                  },
                  {
                    "id": "2",
                    "name": "Shaun"
                  }
                ]
              }
            }
          }
        },
        {
          "node": {
            "id": "UzpfSTG",
            "stats": {
              "viewers": {
                "nodes": [{
                  "id": "3",
                  "name": "Liam"
                }]
              }
            }
          }
        }
      ]
    }
  }
}

const names = data.root.data.contents.flatMap(({
  node: {
    stats: {
      viewers: {
        nodes
      }
    }
  }
}) => nodes.map(({
  name
}) => name))
console.log(names)

Answer 2

const data = JSON.parse(rt)
const contents = data.root.data.contents
const viewers = contents.map(item => item.node.stats.viewers.nodes).flat()
const viewerNames = viewers.map(viewer => viewer.name)