Создание одного элемента с аргументами, взятыми из объекта - JavaScript - PullRequest
Новая
       27

Создание одного элемента с аргументами, взятыми из объекта - JavaScript

0 голосов
/ 09 апреля 2020

Я хочу создать функцию, которая получает данные из массива и создает соответствующие теги в HTML + соответствующий аргумент. Проблема возникает, когда существует более одного аргумента.

Creation logs IMG

Они образуются, но не вместе, только по отдельности. 

var elem = [[
    // <div class"container"></div> //Example
    ["div", "container"],
    ["form", {method: "POST", name: "contant"}], //Two objects (arguments for html)
    ["div", "box"]
]];
class Form {
    constructor(index) {
        this.index = index;
    };

    createField() {
        for(const marker of elem[this.index]) {
            if(marker[1] instanceof Object) {
                for(var test of Object.keys(marker[1])) {
                    console.log(this.createElement(marker[0], {
                        [test]: marker[1][test]
                    }));
                }
            } else { //If there is no object, it adds a class
                var key = 'class';
                var value = marker[1]
                console.log(this.createElement(marker[0], {
                    [key]: value
                }));
            }
        };
    };

    createElement(elementName, attributes) {
        this.element = this.createElement.call(document, elementName);

        if(attributes && !(attributes instanceof Object)) {
            throw Error('Error attributes');
        } else if(attributes) {
            for(const attr of Object.keys(attributes)) {
                this.element.setAttribute(attr, attributes[attr]);
            };
        };
        return this.element;
    };

I хотел бы, чтобы это содержало эти два аргумента, а не создавалось дважды из одного аргумента

Ответы [ 2 ]

1 голос
/ 09 апреля 2020

Вы передаете атрибуты индивидуально, просто используйте весь объект. 

      if(marker[1] instanceof Object) {

            console.log(this.createElement(marker[0], marker[1]));
        }
0 голосов
/ 09 апреля 2020

Вы можете использовать функцию ниже. Он создаст новые элементы для каждого подмассива и проверит, является ли второй элемент каждого подмассива объектом или строкой, а затем добавит соответствующие атрибуты элемента.

Примечание: I добавлено немного CSS, чтобы созданные элементы можно было легче увидеть в целях тестирования.

Тест ниже: 

var elements = [
    ["div", "container"],
    ["form", {method: "POST", name: "contant"}],
    ["div", "box"]
];

function createElements(list) {
  list.forEach(function(el, i) {
    let elem = document.createElement(el[0]);
    
    if(typeof el[1] == "object") {
      let keys = Object.keys(el[1]);
      for(let attr of keys) {
        elem.setAttribute(attr, el[1][attr]);
      }
    } else if(typeof el[1] == "string"){
      elem.setAttribute("class", el[1]);
    }
    document.body.append(elem);   // append element to body or any other element of your choice
  });
}

createElements(elements);
.container {
  position: relative;
  float:left;
  width: 50px;
  height: 50px;
  background-color: #000;
}

.box {
  position: relative;
  float:left;
  width: 50px;
  height: 50px;
  background-color: #09f;
}

form[name="contant"] {
  position: relative;
  float:left;
  width: 50px;
  height: 50px;
  background-color: #f00;
}
...