jquery 遍历字符串中嵌套数组

gupuwyp2 于 12个月前发布在 jQuery

关注(0)|答案(1)|浏览(140)

如何为嵌套数组中的每个图像添加一个新的图像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>

例如，我希望第二个对象的输出如下所示：
Name：life's a game
响应：adfasdfasdfasdfasdfasd
回复日期：2023-05- 23 T12：43：57.324Z
图片：已完成/1684773183687/responses/1684773183687 responseImage 2.pdf
图片：已完成/1684773183687/responses/1684773183687 responseImage 3.pdf
图片：已完成/1684773183687/responses/1684773183687 responseImage 4.pdf

jquery

来源：https://stackoverflow.com/questions/76326330/iterate-through-nested-array-in-string-literal

1条答案

按热度按时间

x6h2sr281#

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

赞(0）回复(0）举报 12个月前

我来回答

jquery 遍历字符串中嵌套数组

1条答案

相关问题

热门标签

最新问答