环形槽嵌套对象，并在html上打印对象键和值

Question

我想创建带有类别（语言）和子级（复选框）的controlgroup。我对所发现的资源有些困惑，是应该使用map / filter / redude还是应该使用Objects.key，Objects.value和for in loops。

我可以通过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))

Here是正在运行的示例

Answer 1

请考虑以下内容：

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/