How do I access data in an array in JavaScript

Question

  var lotsData = [
    {
        index: 0,
        data: 'I want to be in HTML',

    },
    {
        index: 1,
        data: 'I dont' want to be in HTML',
    }]

Lets say I prefer to have one var with an array. How do I access the index 0, say its connected to a click event and I want to use data:

    $('.tab').live('click', function() {
          console.log("I was clicked");
                      $('#fancy').text(WHAT GOES HERE TO ACCESS data from index 0?);
        });

Answer 1

jQuery is written in Javascript, and Javascript itself provides the Array object.

So accessing the 0th element of an array is array_name[0]

In your example, you're storing objects as the elements of the array. Your objects are including an "index" property, but beware, your "index" property has nothing to do with the element index in the array. You should NOT include an "index" property... Eg:

 var lotsData = [
{ // this is the first array element, index value in the array is 0
    index: 1,
    data: 'I want to be in HTML',

},
{  // this is the second array element, index value in the array is 1
    index: 0,
    data: "I don't want to be in HTML",
}]

lotsData[0].data // value: 'I want to be in HTML' 

The better example would be:

 var lotsData = [
{  // this is the first array element, index value in the array is 0
    category: 'shoe',
    detail: 'red'

},
{  // this is the second array element, index value in the array is 1
    category: 'fruit',
    detail: 'apple'
}]

lotsData[0].detail // value: 'red'

Added: trailing commas

Note that while Javascript is a powerful language, it does have its quirks. An important one is trailing commas, such as

...
    index: 0,
    data: "I don't want to be in HTML",  // Trailing comma. DON'T DO THIS!
}]

The problem is that the trailing comma is not a formal part of the Javascript language. Most JS engines support it, but a very important one does not: the Internet Explorer browser does not support trailing commas and will die a sad death when it encounters one.

Your testing should always include IE due to its unique ways of doing things.

I test in IE 7.

Answer 2

 $('.tab').live('click', function() {
          console.log("I was clicked");
                      $('#fancy').text(lotsData[0].data);
        });

of course this is assuming your indexes are in correct order (as they seem to be from your example data).

And in that case there is no reason to keep a index property of your array'd objects. using a simple string array would be much easier to work with.

example

var lotsData = ["I want to be in HTML","I don't want to be in HTML"];

this way you would just have to simply reference lotsData[0]

Answer 3

First off don't use .live() unless you really really need to ( http://jupiterjs.com/news/why-you-should-never-use-jquery-live )

But if you look at the .live() documentation ( http://api.jquery.com/live/ ) you will see the fact that you can pass data to .live(), that will be available in the callback.

.live( eventType, eventData, handler )

So:

$('.tab').live('click',lotsData,function(event){
    console.log('I was clicked');
    $('#fancy').text(event.data[0].data);
});

Is that what you are asking?

Or are you looking at aa way to iterate through lotsdata and find out which item in the array has .index = 0?

Answer 4

You can try this, not best solutuion:

$('.tab').live('click', function() {
    console.log("I was clicked");
    var realIndex;
    for (var i = 0; i < lotsData.length; i++ )
    {
        if (lotsData[i].index == 0) {
            realIndex = i;
            break;
        }
    }
    $('#fancy').text(lotsData[realIndex].index);
});