英文:
iterate through nested array in string literal
问题
<!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>
英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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>
`)
})
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
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
答案1
得分: 1
在element.attributes.images
上添加一个嵌套循环。
英文:
Add a nested loop over element.attributes.images
.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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(''));
})
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论