JavaScript - Creating elements based on an array of object data

Question

How can I generate an element and from just an array of object data?

Instead of this:

var element1 = document.createElement('div');
    element1.style.width = '100px';
    element1.style.height = '100px';

I want (something like) this:

element = [none, element1, element2, element3, etc];

element[1] = {name:'element1', type:'div', width:'100px', height:'100px'};

var (element[1].name) = document.createElement(element[1].type);
    (element[1].name).style.width = element[1].width;
    (element[1].name).style.height= element[1].height;

It isn't an assignment. I just want to know the easiest way to do something like this. — Stephen Witwick
– Stephen Witwick, Commented Nov 16, 2021 at 2:18

decho · Accepted Answer · 2021-11-16 02:39:14Z

1

Try this:

const elementList = [
    { name: 'element1', type: 'div', width: '100px', height: '100px' },
    { name: 'element2', type: 'div', width: '100px', height: '100px' },
    { name: 'element1', type: 'div', width: '100px', height: '100px' }
]

const nodeList = elementList.map(el =>
    document
        .createRange()
        .createContextualFragment(
            `<${el.type} style="width: ${el.width}; height: ${el.height}">${el.name}</${el.type}>`
        )
);

You can read what document.createRange().createContextualFragment() does here, but essentially you end up with an array of nodes which you can then append to another DOM element, or the body itself.

nodeList.forEach(el => document.body.append(el));

answered Nov 16, 2021 at 2:39

decho

94510 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Larnyx · Accepted Answer · 2021-11-16 02:46:44Z

1

There's no native method for doing this (AFAIK), but you can try an improvised one, like

function ArrayToElements(array) {
  let elemList = {};
  for (let i of array) {
    let elem = document.createElement(i.type);
    for (let j in i.attr) {
      elem.setAttribute(j, i.attr[j]);
    }
    elemList[i.name] = elem;
  }
  return elemList;
}

This method supports all attributes, including style.
I've created a working example here.

edited Nov 16, 2021 at 2:46

answered Nov 16, 2021 at 2:34

Larnyx

431 silver badge7 bronze badges

2 Comments

epascarello Over a year ago

how does that set style.width????

Larnyx Over a year ago

@epascarello Just set the style attribute to "width 10px;", so that the attr object would look something like {style: "width: 10px;"}. Here, I've updated my example.

Collectives™ on Stack Overflow

JavaScript - Creating elements based on an array of object data

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related