Javascript: loop through array

Question

This is driving me crazy. I'm just trying to print out an array and it's not working. What am I missing? The results variable is returning "undefined" which much mean my for loop isn't working correctly. Everything else works properly, the console.log I have correctly displays the fields are added to the array.

// The list of accounts array.
var accountsArray = [];

function addAccount() {
  // Take fields and put user data into varables.
  var accountName = document.getElementById('accountName').value;
  var accountBalance = document.getElementById('accountBalance').value;
  var accountType = document.getElementById("accountType");
  var accountTypeSelected = accountType.options[accountType.selectedIndex].text;
  var accountCurrency = document.getElementById("accountCurrency");
  var accountCurrencySelected = accountCurrency.options[accountCurrency.selectedIndex].text;

  // Put these variables into the array.
  accountsArray.push(accountName);
  accountsArray.push(accountBalance);
  accountsArray.push(accountTypeSelected);
  accountsArray.push(accountCurrencySelected);

  // Items added to the array, logged.
  console.log('user added: ' + accountsArray);
}

function accountsListHtml() {

  var results;

  // Loop through the array
  for (var i = 0; i < accountsArray.length; i++) {
    results = accountsArray[i];
  }

  document.getElementById('accountsList').innerHTML = results;
}

Here's a link to all the files. It's an iOS web app using Framework7. Balance Pro

each assignment results = accountsArray[i]; overwrites previous one — hindmost
– hindmost, Commented Oct 12, 2014 at 18:26
addAccount(), which populates the array, is never called, at least from the code you've posted. — Mitya
– Mitya, Commented Oct 12, 2014 at 18:27
Where and when is accountsListHtml() called ? If it's before addAccount() result must be empty. — Martin Ernst
– Martin Ernst, Commented Oct 12, 2014 at 18:40

Martin Ernst · Accepted Answer · 2014-10-12 19:17:59Z

2

You are calling accountsListHtml() in body.onload. At that point accountsArray is empty. I can't find any other possibility to call accountsListHtml() on that page you linked to.

Add one line inside function addAccount() and it will work:

function addAccount() {

    /* vour code */

    console.log('user added: ' + accountsArray);

    accountsListHtml(); // add this line
}

edited Oct 12, 2014 at 19:17

answered Oct 12, 2014 at 19:06

Martin Ernst

3,2891 gold badge15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michal Leszczyk · Accepted Answer · 2014-10-12 18:29:09Z

0

Try changing results = accountsArray[i]; to results += accountsArray[i];.

Update And initialize results with an empty string, for example :)

answered Oct 12, 2014 at 18:29

Michal Leszczyk

1,90916 silver badges19 bronze badges

4 Comments

jryankennedy Over a year ago

Still getting undefined.

Michal Leszczyk Over a year ago

Can you make a jsfiddle.net example?

jryankennedy Over a year ago

It's a little complicated for jsfiddle. Here's a link to my server where I uploaded the code. It is an iOS web app using Framework7. link

Michal Leszczyk Over a year ago

Don't really know what you expect - it's working fine (at least the way I see it) on Chrome 37. See this screenshot.

myusuf · Accepted Answer · 2014-10-12 18:30:21Z

0

for (var i = 0; i < accountsArray.length; i++) { results = accountsArray[i]; }

The statement in the for loop i.e. results = accountsArray[i]; overwrites the variable results evry loop run. You could change the statement to :

results += accountsArray[i].toString();

and initialise results to an empty string.

answered Oct 12, 2014 at 18:30

myusuf

12.3k12 gold badges39 silver badges50 bronze badges

1 Comment

jryankennedy Over a year ago

Hmm, just tried that and now it's just returning the empty string (results = ' ')

alex · Accepted Answer · 2014-10-12 18:45:33Z

The following works for me: http://jsfiddle.net/95ztrmk3/13/

HTML:

<div id="accountsList"></div>

JS:

// The list of accounts array.
var accountsArray = [];

addAccount();
accountsListHtml();

function addAccount() {
    // Take fields and put user data into varables.
    var accountName = "John Doe";
    var accountBalance = "500.00";
    var accountTypeSelected = "Checking"
    var accountCurrencySelected = "USD";

    // Put these variables into the array.
    accountsArray.push(accountName);
    accountsArray.push(accountBalance);
    accountsArray.push(accountTypeSelected);
    accountsArray.push(accountCurrencySelected);

    // Items added to the array, logged.
    console.log('user added: ' + accountsArray);
}

function accountsListHtml() {

    var results = [];

    // Loop through the array
    for (var i = 0; i < accountsArray.length; i++) {
        results += accountsArray[i] + " ";
    }

    document.getElementById('accountsList').innerHTML = results;
    console.log(results);

}

Assuming the input isn't malformed or otherwise weird. I made sure Javascript recognizes results is an empty array and not a string or something: var results = []

I tried this on my end, and I'm still not sure why it isn't working. I just uploaded your edits to the code, Balance Pro
@jryankennedy I think the issue is probably related to the order in which your functions are being called, in that case. It looks like accountsListHtml is invoked once, when the <body> loads and the form fields are empty (yielding zero results). Either way, it looks like it wouldn't be an issue with looping through an array at this point.

Collectives™ on Stack Overflow

Javascript: loop through array

4 Answers 4

Comments

4 Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

1 Comment

2 Comments

Related