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????

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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;
        }
    }
}

Answer 5

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 />';
}