What is the purpose of life?

Matt
May 24, 2023
281 views
1 vote
2 Answers

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/[email protected]/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

Tags: javascript jquery

Answers

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>

you can modify the existing code by iterating over the images array and appending a new

tag for each image.

<!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://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    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.forEach(image => {
        $('#cont').append(`<p class="body-content"><strong>Image:</strong> ${image}</p>`);
      });
    });
  </script>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.