如何循环显示 Javascript 多维数组

How to loop through & display Javascript Multidimensional Array

提问by handmdmr

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.

我有一个测试搜索软件，它将数据存储在多维数组中。我可以返回整个数据库，但不能只返回一个值。我想弄清楚如何将一个部分作为多维数组返回。否则它只会在显示器上重复传递的值。在调试它时，我可以看到存储为参数的完整数组，但我无法弄清楚如何遍历该数组以正确显示。您可能需要查看源代码才能更好地理解。如果您输入 439023483 并单击按 ISBN 搜索按钮，您将看到我的问题。显示全部按钮工作正常。任何将我指向正确方向的东西都将不胜感激，并在此先感谢您。

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

这是测试源的链接：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);
}

回答by gr3co

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:

要返回多维数组中的值：array[n][m]是第 n 行的第 m 个元素。要对每个元素执行此操作，请使用嵌入式 for 循环：

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

回答by HarryTuttle

Using jQuery - but easily adaptable to pure JS:

使用 jQuery - 但很容易适应纯 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

js小提琴