перебирать вложенный массив в строковом литерале

Question

Как я могу добавить новый тег изображения p для каждого изображения во вложенном массиве. Вот что у меня есть до сих пор:

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>

Например, я бы хотел, чтобы вывод для второго объекта выглядел так:

Имя: Чад

Ответ:adfasdfasdfasdfasdfasfdasdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasd

Дата ответа:2023-05-23T12:43:57.324Z

Изображение: завершено/1684773183687/ответы/1684773183687 responseImage 2.pdf

Изображение: завершено/1684773183687/ответы/1684773183687 responseImage 3.pdf

Изображение: завершено/1684773183687/ответы/1684773183687 responseImage 4.pdf

javascript jquery

0

Matt 24 Май 2023 в 21:06

1

Проблема с вашим примером заключается в том, что вы не включили jQuery в свой файл, поэтому, очевидно, он не будет работать.

–

code

24 Май 2023 в 21:11

1

Вам нужен вложенный цикл element.attributes.images.forEach()

–

Barmar

24 Май 2023 в 21:13

Соответствующий код должен быть включен в виде форматированного текста в сам вопрос. Неясно, в чем конкретная проблема; вам нужно будет перебрать объекты верхнего уровня, получить свойство attributes и перебрать attributes.images.

–

Dave Newton

24 Май 2023 в 21:13

Если вы хотите избежать использования jQuery, загляните в insertAdjacentHTML или еще лучше, если вы хотите создать элементы, которые вы можете использовать вставить соседний элемент

–

Daniel Black

24 Май 2023 в 21:14

Answer 1

Добавьте вложенный цикл поверх 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>

1

Barmar 24 Май 2023 в 21:19

Answer 2

Вы можете изменить существующий код, перебирая массив изображений и добавляя новый

Тег для каждого изображения.

<!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>

0

Dhananjaya Dutt Mishra 24 Май 2023 в 21:41

перебирать вложенный массив в строковом литерале

2 ответа

Новые вопросы

javascript