L oop через вложенные объекты и печать ключей и значений объектов на html - PullRequest
Новая
       10

L oop через вложенные объекты и печать ключей и значений объектов на html

0 голосов
/ 26 мая 2020

Я хочу создать controlgroup с категориями (языками) и дочерними элементами (флажок). Я немного запутался в поиске ресурсов, если я должен использовать map / filter / redude или должен ли я использовать Objects.key, Objects.value и for в циклах.

Я могу получить к l oop через дочерние элементы с map, но я не могу добраться до go на внешнем l oop. 

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

Здесь - работающий пример

1 Ответ

1 голос
/ 26 мая 2020

Учитывайте следующее:

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/

...