时间戳

首页 > 解决方案 > 当键有多个条目时，如何处理二维数组搜索？

javascript - 当键有多个条目时，如何处理二维数组搜索？

问题描述

在下面的代码中，我有一个函数将搜索包含日期、公园和相应的公园时间的二维数组。

它应该返回控制台什么是在 bootstrap-datepicker 中选择的日期的公园时间，以及位于二维数组以下两行中的以下两个条目（您会注意到数据将以 3 个为一组，因为需要报告三个公园的小时数）。

但是，控制台什么也没显示。我是以错误的方式解决这个问题，还是我的代码中有错误？

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.css">
</head>
<body>
  <div id="calendar-container"></div>     <!-- 9/1/2019 has been selected -->

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</body>

function findParkHours() {
  var calendarDate = $("#calendar-container").datepicker('getFormattedDate');
  var hoursTable = [
                     ["9/1/2019","USF","9a","9p"],
                     ["9/1/2019","IOA","9a","9p"],
                     ["9/1/2019","UVB","10a","7p"],
                     ["9/2/2019","USF","9a","9p"],
                     ["9/2/2019","IOA","9a","9p"],
                     ["9/2/2019","UVB","10a","7p"],
                     ["9/3/2019","USF","9a","9p"],
                     ["9/3/2019","IOA","9a","9p"],
                     ["9/3/2019","UVB","10a","6p"]
  ];

  // iterate through rows
  for (var i = 0, len1 = hoursTable.length; i < len1; i++) {
    // iterate through columns
    for (var j = 0, len2 = hoursTable[i].length; j < len2; j++) {
      // if the cell equals the datepicker date...
      if (hoursTable[i][j] === calendarDate) {
        // return the next three rows to the console
        for (var k = 0, len3 = 3; k < len3; k++) {
          // takes i and adds k to find the next two rows in addition to i
          i + k;

          // writes to console the column items adjacent to j column where
          // the calendar date key is stored
          console.log(hoursTable[i][j+1] +
                      ": " +
                      hoursTable[i][j+2] +
                      "-" +
                      hoursTable[i][j+3]);

          // expected result IF 9/1/2019 is selected:
          //   USF: 9a-9p
          //   IOA: 9a-9p
          //   UVB: 10a-7p
        }
      }
    }
  }
}

$("#calendar-container").datepicker( {
  maxViewMode: 1,
  todayHighlight: true,
  format: 'm/d/yyyy'
}).on('changeDate', function() {
  findParkHours();
});

标签： javascriptjqueryhtmlbootstrap-datepicker

解决方案

我做了一些修改以获得您想要的结果，这里是一个片段，我认为您必须检查/调试 datapicker 值，console.log(calendarDate) 可能很有用。

编辑：我添加日期选择器

function findParkHours(calendarDate) {
  var hoursTable = [
    ["9/1/2019", "USF", "9a", "9p"],
    ["9/1/2019", "IOA", "9a", "9p"],
    ["9/1/2019", "UVB", "10a", "7p"],
    ["9/2/2019", "USF", "9a", "9p"],
    ["9/2/2019", "IOA", "9a", "9p"],
    ["9/2/2019", "UVB", "10a", "7p"],
    ["9/3/2019", "USF", "9a", "9p"],
    ["9/3/2019", "IOA", "9a", "9p"],
    ["9/3/2019", "UVB", "10a", "6p"]
  ];
  for (var i = 0, len1 = hoursTable.length; i < len1; i++) {
    for (var j = 0, len2 = hoursTable[i].length; j < len2; j++) {
      if (hoursTable[i][j] === calendarDate) {
        for (var k = 0, len3 = 3; k < len3; k++) {
          var l = i + k;
          console.log(hoursTable[l][j + 1] + ": " + hoursTable[l][j + 2] + "-" + hoursTable[l][j + 3]); //writes to console the column items adjacent to j column where the calendar date key is stored
          //expected result IF 9/1/2019 is selected:
          //IOA: 9a-9p
          //UVB: 10a-7p
          //USF: 9a-9p
        }
        return;
      }
    }
  }
}

$("#calendar-container").datepicker( {
    maxViewMode: 1,
    todayHighlight: true,
    format: 'm/d/yyyy',
}).on('changeDate', function() {
    var calendarDate = $("#calendar-container").datepicker('getFormattedDate');
    console.log(calendarDate);
    findParkHours(calendarDate);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<div id="calendar-container"></div>     <!-- 9/1/2019 has been selected -->

推荐阅读