Iterate through list items stored in array JavaScript

Question

I am currently using SharePoint 2013 Online and I have some code which I am running to retrieve list items. I can successfully get the list items and store them in an array however I then need to iterate through each item in the array whilst at the same time going through each 'h1' text in a panel and changing the text to the value from the array. This is where I am struggling as I am continuously getting out the last value from the array and this is changing the text of the h1.

This is the code I have so far:

 var context;
 var title; 
 var titleArray = new Array(); 
 var mylist; 
 var oListItem; 
 var count = 0;

$(document).ready(function () {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getTitles);
})

function getTitles() {
    context = new SP.ClientContext.get_current();
    var web = context.get_web();
    mylist = web.get_lists().getByTitle('Panel Titles');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("<View><Query><OrderBy><FieldRef Name='Title'/></OrderBy> </Query> <ViewFields><FieldRef Name='Title' /></ViewFields> </View>");
    var collListItem = mylist.getItems(camlQuery);
    context.load(mylist);
    context.load(collListItem);
    context.executeQueryAsync(Function.createDelegate(this, onQuerySuccess), Function.createDelegate(this, onQueryFailed));


function onQuerySuccess() {
    listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        oListItem = listItemEnumerator.get_current();

        title = oListItem.get_item("Title");
        titleArray[count++] = title;
    }

    var panellength = $('.panel-title').length;

    $('.panel-title').each(function () {
        for (var i = 0; i < titleArray.length; i++) {

            $(this).find('.collapsed').text(titleArray[i]);
        }
    })
}

function onQueryFailed(sender, args) {
    alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}
}

Hope it makes sense what I am trying to achieve here, this is currently my result in which all of the panel titles end up the same, they should be three different results as is stored in the array:

I would greatly appreciate any help with this.

Answer 1

Make below changes to your code and try:

1. Change

titleArray[count++] = title;

To

titleArray.push(title);

2. Change

    $('.panel-title').each(function () {
        for (var i = 0; i < titleArray.length; i++) {

            $(this).find('.collapsed').text(titleArray[i]);
        }
    })

To

    var i = 0;

    $('.panel-title').each(function () {
        $(this).find('.collapsed').text(titleArray[i]);
        i++;
    })

Hope this helps.