How to loop through & display Javascript Multidimensional Array

Question

I have a testing search software and it stores the data in a multidimensional array. I can return the whole database but cannot return just one value. I'm trying to figure out how to return one section as a multidimensional array. Otherwise it just repeats the passed value across the display. While De-bugging it i can see the complete array stored as an argument but am having trouble figuring out how to loop through that array to display correctly. You may need to view the source to understand better. If you enter lets say 439023483 and click search by ISBN button, you will see my issue. The show all button works fine. Anything pointing me in the right direction would be greatly appreciated and thank you in advance.

Here is a link to the testing source: http://mdhmotors.com/jstesting/test.html

Here is the part of the code that I'm stuck on:

function searchByISBN(isbn)
{
    var isbn = document.getElementById('isbn').value;
    showBooks(getBookByIsbn(isbn));

}
function getBookByIsbn(isbn)
{
  var foundBook = null;
  for (b in BookStore)
  {
      var book = BookStore[b];
      if (book[ISBN] == isbn)
      {
          foundBook = new Array(book[ISBN], book[TITLE], book[AUTHOR], book[PUBLISHER], book[WS_PRICE], book[RET_PRICE], book[QUANTITY]);
          break;
      }
  }
  return foundBook; 
}

/*display search results*/
function showBooks(searchResults)
{
  //clearDisplayTable();
  if (searchResults == null)
  {
      return;
  }
  var row, cell, displayTable, tableHeader, tableTitle;
  displayTable = document.createElement('table');
  displayTable.className = "mytable";
  tableBody = document.createElement('tbody');
  row = document.createElement('tr');
  tableHeader = document.createElement('th');
  tableHeader.appendChild(document.createTextNode("Book Store Inventory"));
  tableHeader.setAttribute('colSpan', 8);
  tableHeader.setAttribute('style', 'font-size: 22px');
  row.appendChild(tableHeader);
  tableBody.appendChild(row);

 row = document.createElement('tr');
 columnName = document.createElement('th');
 columnName.appendChild(document.createTextNode("#"));
 row.appendChild(columnName);

 columnName = document.createElement('th');
 columnName.appendChild(document.createTextNode("Isbn"));
 row.appendChild(columnName);

 columnName = document.createElement('th');
 columnName.appendChild(document.createTextNode("Title"));
 row.appendChild(columnName);

 columnName = document.createElement('th');
 columnName.appendChild(document.createTextNode("Author"));
 ow.appendChild(columnName);

 columnName = document.createElement('th');
 columnName.appendChild(document.createTextNode("Publisher"));
 row.appendChild(columnName);

 columnName = document.createElement('th');
 columnName.appendChild(document.createTextNode("W/S"));
 row.appendChild(columnName);

 columnName = document.createElement('th');
 columnName.appendChild(document.createTextNode("Retail"));
 row.appendChild(columnName);

 columnName = document.createElement('th');
 columnName.appendChild(document.createTextNode("Qty"));
 row.appendChild(columnName);
 tableBody.appendChild(row);

  var count = 0;
  for (b in searchResults)
  {
    row = document.createElement('tr');
    book = searchResults[b];
    var data = new Array(++count, book[ISBN], book[TITLE], book[AUTHOR], book[PUBLISHER], book[WS_PRICE], book[RET_PRICE], book[QUANTITY]);
      for (var index = 0; index < 8; index++)
      {
          cell = document.createElement('td');
          cellText = document.createTextNode(data[index]);

          if (index == 0)
          cell.setAttribute('style', 'text-align: right');
          cell.appendChild(cellText);
          row.appendChild(cell);
      }
   tableBody.appendChild(row);
   }
displayTable.appendChild(tableBody);
bookResults.appendChild(displayTable);
}

You dont need that long code just to ask how to iterate mul. array... — Royi Namir
– Royi Namir, Commented Aug 7, 2013 at 19:13
There's no such thing as a "multidimensional array" in JavaScript. There are only arrays whose values may also be arrays. I say this not to be nitpicky or pedantic, but because it may provide you some insight on what you need to do. — Phrogz
– Phrogz, Commented Aug 7, 2013 at 19:16

gr3co · Accepted Answer · 2013-08-07 19:14:21Z

6

To return a value in a multidimensional array: array[n][m] is the mth element of the nth row. To do this for every element, use embedded for-loops:

for (var i = 0; i < array.length; i++){
    for (var j = 0; j < array[i].length; j++){
        console.log(array[i][j]);

answered Aug 7, 2013 at 19:14

gr3co

8931 gold badge7 silver badges15 bronze badges

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

1 Comment

handmdmr Over a year ago

I cannot seem to figure out where to loop the foundBook array for it to properly display. It returns the ISBN and i can see the complete array of all the book attributes in the watchstack. But it just loops through the ISBN number.

HarryTuttle · Accepted Answer · 2015-06-25 21:10:56Z

Using jQuery - but easily adaptable to pure JS:

var my_multi_dimensional_array = ["a", "b", "c", ["d", "e", "f"], "g", ["h", ["i"],
    ["j", "k"], "l", ["m", ["n", "o", [
        [
            ["p"], "q"]
    ]]]
]];

(function walkies(arr, path, callback, root) {
    $.each(arr, function (i, v) {
        //push index onto path stack
        path.push(i);
        var recurseable = ($.isArray(v) || $.isPlainObject(v)) ;
        var recurse = callback.call(v, !recurseable, v, path, i, root || arr) && recurseable;

        //call callback and continue recursing this node until callback returns false
        if ( recurse) {
            walkies(v, path, callback, root || arr);
        }

        //pop last index off path stack
        path.pop();
    });
}(my_multi_dimensional_array, [], function (isLeaf, node, path, index, root) {
    if( isLeaf ){
        console.log( "[" + path.join("],[") + "]=" + node );
    }
    return true;
}));

jsFiddle

Collectives™ on Stack Overflow

How to loop through & display Javascript Multidimensional Array

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related