iterate through nested array in string literal

May 24, 2023

How can I add a new image p tag for each of the images in the nested array. Here is what I have thus far:

let arr = [{
    "rebuttalid": "1684773084111",
    "attributes": {
      "name": "matt",
      "phone": "888-888-8888",
      "response": "afdadfasdfasdfasdfasdfasfdasdfasdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfa",
      "creation": "2023-05-22T16:31:25.079Z",
      "images": [
        "completed/1684773084111/responses/1684773084111 responseImage 1.pdf"
      ]
    }
  },
  {
    "rebuttalid": "1684773183687",
    "attributes": {
      "name": "chad",
      "phone": "888-888-8888",
      "response": "adfasdfasdfasdfasdfasfdasdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdf",
      "creation": "2023-05-22T16:33:04.696Z",
      "images": [
        "completed/1684773183687/responses/1684773183687 responseImage 2.pdf",
        "completed/1684773183687/responses/1684773183687 responseImage 3.pdf",
        "completed/1684773183687/responses/1684773183687 responseImage 4.pdf"
      ]
    }
  },
  {
    "rebuttalid": "1684845835720",
    "attributes": {
      "name": "George",
      "phone": "888-888-8888",
      "response": "adfasdfasdfasdfasdfasdfasdfasdfasdfasdfASDAsdasfdasdfasfdasfdasfdasdfasfdasfdasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasfd",
      "creation": "2023-05-23T12:43:57.324Z",
      "images": [
        "completed/1684845835720/responses/1684845835720 responseImage 1.pdf",
        "completed/1684845835720/responses/1684845835720 responseImage 2.pdf",
        "completed/1684845835720/responses/1684845835720 responseImage 3.pdf"
      ]
    }
  }
]

arr.forEach(element => {
  $('#cont').append(`
  <p class="body-content"><strong>Response Date:</strong>${element.attributes.creation}</p>
  <p class="body-content"><strong>Name:</strong>${element.attributes.name}</p>
  <p class="body-content"><strong>Response:</strong>${element.attributes.response}</p>
`)
})

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id='cont'>

  </div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
</body>

</html>

For an example, I’d like the output to look like this for the second object:

Name:chad

Response:adfasdfasdfasdfasdfasfdasdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasd

Response Date:2023-05-23T12:43:57.324Z

Image: completed/1684773183687/responses/1684773183687 responseImage 2.pdf

Image: completed/1684773183687/responses/1684773183687 responseImage 3.pdf

Image: completed/1684773183687/responses/1684773183687 responseImage 4.pdf

>Solution :

Add a nested loop over element.attributes.images.

let arr = [{
    "rebuttalid": "1684773084111",
    "attributes": {
      "name": "matt",
      "phone": "888-888-8888",
      "response": "afdadfasdfasdfasdfasdfasfdasdfasdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfa",
      "creation": "2023-05-22T16:31:25.079Z",
      "images": [
        "completed/1684773084111/responses/1684773084111 responseImage 1.pdf"
      ]
    }
  },
  {
    "rebuttalid": "1684773183687",
    "attributes": {
      "name": "chad",
      "phone": "888-888-8888",
      "response": "adfasdfasdfasdfasdfasfdasdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdf",
      "creation": "2023-05-22T16:33:04.696Z",
      "images": [
        "completed/1684773183687/responses/1684773183687 responseImage 2.pdf",
        "completed/1684773183687/responses/1684773183687 responseImage 3.pdf",
        "completed/1684773183687/responses/1684773183687 responseImage 4.pdf"
      ]
    }
  },
  {
    "rebuttalid": "1684845835720",
    "attributes": {
      "name": "George",
      "phone": "888-888-8888",
      "response": "adfasdfasdfasdfasdfasdfasdfasdfasdfasdfASDAsdasfdasdfasfdasfdasfdasdfasfdasfdasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasfd",
      "creation": "2023-05-23T12:43:57.324Z",
      "images": [
        "completed/1684845835720/responses/1684845835720 responseImage 1.pdf",
        "completed/1684845835720/responses/1684845835720 responseImage 2.pdf",
        "completed/1684845835720/responses/1684845835720 responseImage 3.pdf"
      ]
    }
  }
]

arr.forEach(element => {
  $('#cont').append(`
  <p class="body-content"><strong>Response Date:</strong>${element.attributes.creation}</p>
  <p class="body-content"><strong>Name:</strong>${element.attributes.name}</p>
  <p class="body-content"><strong>Response:</strong>${element.attributes.response}</p>
` + element.attributes.images.map(image => `<p class="body-content"><strong>Image: </strong>${image}</p>`).join(''));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id='cont'>

  </div>
</body>

</html>