遍历字符串字面量中的嵌套数组

huangapple go评论67阅读模式
英文:

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 = [{
    &quot;rebuttalid&quot;: &quot;1684773084111&quot;,
    &quot;attributes&quot;: {
      &quot;name&quot;: &quot;matt&quot;,
      &quot;phone&quot;: &quot;888-888-8888&quot;,
      &quot;response&quot;: &quot;afdadfasdfasdfasdfasdfasfdasdfasdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfa&quot;,
      &quot;creation&quot;: &quot;2023-05-22T16:31:25.079Z&quot;,
      &quot;images&quot;: [
        &quot;completed/1684773084111/responses/1684773084111 responseImage 1.pdf&quot;
      ]
    }
  },
  {
    &quot;rebuttalid&quot;: &quot;1684773183687&quot;,
    &quot;attributes&quot;: {
      &quot;name&quot;: &quot;chad&quot;,
      &quot;phone&quot;: &quot;888-888-8888&quot;,
      &quot;response&quot;: &quot;adfasdfasdfasdfasdfasfdasdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdf&quot;,
      &quot;creation&quot;: &quot;2023-05-22T16:33:04.696Z&quot;,
      &quot;images&quot;: [
        &quot;completed/1684773183687/responses/1684773183687 responseImage 2.pdf&quot;,
        &quot;completed/1684773183687/responses/1684773183687 responseImage 3.pdf&quot;,
        &quot;completed/1684773183687/responses/1684773183687 responseImage 4.pdf&quot;
      ]
    }
  },
  {
    &quot;rebuttalid&quot;: &quot;1684845835720&quot;,
    &quot;attributes&quot;: {
      &quot;name&quot;: &quot;George&quot;,
      &quot;phone&quot;: &quot;888-888-8888&quot;,
      &quot;response&quot;: &quot;adfasdfasdfasdfasdfasdfasdfasdfasdfasdfASDAsdasfdasdfasfdasfdasfdasdfasfdasfdasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasfd&quot;,
      &quot;creation&quot;: &quot;2023-05-23T12:43:57.324Z&quot;,
      &quot;images&quot;: [
        &quot;completed/1684845835720/responses/1684845835720 responseImage 1.pdf&quot;,
        &quot;completed/1684845835720/responses/1684845835720 responseImage 2.pdf&quot;,
        &quot;completed/1684845835720/responses/1684845835720 responseImage 3.pdf&quot;
      ]
    }
  }
]

arr.forEach(element =&gt; {
  $(&#39;#cont&#39;).append(`
  &lt;p class=&quot;body-content&quot;&gt;&lt;strong&gt;Response Date:&lt;/strong&gt;${element.attributes.creation}&lt;/p&gt;
  &lt;p class=&quot;body-content&quot;&gt;&lt;strong&gt;Name:&lt;/strong&gt;${element.attributes.name}&lt;/p&gt;
  &lt;p class=&quot;body-content&quot;&gt;&lt;strong&gt;Response:&lt;/strong&gt;${element.attributes.response}&lt;/p&gt;
`)
})

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id=&#39;cont&#39;&gt;

  &lt;/div&gt;

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

&lt;/html&gt;

<!-- 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 = [{
    &quot;rebuttalid&quot;: &quot;1684773084111&quot;,
    &quot;attributes&quot;: {
      &quot;name&quot;: &quot;matt&quot;,
      &quot;phone&quot;: &quot;888-888-8888&quot;,
      &quot;response&quot;: &quot;afdadfasdfasdfasdfasdfasfdasdfasdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfa&quot;,
      &quot;creation&quot;: &quot;2023-05-22T16:31:25.079Z&quot;,
      &quot;images&quot;: [
        &quot;completed/1684773084111/responses/1684773084111 responseImage 1.pdf&quot;
      ]
    }
  },
  {
    &quot;rebuttalid&quot;: &quot;1684773183687&quot;,
    &quot;attributes&quot;: {
      &quot;name&quot;: &quot;chad&quot;,
      &quot;phone&quot;: &quot;888-888-8888&quot;,
      &quot;response&quot;: &quot;adfasdfasdfasdfasdfasfdasdfasdfasdfasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdf&quot;,
      &quot;creation&quot;: &quot;2023-05-22T16:33:04.696Z&quot;,
      &quot;images&quot;: [
        &quot;completed/1684773183687/responses/1684773183687 responseImage 2.pdf&quot;,
        &quot;completed/1684773183687/responses/1684773183687 responseImage 3.pdf&quot;,
        &quot;completed/1684773183687/responses/1684773183687 responseImage 4.pdf&quot;
      ]
    }
  },
  {
    &quot;rebuttalid&quot;: &quot;1684845835720&quot;,
    &quot;attributes&quot;: {
      &quot;name&quot;: &quot;George&quot;,
      &quot;phone&quot;: &quot;888-888-8888&quot;,
      &quot;response&quot;: &quot;adfasdfasdfasdfasdfasdfasdfasdfasdfasdfASDAsdasfdasdfasfdasfdasfdasdfasfdasfdasdfasfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasfd&quot;,
      &quot;creation&quot;: &quot;2023-05-23T12:43:57.324Z&quot;,
      &quot;images&quot;: [
        &quot;completed/1684845835720/responses/1684845835720 responseImage 1.pdf&quot;,
        &quot;completed/1684845835720/responses/1684845835720 responseImage 2.pdf&quot;,
        &quot;completed/1684845835720/responses/1684845835720 responseImage 3.pdf&quot;
      ]
    }
  }
]

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

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id=&#39;cont&#39;&gt;

  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月25日 02:06:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76326330.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定