Display all items that contain a specified string using JavaScript

Question

Display all items that contain a specified string using JavaScript

I'm in need of some assistance with a problem that I've been struggling with. I have several JavaScript objects containing different data pieces as shown below:-

Object {id: 1, shopcounty: "cornwall", shopaddress: "the cycle centre,<br />1 new street,<br />penzance,<br />tr18 2lz<br />}
Object {id: 2, shopcounty: "cornwall", shopaddress: "heliport link road,<br />long rock,<br />bude,<br />tr18 3rg"}
Object {id: 3, shopcounty: "cornwall", shopaddress: "heliport link road,<br />long rock,<br />bude,<br />tr18 3rg"}
Object {id: 4, shopcounty: "cornwall", shopaddress: "west end cottage,<br />trescowe,<br />penzance,<br /&>tr20 9rn"}
Object {id: 5, shopcounty: "cornwall", shopaddress: "22 joannies watch,<br />saint ives,<br />tr26 2fr"}

What I'd like to achieve is to take a user input value and search the address of each object for a matching string, then return all details if there's a match.

For instance, if a user types in "bude" as their location, objects 2 and 3 should be returned along with their respective data. However, my current code seems to just return true for every object. I've tried using methods like match() and indexOf(), but still end up with all objects being returned.

<input id="submit" type="submit" name="form-submit">
// user input:  "bude, united kingdom"

<script>

    $('#submit').on('click tap', function(e){
        e.preventDefault();

        var userInput = document.getElementById('user-location').value;

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

            if($.inArray(userInput, bikeshops[i])){

                // console.log(bikeshops[i].shopaddress);
                // returns everything!
            }           
        }           
    });
</script>

javascript arrays javascript-objects

Answer 1

Answer №1

To implement this functionality, you can utilize the combination of Array.prototype.filter and String.prototype.indexOf. Here's how:

$('#submit').on('click tap', function(e){
    e.preventDefault();

    var userInput   = document.getElementById('user-location').value;

    var result = bikeshops.filter(function(o) {           // iterate through each object o in the array bikeshops
        return o.shopaddress.indexOf(userInput) !== -1;   // filter out objects with shopaddress property containing userInput
    });       

    console.log(result); // display only the objects matching the specified user input in their shopaddress property
});

Answer 2

To implement this functionality, you can utilize the combination of Array.prototype.filter and String.prototype.indexOf. Here's how:

$('#submit').on('click tap', function(e){
    e.preventDefault();

    var userInput   = document.getElementById('user-location').value;

    var result = bikeshops.filter(function(o) {           // iterate through each object o in the array bikeshops
        return o.shopaddress.indexOf(userInput) !== -1;   // filter out objects with shopaddress property containing userInput
    });       

    console.log(result); // display only the objects matching the specified user input in their shopaddress property
});

Answer 3

Answer №2

Below is a functional resolution:

$('#click').on('click tap', function (e) {
  e.preventDefault();

  var input = $('#user-info').val();
  
  var places = [
    {id: 1, city: "new york", address: "123 main street,<br />new york city,<br />ny 10001<br />"},
    {id: 2, city: "chicago", address: "456 maple avenue,<br />chicago,<br />il 60611"},
    {id: 3, city: "los angeles", address: "789 oak parkway,<br />los angeles,<br />ca 90001"}
   ];

  for (var j = 0; j < places.length; j++) {    
    if (places[j].address.indexOf(input) !== -1) {
      console.log(places[j].city.toUpperCase() + " - " + places[j].address);
    }           
  }           
});

<input id="user-info" placeholder="Enter location...">
<input id="click" type="submit" name="submit-form">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

Below is a functional resolution:

$('#click').on('click tap', function (e) {
  e.preventDefault();

  var input = $('#user-info').val();
  
  var places = [
    {id: 1, city: "new york", address: "123 main street,<br />new york city,<br />ny 10001<br />"},
    {id: 2, city: "chicago", address: "456 maple avenue,<br />chicago,<br />il 60611"},
    {id: 3, city: "los angeles", address: "789 oak parkway,<br />los angeles,<br />ca 90001"}
   ];

  for (var j = 0; j < places.length; j++) {    
    if (places[j].address.indexOf(input) !== -1) {
      console.log(places[j].city.toUpperCase() + " - " + places[j].address);
    }           
  }           
});

<input id="user-info" placeholder="Enter location...">
<input id="click" type="submit" name="submit-form">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

Answer №3

$('#search-trigger').on('click tap', function(e){
    e.preventDefault();

    let userQuery   = document.getElementById('user-search-term').value;
    //get array of search results based on user input
    let filteredResults = performSearch(userQuery, dataList); 

    
    let attributes = ['name','category'];

    //Generate HTML with the search results, you can modify it to be a <p> 
    createHtml(filteredResults, attributes, '#resultsList', 'div', 'section');

});



function performSearch(query, data){    
  return filteredData = data.filter((item)=>{
    return item.includes(query.trim());
  });  
}

function createHtml(dataArray, keys, id, tag, openingTag=''){
  let htmlContent = openingTag;
  dataArray.forEach((element)=>{
     let newElement = `<${tag}>`;
     keys.forEach((key)=>{
       newElement+=` ${element[key]}`;
     });
     newElement+=`</${tag}>`;
     htmlContent+=newElement;
  });
 if(openingTag!='') htmlContent+=`</${openingTag}>`; 
 $(id).html(htmlContent);
}

Answer 6

$('#search-trigger').on('click tap', function(e){
    e.preventDefault();

    let userQuery   = document.getElementById('user-search-term').value;
    //get array of search results based on user input
    let filteredResults = performSearch(userQuery, dataList); 

    
    let attributes = ['name','category'];

    //Generate HTML with the search results, you can modify it to be a <p> 
    createHtml(filteredResults, attributes, '#resultsList', 'div', 'section');

});



function performSearch(query, data){    
  return filteredData = data.filter((item)=>{
    return item.includes(query.trim());
  });  
}

function createHtml(dataArray, keys, id, tag, openingTag=''){
  let htmlContent = openingTag;
  dataArray.forEach((element)=>{
     let newElement = `<${tag}>`;
     keys.forEach((key)=>{
       newElement+=` ${element[key]}`;
     });
     newElement+=`</${tag}>`;
     htmlContent+=newElement;
  });
 if(openingTag!='') htmlContent+=`</${openingTag}>`; 
 $(id).html(htmlContent);
}

Display all items that contain a specified string using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Automated Desk: adjust page through programming

Interactive Thumbnail Selection for HTML5 Video

What is the best way to retrieve the ajax response using Ajax.Responders in prototype.js?

Issue: Connection Problem in React, Express, Axios

Setting the locale in an extended datapipe in Angular 4: A step-by-step guide

Encountering problem when trying to upload several images at once using a single input in CodeIgniter with

Utilizing NPM modules in the browser using Browserify for seamless integration

PHP code for adding values in an associative array based on keys

Is it possible to retrieve the HttpsError status from a Firebase function?

Animating a child element while still keeping it within its parent's bounds

Duplicate text content from a mirrored textarea and save to clipboard

Deactivate the Aloha Editor's sidebar

Display a sneak peek of the letter as you browse through the list

Tips for correctly saving an array to a file in node.js express using fs module

What is the best way to duplicate a 2D array (matrix) in Python using a C function, while also performing intensive computations, and then obtaining a new 2D array (matrix) in Python as the result

Update the observability status of one observable using a different observable

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

Utilize JSON Arrays within a JSON structure when programming in Java

What is the best way to minimize the number of requests sent in AngularJS?

When is the best time to access user credentials in the FirebaseUI authentication process?