CODEWITHSUNDEEP
javascriptjqueryarraysmultidimensional-arrayeach
Patrioticcow
Patrioticcow

Reputation: 27038

how to create a multidimensional array in javascript / jquery?

i have a few li's:

<ul>
    <li class="one">
        <input type="text" class="form_input" placeholder="Type something...">
    </li>
    <li class="two">
        <input type="text" class="form_input" placeholder="Type something else...">
    </li>
</ul>

i am trying to create a array similar to:

[
    0[
        'placeholder' : 'Type something...'
    ]
    1[
        'placeholder' : 'Type something else...'
    ]
]

i use a method like this

var lineText = function(elements) {
var myData = new Array();

elements.each(function(index, data) {
    var li = $(this);

    myData["placeholder"] = li.find('.form_input').attr("placeholder");

            console.log(data); returns the li objects
});

console.log(myData);
};

from this i get [placeholder: "Type something..."], basically one item in my array, instead of 2

i can't use push like this:

myData["placeholder"].push(li.find('.form_input').attr("placeholder")); //Cannot call method 'push' of undefined

or add another dimension to the array

myData[index]["placeholder"] = li.find('.form_input').attr("placeholder"); //Cannot set property 'placeholder' of undefined

any ideas? thanks

Upvotes: 0

Views: 3785

Answers (2)

logic8
logic8

Reputation: 935

this should work:

var placeholders = [];
$('ul > li > input').each( function(index, el){ placeholders.push(el.placeholder); } );

this will produce ["Type something...", "Type something else..."]

the reason you were getting errors is because you were trying to access an array with object syntax. Javascript arrays can only have numeric keys... However everything in javascript is an object which is why myData['placeholders'] shows up as 'undefined' and not a hard error. What it is doing is checking the Array prototype chain for a method or property 'placeholder', not the key 'placeholder' in the array myData.

Upvotes: 2

SpaceFace
SpaceFace

Reputation: 1552

It sounds like you want an array of "associative arrays". In JavaScript instead of associative arrays you can make objects can behave the same way. Meaning your above array would look like this in literal syntax.

var a = [ { 'placeholder': 'Type something...' },
          { 'placeholder': 'Type something else...' } ];

Where a[ 0 ][ 'placeholder' ] will return the string 'Type something...'. Since this uses objects, properties can't be pushed because they require some key. Instead you would write something like a.push( { 'placeholder': 'Type more stuff...' } ).

If you only plan to add placeholders to the array there's no need in using objects, just make an array of strings like this.

var placeholders = [ 'Type something...', 'Type something else...' ];

But when using my first solution, your function would become

var lineText = function(elements) {
    var myData = new Array();

    elements.each(function(index, data) {
        var li = $(this);
        var placeholderData = new Object();

        placeholderData["placeholder"] = li.find('.form_input').attr("placeholder");
        myData.push(placeholderData);
        console.log(data); returns the li objects
    });

    console.log(myData);
};

Live example here http://jsfiddle.net/vU36T/6/

Upvotes: 3

Related Questions