Dynamically setting values to an array of objects in Javascript

Question

How can I get this to work?

Trying to set an array of blocks containing block objects...

var blocks = [];
var block  = {
  type: null,
  color: null
};

var dom_blocks = document.querySelectorAll('.block');

for( var i= 0, ii = dom_blocks.length; i < ii; i++) {
  blocks[i] = Object.create(block);
  blocks[i].block = dom_blocks[i].dataset.type;        // this kills my object
  blocks[i].block.color = dom_blocks[i].dataset.color; // this ain't working
}

console.log(blocks);

<div class="block" data-type="false" data-color="red"></div>
<div class="block" data-type="true"  data-color="green"></div>
<div class="block" data-type="true"  data-color="orange"></div>
<div class="block" data-type="false" data-color="fuchsia"></div>

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

Update What I'm trying to achieve is to iterate over the HTML <div class="block"> and write it to Javascript Objects which I'll need to manipulate later.

The desired end would be an array blocks[] containing the data from each block in an object.

What are you trying to achieve? "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." You've done the MCVE (I assume), but what's the problem statement? The goal? — T.J. Crowder
– T.J. Crowder, Commented Feb 20, 2016 at 8:33

T.J. Crowder · Accepted Answer · 2020-07-03 08:51:27Z

This line:

 blocks[i].block = dom_blocks[i].dataset.type;

relies on the browser supporting dataset, which isn't universally supported yet. On browsers that do, it will set blocks[i].block to a string ("true" or "false"). For older browsers, you can use getAttribute:

 blocks[i].block = dom_blocks[i].getAttribute("data-type");

(BTW, perhaps you meant .type = rather than .block =?)

This line:

blocks[i].block.color = dom_blocks[i].dataset.color;

doesn't do anything, because you're setting a property color on a primitive string. When you do that, the string is promoted to an object briefly, but then that object is thrown away and this becomes a no-op.

So if things are "blowing up" it sounds like you're using a browser that doesn't support dataset. Otherwise, you just need to do something else with color.

Finally, there's no point in using block as a prototype if you're just going to assign its only properties to instances anyway.

If you wanted to set color on blocks[i] instead of blocks[i].block, e.g.:

blocks[i].color = dom_blocks[i].dataset.color;

...it'll work (on browsers supporting dataset):

var blocks = [];
var block  = {
    type: null,
    color: null
};

var dom_blocks = document.querySelectorAll('.block');

for (var i= 0, ii = dom_blocks.length; i < ii; i++) {
    blocks[i] = Object.create(block);
    blocks[i].block = dom_blocks[i].dataset.type;
    blocks[i].color = dom_blocks[i].dataset.color;
}

console.log(blocks);

.as-console-wrapper {
    max-height: 100% !important;
}

<div class="block" data-type="false" data-color="red"></div>
<div class="block" data-type="true"  data-color="green"></div>
<div class="block" data-type="true"  data-color="orange"></div>
<div class="block" data-type="false" data-color="fuchsia"></div>

Or for older browsers:

var blocks = [];
var block  = {
    type: null,
    color: null
};

var dom_blocks = document.querySelectorAll('.block');

for (var i = 0, ii = dom_blocks.length; i < ii; i++) {
    blocks[i] = Object.create(block);
    blocks[i].block = dom_blocks[i].getAttribute("data-type");
    blocks[i].color = dom_blocks[i].getAttribute("data-color");
}

console.log(blocks);

.as-console-wrapper {
    max-height: 100% !important;
}

<div class="block" data-type="false" data-color="red"></div>
<div class="block" data-type="true"  data-color="green"></div>
<div class="block" data-type="true"  data-color="orange"></div>
<div class="block" data-type="false" data-color="fuchsia"></div>

Thank you T.J! As usual if getting you to answer my questions: There is lots more information I didn't even think about like the dataset browser support. And to answer your question: (BTW, perhaps you meant .type = rather than .block =?) YES that was my problem..! Thank you!

Jose Rui Santos · Accepted Answer · 2016-02-20 08:50:51Z

1

Use the cross-browser getAttribute() and simplify things by creating the object directly in the push.

There is no need to explicitly call the Object.create()

var blocks = [],
    dom_blocks = document.querySelectorAll('.block');

for(var i= 0, ii = dom_blocks.length; i < ii; i++) {
  blocks.push({
    type: dom_blocks[i].getAttribute('data-type'),
    color: dom_blocks[i].getAttribute('data-color')
  });
}

console.log(blocks);

<div class="block" data-type="false" data-color="red"></div>
<div class="block" data-type="true"  data-color="green"></div>
<div class="block" data-type="true"  data-color="orange"></div>
<div class="block" data-type="false" data-color="fuchsia"></div>

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

edited Feb 20, 2016 at 8:50

answered Feb 20, 2016 at 8:38

Jose Rui Santos

15.3k9 gold badges61 silver badges74 bronze badges

Collectives™ on Stack Overflow

Dynamically setting values to an array of objects in Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related