时间戳

首页 > 解决方案 > 循环嵌套对象并在 html 上打印对象键和值

javascript - 循环嵌套对象并在 html 上打印对象键和值

问题描述

我想创建一个controlgroup包含类别（语言）和子项（复选框）的类别。我对我找到的资源有点困惑，我应该使用 map/filter/redude 还是应该使用 Objects.key、Objects.value 和 for in 循环。

我可以通过孩子们循环，map但我不能继续外循环。

obj = [
  {
    "javascript": [
      {"product": "1234"},
      {"product": "4321"}
    ]
  },
  {
    "python": [
      {"product": "9876"}
    ]
  }
];

// This is what I'm trying
const mountControlgroup = (language) => {
  return (
    language.map( (element) => (
      `<label for="ticker_id1">${element.product}</label>
       <input type="checkbox" name="insurance" id="${element.product}">` 
    ))
  )
} 

console.log(mountControlgroup(obj))

这是一个运行示例

标签： javascripthtmljquery-ui

解决方案

考虑以下：

https://jsfiddle.net/Twisty/edon2utx/20/

HTML

<div class="widget">
  <h1>Controlgroup</h1>
</div>

JavaScript

$(function() {
  var myObj = [{
      "javascript": [{
          "product": "1234"
        },
        {
          "product": "4321"
        }
      ]
    },
    {
      "python": [{
        "product": "9876"
      }]
    }
  ];

  function makeGroup(dObj, tObj, vert) {
    var keys = Object.keys(dObj);
    var fs = $("<fieldset>").appendTo(tObj);
    var legend = $("<legend>").html(keys[0]).appendTo(fs);
    var cg = $("<div>", {
      class: "controlgroup"
    }).appendTo(fs);
    $.each(dObj[keys[0]], function(k, v) {
      $("<label>", {
        for: "ticker-" + v.product
      }).html(v.product).appendTo(cg);
      $("<input>", {
        type: "checkbox",
        name: "insurance",
        value: v.product,
        id: "ticker-" + v.product
      }).appendTo(cg);
    });
    if (vert == undefined) {
      cg.controlgroup();
    } else {
      cg.controlgroup({
        "direction": "vertical"
      });
    }
  }

  $.each(myObj, function(i, g) {
    makeGroup(g, $(".widget"));
  });
});

你的小提琴有很多问题。我先纠正了这些。

关于迭代你的对象，有很多方法可以做到这一点。我构建了一个构建一个组的函数，主要使用以下模板：

<fieldset>
  <legend>{Key}</legend>
  <div class="controlgroup">
    <label for="ticker-{Value}">{Value}/label>
    <input type="checkbox" name="insurance" value="{Value}" id="ticker-{Value}">
  </div>
</fieldset>

每个组都需要一个fieldset，这将成为该组中所有控制元素的容器。

如果你有一个垂直控件，你可以像这样使用它：

makeGroup({ php: [{ product: 9876 }] }, $(".widget"), true);

最后一个参数是可选的。示例：https ://jsfiddle.net/Twisty/edon2utx/26/

推荐阅读