print Associative array elements one by one using javascript only

Question

I have this code

<script type="text/javascript">
var slideStart = 1;
var slideCount = 4;
function callArr() {
    var arrName = {"rose":"5", "daisy":"4",
                   "orchid":"3", "sunFlower":"10",
                   "Lily":"15"};
    for (var flwr in arrName) {
        if (slideStart <= slideCount) {
            document.getElementById('test').innerHTML += flwr +
                                                         "   >>>>>>>>   " +
                                                         arrName[flwr] +
                                                         "<br />";
            slideStart++;
            break;
        }
    }
}
</script>

I want to access array elements individually on any event. can any please help me out on this????

You have the code to print the array. Now, what do you want to know? — GolezTrol, Jul 05 '11 at 07:23
Just FYI, javascript doesn't have associative arrays. What you're working with there is actually an object. Treating them as associative arrays can have unintended consequences. http://ajaxian.com/archives/javascript-associative-arrays-considered-harmful — GordonM, Jul 05 '11 at 07:25
this code print only first element... i want all elements to print one by one when i click on a link.. Is it possible?? — Mahima, Jul 05 '11 at 07:25
Maybe you should remove the if from your code? And especially, don't use `>` in HTML, unless you mean to use a tag. — GolezTrol, Jul 05 '11 at 07:30
This is not an Array, is a JS Object. See http://stackoverflow.com/questions/874205/javascript-what-is-the-difference-between-an-array-and-an-object — KooiInc, Jul 05 '11 at 07:55

score 2 · Accepted Answer · answered Jul 05 '11 at 07:40

Of course it will print only the first element since you use condition like this

if (slideStart <= slideCount)

Modify your code to iterate through the object properties. One of the possible solutions:

var slideStart = 0;
var slideCount = 4;
function callArr() {
    var arrName = {"rose":"5", "daisy":"4",
                   "orchid":"3", "sunFlower":"10",
                   "Lily":"15"};
    var i = 0;
    for (var flwr in arrName) {
        if (i == slideStart) {
            document.getElementById('test').innerHTML += flwr +
                                                         "    " +
                                                         arrName[flwr] +
                                                         "<br />";
            slideStart++;
            break;
        }

        i++;
    }
}

Try it here: http://jsfiddle.net/2nDv8/

As you can see, it prints the next property after every call.

score 1 · Answer 2 · answered Jul 05 '11 at 07:40

If you refer to access anywere, you could declare it as globla var:

<script type="text/javascript">
var slideStart = 1;
var slideCount = 4;
var arrName = {"rose":"5", "daisy":"4",
                   "orchid":"3", "sunFlower":"10",
                   "Lily":"15"}; //Declare var outside, so it's global
function callArr() {    
    for (var flwr in arrName) {
        if (slideStart <= slideCount) {
            document.getElementById('test').innerHTML += flwr +
                                                         "   >>>>>>>>   " +
                                                         arrName[flwr] +
                                                         "<br />";
            slideStart++;
            //break; //This prevents from showing more. Erase it
        }
    }
}
</script>

Also note that the break statement was causing to show only the first element

Hope this helps. Cheers

score 1 · Answer 3 · answered Jul 05 '11 at 07:40

1

This isn't exactly cross-browser compatible, but you can use Object.keys(arrName). Or actually create and store an array that acts the same, if you're actually concerned about cross-browser compatibility.

answered Jul 05 '11 at 07:40

Steve Wang

1,814
1
16
12

Benny Tjia · Answer 4 · 2011-07-05T07:44:35.220

It only prints once because you put a "break" inside your loop. This code will print all elements without problems. One problem is also caused by your slideStart and slideCount variables. If you want to print all of them, change slideStart to 0 so that it will print all the elements, not just 4 of those..Hope that helps:

function callArr() {
    var arrName = {"rose":"5", "daisy":"4",
                   "orchid":"3", "sunFlower":"10",
                   "Lily":"15"};
    for (var flwr in arrName) {
        if (slideStart <= slideCount) {
            document.getElementById('test').innerHTML += flwr +
                                                         "   >>>>>>>>   " +
                                                         arrName[flwr] +
                                                         "<br />";
            slideStart++;
            //break;
        }
    }
}

score 0 · Answer 5 · edited Jul 05 '11 at 12:00

0

Probably this is what you want. Try it here: http://jsfiddle.net/Hsn4c/1/

function callArr() {
    var slideStart = 0;
    var slideCount = 4;

    var arrName = {
        "rose": "5",
        "daisy": "4",
        "orchid": "3",
        "sunFlower": "10",
        "Lily": "15"
    };
    for (var flwr in arrName) {
        if (slideStart <= slideCount) {
            document.getElementById('test').innerHTML += flwr + ">>>>>" + arrName[flwr] + "<br />";
            slideStart++;
            //break;
        }
    }
    document.getElementById('test').innerHTML += '==========<br />';
}

edited Jul 05 '11 at 12:00

DarthJDG

16,511
11
49
56

answered Jul 05 '11 at 08:10

zhiyelee

429
4
14

Thanks 4 the reply.... It is now printing all values at once... i want that when i click on a link, first element is printed. then on second click, second element and so on.... – Mahima Jul 05 '11 at 08:33

print Associative array elements one by one using javascript only

5 Answers5