javascript - How to split the array of objects from json?

Question

Could you please split the each content.rendered from array of json as mentioned in the sippet?How to split this json data using javascript?How to split this json data using javascript? And I want store content.rendered json in the different variables are description as first p tag, image as second p tag, file as third p tag to display it in the html page.

const str = `{
   "author": 1,
   "content": {
      "rendered": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n<p><a href="file.pdf"></a></p>\n<p><img src="image.jpg"/></p>",
      "protected": false
   }
}`
let json = JSON.parse(str)
let content = document.createElement('div')
content.innerHTML = json.content.rendered

let description = content.querySelector('p').innerText
let image = content.querySelector('img').src
let file = content.querySelector('a').href

let result = {
  description,
  image,
  file
}

 [{
           "author": 1,
           "content": {
              "rendered": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
<p><a href="file.pdf"></a></p>
<p><img src="image.jpg"/></p>",
              "protected": false
           }
        },
        {
           "author": 1,
           "content": {
              "rendered": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
<p><a href="file.pdf"></a></p>
<p><img src="image.jpg"/></p>",
              "protected": false
           }
        },
        {
           "author": 1,
           "content": {
              "rendered": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
<p><a href="file.pdf"></a></p>
<p><img src="image.jpg"/></p>",
              "protected": false
           }
        }]

Answer 1

You can use map on your array.

So based on my previous answer, this is how you can achieve that.

const myArray = [
    {
        author: 1,
        content: {
            rendered:
                '<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
<p><a href="file.pdf"></a></p>
<p><img src="image.jpg"/></p>',
            protected: false
        }
    },
    {
        author: 1,
        content: {
            rendered:
                '<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
<p><a href="file.pdf"></a></p>
<p><img src="image.jpg"/></p>',
            protected: false
        }
    },
    {
        author: 1,
        content: {
            rendered:
                '<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
<p><a href="file.pdf"></a></p>
<p><img src="image.jpg"/></p>',
            protected: false
        }
    }
]

const extractData = obj => {
    let content = document.createElement('div')
    content.innerHTML = obj.content.rendered

    let description = content.querySelector('p').innerText
    let image = content.querySelector('img').src
    let file = content.querySelector('a').href

    return {
        description,
        image,
        file
    }
}

const results = myArray.map(extractData)