Browsing a collection of objects in JavaScript to sift through them

Question

Browsing a collection of objects in JavaScript to sift through them

I have a situation where I created an array of objects and implemented a function to loop through this array, generating HTML elements and populating them with values from the objects. These elements are appended to existing HTML tags on the page. Currently, the result is a list displayed on the webpage. However, I am seeking assistance in utilizing user input to filter through the array of objects. I want to display only the values that match the user's input. Can anyone provide guidance or help?

let internationalCountries = [
    {
        name: "Spain",
        method: "Delivery",
        price: "£10.99",
    },
    {
        name: "Germany",
        method: "Delivery",
        price: "£8.99",
    },
    {
        name: "Japan",
        method: "Delivery",
        price: "£39.99",
    },
]

let renderCountryList = () => {
    let list;
    let itemName = "";
    let para1;
    let para2;
    let method = "";
    let price = "";
    let ul = document.querySelector('.country-list')
    let deliveryInfo = document.querySelector('.delivery-info')
    for (let i = 0; i < internationalCountries.length; i++){
        list = document.createElement('li')
        itemName = document.createTextNode(internationalCountries[i].name)
        list.appendChild(itemName)
        ul.appendChild(list)
        para1 = document.createElement('p')
        para2 = document.createElement('p')
        method = document.createTextNode(internationalCountries[i].method)
        price = document.createTextNode(internationalCountries[i].price)
        para1.appendChild(method)
        para2.appendChild(price)
        deliveryInfo.appendChild(para1)
        deliveryInfo.appendChild(para2)
    }
}
renderCountryList()

<input type="text" placeholder="Search..." id="searchInput">
<div>
  <ul class="country-list">
  
  </ul>
</div>
<div class="delivery-info">

</div>

javascript

Answer 1

Answer №1

Here is the solution:

Check out the live demo here: CODEPEN solution

<input type="text" placeholder="Search..." id="searchInput">
<div id="info-wrapper">
  <div>
    <ul class="country-list">

    </ul>
  </div>
  <div class="delivery-info">

  </div>
</div>

const internationalCountries = [
    {
        name: "Spain",
        method: "Delivery",
        price: "£10.99",
    },
    {
        name: "Germany",
        method: "Delivery",
        price: "£8.99",
    },
    {
        name: "Japan",
        method: "Delivery",
        price: "£39.99",
    }
]

const backToStartStage = () => {
    let divSection = document.querySelector('#info-wrapper')
    divSection.innerHTML = '<div><ul class="country-list"></ul></div><div class="delivery-info"></div>'
}

const renderCountryList = (country) => {
    let list;
    let itemName = "";
    let para1;
    let para2;
    let method = "";
    let price = "";
    let ul = document.querySelector('.country-list')
    let deliveryInfo = document.querySelector('.delivery-info')
    
    list = document.createElement('li')
    itemName = document.createTextNode(country.name)
    list.appendChild(itemName)
    ul.appendChild(list)
    para1 = document.createElement('p')
    para2 = document.createElement('p')
    method = document.createTextNode(country.method)
    price = document.createTextNode(country.price)
    para1.appendChild(method)
    para2.appendChild(price)
    deliveryInfo.appendChild(para1)
    deliveryInfo.appendChild(para2)
}

$(document).ready(function(){
  $("input#searchInput").keyup(function(){
    const input = $("input#searchInput").val();
    const found = internationalCountries.filter(country => {
      return country.name.toUpperCase() === input.toUpperCase()
    })
    if(found.length > 0) {
       backToStartStage()
       renderCountryList(found[0])
    } else {
      backToStartStage()
    }
  });
});

Answer 2

Here is the solution:

Check out the live demo here: CODEPEN solution

<input type="text" placeholder="Search..." id="searchInput">
<div id="info-wrapper">
  <div>
    <ul class="country-list">

    </ul>
  </div>
  <div class="delivery-info">

  </div>
</div>

const internationalCountries = [
    {
        name: "Spain",
        method: "Delivery",
        price: "£10.99",
    },
    {
        name: "Germany",
        method: "Delivery",
        price: "£8.99",
    },
    {
        name: "Japan",
        method: "Delivery",
        price: "£39.99",
    }
]

const backToStartStage = () => {
    let divSection = document.querySelector('#info-wrapper')
    divSection.innerHTML = '<div><ul class="country-list"></ul></div><div class="delivery-info"></div>'
}

const renderCountryList = (country) => {
    let list;
    let itemName = "";
    let para1;
    let para2;
    let method = "";
    let price = "";
    let ul = document.querySelector('.country-list')
    let deliveryInfo = document.querySelector('.delivery-info')
    
    list = document.createElement('li')
    itemName = document.createTextNode(country.name)
    list.appendChild(itemName)
    ul.appendChild(list)
    para1 = document.createElement('p')
    para2 = document.createElement('p')
    method = document.createTextNode(country.method)
    price = document.createTextNode(country.price)
    para1.appendChild(method)
    para2.appendChild(price)
    deliveryInfo.appendChild(para1)
    deliveryInfo.appendChild(para2)
}

$(document).ready(function(){
  $("input#searchInput").keyup(function(){
    const input = $("input#searchInput").val();
    const found = internationalCountries.filter(country => {
      return country.name.toUpperCase() === input.toUpperCase()
    })
    if(found.length > 0) {
       backToStartStage()
       renderCountryList(found[0])
    } else {
      backToStartStage()
    }
  });
});

Answer 3

Answer №2

To trigger a function when the user types in an input field, you can utilize the onkeyup() method and pass the value of the input to a specified function such as printResults(). This function will then clear any existing content within the ul and div, and proceed to filter the results based on the input value. If the filtered results return an empty array, nothing will happen; otherwise, it will iterate through each result using a forEach loop.

Tip: breaking down your code into smaller functions can greatly improve its readability and maintainability.

Give it a try:

let internationalCountries = [
    {
        name: "France",
        method: "Standard Shipping",
        price: "$12.99",
    },
    {
        name: "Italy",
        method: "Express Shipping",
        price: "$15.99",
    },
    {
        name: "Australia",
        method: "DHL Express",
        price: "$29.99",
    },
];

const filterData = (val) => {
  val = val.toLowerCase().trim();
  return internationalCountries.filter(item => item.name.toLowerCase() == val);
}

const printResults  = (val) => {
  let ul = document.querySelector('.country-list');
  let shippingDetails = document.querySelector('.shipping-details');
  ul.innerHTML = "";
  shippingDetails.innerHTML = "";
  
  let results = filterData(val);
  
  results.forEach((item, index) => {
    createListElement(ul, item.name);
    createP(shippingDetails, item.method);
    createP(shippingDetails, item.price);
  });
}

const createListElement = (ul, val) => {
  let list = document.createElement('li');
  let itemName = document.createTextNode(val);
  list.appendChild(itemName);
  ul.appendChild(list);
}

const createP = (div, val) => {
  let p = document.createElement('p');
  let text = document.createTextNode(val);
  p.appendChild(text);
  div.appendChild(p);
}

<input type="text" placeholder="Search..." id="searchInput" value="" onkeyup="printResults(this.value)" />
<div>
  <ul class="country-list">
  
  </ul>
</div>
<div class="shipping-details">

</div>

Answer 4

To trigger a function when the user types in an input field, you can utilize the onkeyup() method and pass the value of the input to a specified function such as printResults(). This function will then clear any existing content within the ul and div, and proceed to filter the results based on the input value. If the filtered results return an empty array, nothing will happen; otherwise, it will iterate through each result using a forEach loop.

Tip: breaking down your code into smaller functions can greatly improve its readability and maintainability.

Give it a try:

let internationalCountries = [
    {
        name: "France",
        method: "Standard Shipping",
        price: "$12.99",
    },
    {
        name: "Italy",
        method: "Express Shipping",
        price: "$15.99",
    },
    {
        name: "Australia",
        method: "DHL Express",
        price: "$29.99",
    },
];

const filterData = (val) => {
  val = val.toLowerCase().trim();
  return internationalCountries.filter(item => item.name.toLowerCase() == val);
}

const printResults  = (val) => {
  let ul = document.querySelector('.country-list');
  let shippingDetails = document.querySelector('.shipping-details');
  ul.innerHTML = "";
  shippingDetails.innerHTML = "";
  
  let results = filterData(val);
  
  results.forEach((item, index) => {
    createListElement(ul, item.name);
    createP(shippingDetails, item.method);
    createP(shippingDetails, item.price);
  });
}

const createListElement = (ul, val) => {
  let list = document.createElement('li');
  let itemName = document.createTextNode(val);
  list.appendChild(itemName);
  ul.appendChild(list);
}

const createP = (div, val) => {
  let p = document.createElement('p');
  let text = document.createTextNode(val);
  p.appendChild(text);
  div.appendChild(p);
}

<input type="text" placeholder="Search..." id="searchInput" value="" onkeyup="printResults(this.value)" />
<div>
  <ul class="country-list">
  
  </ul>
</div>
<div class="shipping-details">

</div>

Answer 5

Answer №3

Provide some example input for the input field and show sample results in the list. Do you plan to search only by country name or do you require additional configuration? Please include those specifics as well.

If your search criteria is limited to country names, you can utilize the following code snippet:

let internationalCountries = [
    {
        name: "Spain",
        method: "Delivery",
        price: "£10.99",
    },
    {
        name: "Germany",
        method: "Delivery",
        price: "£8.99",
    },
    {
        name: "Japan",
        method: "Delivery",
        price: "£39.99",
    },
]

let onChangeText = (e) => {
    renderCountryList(e.target.value);
}

document.querySelector('#searchInput').addEventListener('keyup', onChangeText);

let renderCountryList = (searchedName) => {
    let list;
    let itemName = "";
    let para1;
    let para2;
    let method = "";
    let price = "";
    let ul = document.querySelector('.country-list')
    let deliveryInfo = document.querySelector('.delivery-info')
    ul.innerHTML = null;
    deliveryInfo.innerHTML = null;
    
    res = searchedName ? internationalCountries.filter(item => item.name.toLowerCase().indexOf(searchedName.toLowerCase()) > -1) : [...internationalCountries];
    for (let i = 0; i < res.length; i++){
        list = document.createElement('li')
        itemName = document.createTextNode(res[i].name)
        list.appendChild(itemName)
        ul.appendChild(list)
        para1 = document.createElement('p')
        para2 = document.createElement('p')
        method = document.createTextNode(res[i].method)
        price = document.createTextNode(res[i].price)
        para1.appendChild(method)
        para2.appendChild(price)
        deliveryInfo.appendChild(para1)
        deliveryInfo.appendChild(para2)
    }
}
renderCountryList()

<input type="text" placeholder="Search..." id="searchInput" >
<div>
  <ul class="country-list">
  
  </ul>
</div>
<div class="delivery-info">

</div>

Answer 6

Provide some example input for the input field and show sample results in the list. Do you plan to search only by country name or do you require additional configuration? Please include those specifics as well.

If your search criteria is limited to country names, you can utilize the following code snippet:

let internationalCountries = [
    {
        name: "Spain",
        method: "Delivery",
        price: "£10.99",
    },
    {
        name: "Germany",
        method: "Delivery",
        price: "£8.99",
    },
    {
        name: "Japan",
        method: "Delivery",
        price: "£39.99",
    },
]

let onChangeText = (e) => {
    renderCountryList(e.target.value);
}

document.querySelector('#searchInput').addEventListener('keyup', onChangeText);

let renderCountryList = (searchedName) => {
    let list;
    let itemName = "";
    let para1;
    let para2;
    let method = "";
    let price = "";
    let ul = document.querySelector('.country-list')
    let deliveryInfo = document.querySelector('.delivery-info')
    ul.innerHTML = null;
    deliveryInfo.innerHTML = null;
    
    res = searchedName ? internationalCountries.filter(item => item.name.toLowerCase().indexOf(searchedName.toLowerCase()) > -1) : [...internationalCountries];
    for (let i = 0; i < res.length; i++){
        list = document.createElement('li')
        itemName = document.createTextNode(res[i].name)
        list.appendChild(itemName)
        ul.appendChild(list)
        para1 = document.createElement('p')
        para2 = document.createElement('p')
        method = document.createTextNode(res[i].method)
        price = document.createTextNode(res[i].price)
        para1.appendChild(method)
        para2.appendChild(price)
        deliveryInfo.appendChild(para1)
        deliveryInfo.appendChild(para2)
    }
}
renderCountryList()

<input type="text" placeholder="Search..." id="searchInput" >
<div>
  <ul class="country-list">
  
  </ul>
</div>
<div class="delivery-info">

</div>

Answer 7

Answer №4

Create a simple layout with

HTML

<input type="text" placeholder="Enter query here" onkeyup="searchFunction(this.value)" />
<ul class="results-list"&rt;</ul>

Javascript

<script>
let searchResults = [{name: "Apple",category: "Fruit",price: "$1.99"},{name: "Banana",category: "Fruit",price: "$0.99"},{name: "Orange",category: "Fruit",price: "$2.49"}];
const searchFunction  = (val) => {
  let ul = document.querySelector('.results-list');
  ul.innerHTML = '';
  let results = searchResults.filter(({name, category, price}) => (name+category+price).toLowerCase().includes(val));
  results.forEach((item, index) => {
    ul.innerHTML += `<li>${item.name}<p>${item.category}</p><p>${item.price}</p></li>`;
  });
}
</script>

Answer 8

Create a simple layout with

HTML

<input type="text" placeholder="Enter query here" onkeyup="searchFunction(this.value)" />
<ul class="results-list"&rt;</ul>

Javascript

<script>
let searchResults = [{name: "Apple",category: "Fruit",price: "$1.99"},{name: "Banana",category: "Fruit",price: "$0.99"},{name: "Orange",category: "Fruit",price: "$2.49"}];
const searchFunction  = (val) => {
  let ul = document.querySelector('.results-list');
  ul.innerHTML = '';
  let results = searchResults.filter(({name, category, price}) => (name+category+price).toLowerCase().includes(val));
  results.forEach((item, index) => {
    ul.innerHTML += `<li>${item.name}<p>${item.category}</p><p>${item.price}</p></li>`;
  });
}
</script>

Browsing a collection of objects in JavaScript to sift through them

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Converting & Modifying a PHP array variable into JavaScript

Hey there, what exactly does 'TypeError: Cannot access the 'scopedFn' property of an undefined object' mean?

Using memoization with lodash isEqual to compare property objects

Issue with directive not activating when attribute is changed

Transferring specific form data through a POST request

Guide on deploying a Next.js React project with IIS on a Windows Server

button for resetting the zoom in Highcharts

What is causing the premature termination of the for loop?

Modify the style of ckeditor's <span> attribute

When a model.find is passed as an argument to be invoked, it results in an error

Is it possible to pass a variable as an input parameter in the Date constructor when creating a timestamp in Firebase

Evaluating operational Angular component - Error: $(...).somename function is not defined

Identifying an Android device using Javascript or jQuery

Is there a shorter method to continuously run a function based on keypress in a specific scenario?

Filtering nested JSON objects of children using a specific value in Angular 8

Renewing Firebase User Token in Angular Using HTTP Interceptor

Can a menu with data-toggle='dropdown' remain visible even after clicking on it?

What is the best way to transmit extra data when tunneling a TLS connection?

Vue 2 draggable does not maintain reactivity when the v-model value consists of a parent tag's iterable

Exploring VueJs 3's Composition API with Jest: Testing the emission of input component events