Can I select a multi-dimensional HTML array in JavaScript as a multi-dimensional array?

Question

If I have the following HTML on a page:

<input type="hidden" name=item[0][id]>
<input type="text"   name=item[0][title]>
<input type="text"   name=item[0][description]>

<input type="hidden" name=item[1][id]>
<input type="text"   name=item[1][title]>
<input type="text"   name=item[1][description]>

<input type="hidden" name=item[2][id]>
<input type="text"   name=item[2][title]>
<input type="text"   name=item[2][description]>

I would like to select the items using JavaScript (or JQuery) in such a way that I can loop over the items using the outer array.

Currently I have the following JQuery/JavaScript to handle the items:

var items = ($('[name*="item["]'));
var i = 0;

while (i < items.length) {

    if (items[i++].value === '') {
        // No ID set.
    }
    else if (items[i++].value === '') {
        // No title set.
    }
    else if (items[i++].value === '') {
        // No description set.
    }
}

Is there a way to select the elements so that I can loop over them using notation more like the following (Where items.length is 3)?

for (var i = 0; i < items.length; i++) {
    if (items[i][0].value === '') {
        // No ID set.
    }
    else if (items[i][1].value === '') {
        // No title set.
    }
    else if (items[i][2].value === '') {
        // No description set.
    }
}

Or even more like this?

for (var i = 0; i < items.length; i++) {
    if (items[i].id.value === '') {
        // No ID set.
    }
    else if (items[i].title.value === '') {
        // No title set.
    }
    else if (items[i].description.value === '') {
        // No description set.
    }
}

Or would this require more manipulation and processing to go from selecting from the DOM to creating the data structure to loop over?

There is no "HTML array." Those are just individual inputs. The seeming array handling you see server-side is a feature of your server-side environment, nothing more. Yes, you could certainly write a general purpose function that you passed a set of elements to which would parse the name and populate an array of objects. But you'll have to write it, there's nothing built in. — T.J. Crowder
– T.J. Crowder, Commented Jun 29, 2015 at 10:57
Maybe you can work out something with classes, adding class="0 id" to your html and later select it with document.querySelector(".0.id"), but working with classes this way may overload a bit your page and maybe it's not the best way to proceed — Héctor E
– Héctor E, Commented Jun 29, 2015 at 11:11

Community · Accepted Answer · 2017-05-23 10:26:42Z

I think this is exactly what you are looking for (which is not really related to selectors):

function serialize () {
    var serialized = {};
    $("[name]").each(function () {
        var name = $(this).attr('name');
        var value = $(this).val();

        var nameBits = name.split('[');
        var previousRef = serialized;
        for(var i = 0, l = nameBits.length; i < l;  i++) {
            var nameBit = nameBits[i].replace(']', '');
            if(!previousRef[nameBit]) {
                previousRef[nameBit] = {};
            }
            if(i != nameBits.length - 1) {
                previousRef = previousRef[nameBit];
            } else if(i == nameBits.length - 1) {
                previousRef[nameBit] = value;
            }
        }
    });
    return serialized;
}

console.log(serialize());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name=item[0][id]>
<input type="text"   name=item[0][title]>
<input type="text"   name=item[0][description]>

<input type="hidden" name=item[1][id]>
<input type="text"   name=item[1][title]>
<input type="text"   name=item[1][description]>

<input type="hidden" name=item[2][id]>
<input type="text"   name=item[2][title]>
<input type="text"   name=item[2][description]>

See the related JSFiddle sample.

Jason W · Accepted Answer · 2015-06-29 11:24:06Z

Here's a way to add a custom function into JQuery to get the data structure you're looking for.

$.fn.getMultiArray = function() {
    var $items = [];
    var index = 0;
    $(this).each(function() {
        var $this = $(this);
        if ($this.attr('name').indexOf('item[' + index + ']') !== 0)
            index++;
        if (!$items[index])
            $items[index] = {};
        var key = $this.attr('name').replace('item[' + index + '][', '').replace(']', '');
        $items[index][key] = $this;
    });
    return $items;
};

var $items = $('input[name^="item["]').getMultiArray();

This allows you to have the references in your "ideal" example.

var $items = $('input[name^="item["]').getMultiArray();
$items[0].id;

JS Fiddle: https://jsfiddle.net/apphffus/

Collectives™ on Stack Overflow

Can I select a multi-dimensional HTML array in JavaScript as a multi-dimensional array?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related