遍历具有键/值映射的对象

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

Iterating through object with key/value map

问题

从REST API获取的对象如下所示:

  1. response = {
  2. "0": [
  3. {
  4. "description": "basket",
  5. "color": "red"
  6. },
  7. {
  8. "description": "pillow",
  9. "color": "blue"
  10. },
  11. {
  12. "description": "armchair",
  13. "color": "white"
  14. }
  15. ],
  16. "1" : [
  17. {
  18. "description": "shirt",
  19. "color": "black"
  20. },
  21. {
  22. "description": "pants",
  23. "color": "blue"
  24. }
  25. ]
  26. }

这是我需要在我的视图中显示的内容。

controller.js中,您可以使用以下代码:

  1. self.catKeys = Object.keys(response);
  2. self.catValue = Object.values(response);

view.html中,您可以使用以下代码:

  1. <div ng-repeat="cat in ctrl.catKeys" class="col-md-3">{{ cat }}</div>
  2. <div ng-repeat="val in ctrl.catValue" class="col-md-9">
  3. <div ng-repeat="item in val">
  4. {{ item.description }} {{ item.color }}
  5. </div>
  6. </div>

希望这对您有所帮助。如果有其他问题,请随时提问。

英文:

From the rest api, I get an object like this:

  1. response = {
  2. &quot;0&quot;: [
  3. {
  4. &quot;description&quot;: &quot;basket&quot;,
  5. &quot;color&quot;: &quot;red&quot;
  6. },
  7. {
  8. &quot;description&quot;: &quot;pillow&quot;,
  9. &quot;color&quot;: &quot;blue&quot;
  10. },
  11. {
  12. &quot;description&quot;: &quot;armchair&quot;,
  13. &quot;color&quot;: &quot;white&quot;
  14. }
  15. ],
  16. &quot;1&quot; : [
  17. {
  18. &quot;description&quot;: &quot;shirt&quot;,
  19. &quot;color&quot;: &quot;black&quot;
  20. },
  21. {
  22. &quot;description&quot;: &quot;pants&quot;,
  23. &quot;color&quot;: &quot;blue&quot;
  24. }
  25. ]
  26. }

This is what I need to display in my view:
遍历具有键/值映射的对象

  1. // controller.js
  2. self.catKeys= Object.keys(response)
  3. self.catValue= Object.values(response)

// view.html

  1. &lt;div ng-repeat=&quot;cat in ctrl.catKeys&quot; class=&quot;col-md-3&quot;&gt; {{ cat }} &lt;/div&gt;
  2. &lt;div ng-repeat=&quot;val in ctrl.catValue&quot; class=&quot;col-md-9&quot;&gt;
  3. {{ val[index].description }} {{ val[index].color}}
  4. &lt;/div&gt;

I've also tried many other things but I just cannot get it..please help 遍历具有键/值映射的对象

答案1

得分: 3

使用Array#map将每个项目与其颜色连接起来,然后使用join将它们组合成一个字符串。

  1. for (const [k, v] of Object.entries(response)) {
  2. response[k] = v.map(x => x.color + ' ' + x.description).join(' - ');
  3. }
  4. self.response = response;

然后,显示很简单:

  1. <div ng-repeat="(k, v) in ctrl.response" class="row">
  2. <div class="col-md-3">{{k}}</div>
  3. <div class="col-md-9">{{v}}</div>
  4. </div>
英文:

You can use Array#map to concatenate each item with its color, then join it into one string.

  1. for (const [k, v] of Object.entries(response)) {
  2. response[k] = v.map(x =&gt; x.color + &#39; &#39; + x.description).join(&#39; - &#39;);
  3. }
  4. self.response = response;

Then, displaying is simple:

  1. &lt;div ng-repeat=&quot;(k, v) in ctrl.response&quot; class=&quot;row&quot;&gt;
  2. &lt;div class=&quot;col-md-3&quot;&gt;{{k}}&lt;/div&gt;
  3. &lt;div class=&quot;col-md-9&quot;&gt;{{v}}&lt;/div&gt;
  4. &lt;/div&gt;

huangapple
  • 本文由 发表于 2023年3月31日 04:11:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/75892595.html
匿名

发表评论

匿名网友

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

确定