Iterate through a JavaScript grid and display the items

Question

Iterate through a JavaScript grid and display the items

I am attempting to iterate through a JavaScript table, aiming to display the elements located between two selections made by the user.

Here is an example of the table structure: if the user selects IDs 2 and 5, the loop should display rows 3 and 4. I tried using a for-loop but did not achieve the desired outcome.

var station = [
  [0, 'JAMAA EL FNA', 'L1'],
  [1, 'KOUTOUBIA', 'L1'],
  [2, 'HOTEL DE VILLE', 'L1'],
  [3, 'R.P BERDII', 'L1'],
  [4, 'GRAND POSTE', 'L1'],
  [5, 'CAREE EDEN', 'L1'],
  [6, 'PL ABDELMOUMEN', 'L1'],
  [7, 'PLACE D ARMES', 'L1'],
  [8, 'FST', 'L1'],
  [9, 'SEMIRAMIS', 'L1'],
  [10, 'DR KUDIA', 'L1'],
  [11, 'MCDO', 'L1'],
  [12, 'CAFE AMINE', 'L1'],
  [13, 'FAC SEMLALIA', 'L1'],
  [14, 'ROUIDATE', 'L1'],
  [15, 'CLUB MINISTRE JUSTICE', 'L1'],
  [16, 'BEN TBIB', 'L1'],
  [17, 'ASWAK SALAM', 'L1'],
  [18, 'BAB DOUKALA', 'L1'],
  [19, 'JAMAA EL FNA', 'L2'],
  [20, 'KOUTOUBIA', 'L2']
];

javascript arrays json

Answer 1

Answer №1

To filter and select specific items, you can use the following code:

let selectedItems = station.filter(curr => curr[0] > startNum && curr[0] < endNum)

var station = [
  [0, 'JAMAA EL FNA', 'L1'],
  [1, 'KOUTOUBIA', 'L1'],
  [2, 'HOTEL DE VILLE', 'L1'],
  [3, 'R.P BERDII', 'L1'],
  [4, 'GRAND POSTE', 'L1'],
  [5, 'CAREE EDEN', 'L1'],
  [6, 'PL ABDELMOUMEN', 'L1'],
  [7, 'PLACE D ARMES', 'L1'],
  [8, 'FST', 'L1'],
  [9, 'SEMIRAMIS', 'L1'],
  [10, 'DR KUDIA', 'L1'],
  [11, 'MCDO', 'L1'],
  [12, 'CAFE AMINE', 'L1'],
  [13, 'FAC SEMLALIA', 'L1'],
  [14, 'ROUIDATE', 'L1'],
  [15, 'CLUB MINISTRE JUSTICE', 'L1'],
  [16, 'BEN TBIB', 'L1'],
  [17, 'ASWAK SALAM', 'L1'],
  [18, 'BAB DOUKALA', 'L1'],
  [19, 'JAMAA EL FNA', 'L2'],
  [20, 'KOUTOUBIA', 'L2']
];

const start = document.getElementById('start')
const end = document.getElementById('end')
const results = document.getElementById('results')

function updateSelection() {
  let startNum = parseInt(start.value || -1)
  let endNum = parseInt(end.value || station.length + 1)
  let selectedItems = station.filter(curr => curr[0] > startNum && curr[0] < endNum)
  results.innerHTML = selectedItems.map(item => `<tr><td>${item[0]}</td><td>${item[1]}</td><td>${item[2]}</td></tr>`).join('')
}

updateSelection()
start.addEventListener('input', updateSelection)
end.addEventListener('input', updateSelection)

table {
  width: 100%;
}

table th {
  text-align: left;
}

Start: <input id="start" type="number"> End: <input id="end" type="number">

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody id="results"></tbody>
</table>

Answer 2

To filter and select specific items, you can use the following code:

let selectedItems = station.filter(curr => curr[0] > startNum && curr[0] < endNum)

var station = [
  [0, 'JAMAA EL FNA', 'L1'],
  [1, 'KOUTOUBIA', 'L1'],
  [2, 'HOTEL DE VILLE', 'L1'],
  [3, 'R.P BERDII', 'L1'],
  [4, 'GRAND POSTE', 'L1'],
  [5, 'CAREE EDEN', 'L1'],
  [6, 'PL ABDELMOUMEN', 'L1'],
  [7, 'PLACE D ARMES', 'L1'],
  [8, 'FST', 'L1'],
  [9, 'SEMIRAMIS', 'L1'],
  [10, 'DR KUDIA', 'L1'],
  [11, 'MCDO', 'L1'],
  [12, 'CAFE AMINE', 'L1'],
  [13, 'FAC SEMLALIA', 'L1'],
  [14, 'ROUIDATE', 'L1'],
  [15, 'CLUB MINISTRE JUSTICE', 'L1'],
  [16, 'BEN TBIB', 'L1'],
  [17, 'ASWAK SALAM', 'L1'],
  [18, 'BAB DOUKALA', 'L1'],
  [19, 'JAMAA EL FNA', 'L2'],
  [20, 'KOUTOUBIA', 'L2']
];

const start = document.getElementById('start')
const end = document.getElementById('end')
const results = document.getElementById('results')

function updateSelection() {
  let startNum = parseInt(start.value || -1)
  let endNum = parseInt(end.value || station.length + 1)
  let selectedItems = station.filter(curr => curr[0] > startNum && curr[0] < endNum)
  results.innerHTML = selectedItems.map(item => `<tr><td>${item[0]}</td><td>${item[1]}</td><td>${item[2]}</td></tr>`).join('')
}

updateSelection()
start.addEventListener('input', updateSelection)
end.addEventListener('input', updateSelection)

table {
  width: 100%;
}

table th {
  text-align: left;
}

Start: <input id="start" type="number"> End: <input id="end" type="number">

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody id="results"></tbody>
</table>

Answer 3

Answer №2

It seems like you are interested in refining your collection of stations

let minimumValue = 2;
let maximumValue = 5;
let filteredStations = stations.filter( item => item[0] > minimumValue && item[0] < maximumValue);

The variable filteredStations will now hold the data with the first column values between 3 and 4.

Answer 4

It seems like you are interested in refining your collection of stations

let minimumValue = 2;
let maximumValue = 5;
let filteredStations = stations.filter( item => item[0] > minimumValue && item[0] < maximumValue);

The variable filteredStations will now hold the data with the first column values between 3 and 4.

Iterate through a JavaScript grid and display the items

Answer №1

Answer №2

Similar questions

Unusual Behavior Uncovered in jQuery Selectors

What is the most effective method for identifying the initial timestamp for each day, week, or month within a collection of timestamps?

Execute a JavaScript code prior to sending a response directly from the ASP.NET code behind

Tips for successfully importing .eot and .woff documents using Babel?

Navigating programmatically to another page in Next.js can be easily achieved by utilizing the useRouter hook

contrasting module export approaches

Unable to locate the module '/workspace/mySQL/node_modules/faker/index.js'

Concealing scroll bars while still maintaining the ability to scroll by using overflow:scroll

Adjust the language code in a URL using JavaScript or Node.js

Click the button on your mobile device to open the already installed Android app

Is it possible to preserve the <canvas> elements to use for future animation frames?

What is the best way to conceal selected options in a MUI multiselect in the select field?

Generate a fresh JSON object by adjusting JSON data in Angular 6

Should the method of creating a Dropdown with Angular be considered a poor practice?

Tips on handling a Vue computed property

Steps for referencing an autogenerated id in a Firestore collection

Retrieve Files with Angular Framework

How can I use JavaScript to sort through an array and organize the data into groups?

Display a dialog box in jQuery UI 1.7 autocomplete when an item is selected

``Are you looking to create multiple canvases in a loop?