简体   繁体   English

如何循环显示Javascript多维数组

[英]How to loop through & display Javascript Multidimensional Array

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. 如果您输入让我们说439023483并单击按ISBN搜索按钮,您将看到我的问题。 The show all button works fine. show all按钮工作正常。 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 以下是测试源的链接: 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);
}

To return a value in a multidimensional array: array[n][m] is the mth element of the nth row. 要在多维数组中返回值: array[n][m]是第n行的第m个元素。 To do this for every element, use embedded for-loops: 要为每个元素执行此操作,请使用嵌入式for循环:

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

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 的jsfiddle

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM