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

Next.js 14 useEffect firing twice upon page load

Using Node.js to send a photo through a Telegram Bot

Is the parent node of the input element the input element itself?

"Encountering issues with Node.js while loading required modules

Utilize SectionList and a custom header view on Y to achieve a translation effect that creates a visually appealing empty space as

Unable to locate the <router-view> component within VueRouter

Clicking 'Submit' triggers a continuous loop upon loading

What steps should be taken to switch a class from one li element to another and remove it in the process?

Guide on incorporating JSON information into an HTML table

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I

Dynamically Insert a Row into a Table using Bootstrap and JavaScript

Display the JSON object when making requests to the Instagram API

Solving complex promises in both serial and parallel fashion

How can I use Ajax to show only one div on the entire page while keeping the CSS and other header content intact

In JavaScript, alert a message once all images have been clicked

The Node function will yield a BluebirdJS Promise

Object.assign changes the original array object in place

The word "yargs" will not activate a command within a script

Would you suggest using angularjs for authentication in large-scale applications?

When attempting to submit information to a database table, I encounter an error in the browser console: "Uncaught (in promise) Error: Request failed with status code 404."