jQuery Objects/Arrays - How?

Question

Hi,

This is my first post and I am fairly new to jQuery but I was hoping to get some help on creating objects and arrays using jQuery.

What I'm basically after is a way of creating an abject that will store the following information, i.e.:

[index, name] such as [0,"NameA"][1,"NameB"] etc.

Unsure how to create an object/array to store this type of info with jQuery.

Secondly, I then need a means of passing this object/array as a parameter into another function then be able to loop through this object/array and print out it's contents.

Again, unsure how to o this part as well.

Would really appreciate help on the above with examples/websites with examples etc.

Thanks. TT.

Answer 1

The doc page for $.each should solve your problem:

http://docs.jquery.com/Utilities/jQuery.each

From the above link:

var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one:1, two:2, three:3, four:4, five:5 };

jQuery.each(arr, function() {
  $("#" + this).text("My id is " + this + ".");
  return (this != "four"); // will stop running to skip "five"
});

jQuery.each(obj, function(i, val) {
  $("#" + i).append(document.createTextNode(" - " + val));
});

Answer 2

If you're interested in saving some data in an array, and pluck it out together with its index, why not do it the simplest way possible?

var arr = ["Alpha", "Bravo", "Charlie", "Dog", "Easy"];

for (i = 0; i<5; i++) {
    alert("Element with index " + i + " is " + arr[i] + ".");
}

Answer 3

//class
function Foo(index, name) {
this.index = index;
this.name = name;}
//object of that class
var obj = new Foo(0, "NameA");

var myArray = new Array();
//add object to array
myArray.push(obj);    

function loopArray(someArray) {
var index; 
var name;
for (var i = 0; i < someArray.length; i++) 
 {
    index = someArray[i].index;
    name = someArray[i].name;
 }
}

Answer 4

You may find the following article interesting

• Peeling away the jQuery wrapper and finding an array

Essentially, the (jQuery) object returned by the jQuery $() function has a bunch of properties, which include one for each element that matches the selector, with the property name being a numeric "index"

For example, given the following HTML

  <p>Hello, World!</p>
  <p>I'm feeling fine today</p>
  <p>How are you?</p>

and the selector

$('p');

the object returned will look as follows

({length:3, 0:{}, 1:{}, 2:{}})

Using the .get() command, you can access matched elements and operate on them accordingly. Following with the example

$(function () {
var p = $('p').get();
for (var prop in p)
  alert(prop + ' ' + p[prop].innerHTML);
});

or alternatively, knowing how the returned object is structured

$(function () {
var p = $('p');
for (var i=0; i< p.length; i++)
  alert(i + ' ' + p[i].innerHTML);
});

will alert

0 Hello, World!
1 I'm feeling fine today
2 How are you?

I know that I have not answered your question directly, but thought that it may be useful to provide insight into how jQuery works.

I think what you need in order to answer your question is either

• a simple array, as demonstrated by Tomas Lycken's answer. This seems to best fit what you are asking for

  var mySimpleArray = ['a','b','c'];

• an array of objects, with each object having an 'index' and 'name'. I'll make the assumption here that 'index' is implied to be be any number that you want to assign and does not imply an ordinal position

  var myObjectArray = [{ index: 5, name: 'a' },{ index: 22, name: 'b'},{ index: 55, name: 'c'}];