javascript - Search through json with keywords - Stack Overflow

admin管理员组

文章数量:1357294

I need some help with a small thing I am struggeling with. I have to create a general search input that searches though a json of music numbers. The user has to be able to type an album/track or artist in the searchbar and then he'll get the result. Like any other search bar does. Only this one searches based on keypresses instead of a submit button.

The part where I'm stuck is that I've received a large JSON file with more than 5000 entries. And my search bar has to be able to identify entries based on partially typed "keywords". So for instance if I want to search for madonna and I type in "mado" I should already get some madonna in my results ( of course its possible to get other entries that have mado in their title or someting! ).

Sorry for my lack of good grammar but I try my best to explain the situation as good as possible!

Now for the question! The thing I'm struggeling with is how I loop through a json file to search for these keywords. This is a small portion of the json I receive:

{
"1": {
    "track": "Dani California",
    "artist": "Red Hot Chili Peppers",
    "album": "Stadium Arcadium"
},
"2": {
    "track": "Tell me baby",
    "artist": "Red Hot Chili Peppers",
    "album": "Stadium Arcadium"
},
"3": {
    "track": "Snow (Hey Oh)",
    "artist": "Red Hot Chili Peppers",
    "album": "Stadium Arcadium"
}}

Normally I would create a function that is something like this:

for(var i = 0; i < data.length; i++){
if(data[i].album == 'red hot'){
    console.log(data[i].album)
}}

But in this case I want to loop through the json, looking for enties that contain the search value an save it to an object for later usage

Is it possible to do this all at once? So to check the artist/title/album at once, or would it be better to create a small filter?

If something is not clear about my explanation please met me know I tried my best to be as clear as I could be!

I need some help with a small thing I am struggeling with. I have to create a general search input that searches though a json of music numbers. The user has to be able to type an album/track or artist in the searchbar and then he'll get the result. Like any other search bar does. Only this one searches based on keypresses instead of a submit button.

The part where I'm stuck is that I've received a large JSON file with more than 5000 entries. And my search bar has to be able to identify entries based on partially typed "keywords". So for instance if I want to search for madonna and I type in "mado" I should already get some madonna in my results ( of course its possible to get other entries that have mado in their title or someting! ).

Sorry for my lack of good grammar but I try my best to explain the situation as good as possible!

Now for the question! The thing I'm struggeling with is how I loop through a json file to search for these keywords. This is a small portion of the json I receive:

{
"1": {
    "track": "Dani California",
    "artist": "Red Hot Chili Peppers",
    "album": "Stadium Arcadium"
},
"2": {
    "track": "Tell me baby",
    "artist": "Red Hot Chili Peppers",
    "album": "Stadium Arcadium"
},
"3": {
    "track": "Snow (Hey Oh)",
    "artist": "Red Hot Chili Peppers",
    "album": "Stadium Arcadium"
}}

Normally I would create a function that is something like this:

for(var i = 0; i < data.length; i++){
if(data[i].album == 'red hot'){
    console.log(data[i].album)
}}

But in this case I want to loop through the json, looking for enties that contain the search value an save it to an object for later usage

Is it possible to do this all at once? So to check the artist/title/album at once, or would it be better to create a small filter?

If something is not clear about my explanation please met me know I tried my best to be as clear as I could be!

• javascript
• json

Share Improve this question Follow edited Aug 10, 2017 at 14:21 Y4roc 1,13688 silver badges1212 bronze badges asked Aug 10, 2017 at 13:43 Tom LuijtenTom Luijten 19511 gold badge22 silver badges1212 bronze badges 6

• When you say JSON, is it a JSON string? You could indeed parse it and then filter through it. – Nisarg Shah Commented Aug 10, 2017 at 13:45
• @NisargShah the entries are huge. using keyup, it will take eternity to search through the entire doc and return false – Alan Pallath Commented Aug 10, 2017 at 13:47
• I had the same problem. If the JSON was small, you could use jQuery's keyup and loop through the json entries(by ajax call ) and use .equals to pare them with the input text entry from html – Alan Pallath Commented Aug 10, 2017 at 13:51
• 1 @Alan Pallath Yes I was aware of this. I build a short timeout for 0.3 sec and that resets every time another key is pressed between that 0.3 sec. So the search will only be used then where is no keyup for that 0.3 sec ;-) I will look into the .equals part! How would you save the entries that are 'equal'? Just create an array and fill those with the matching entries or something? – Tom Luijten Commented Aug 10, 2017 at 13:56
• push it to an array or something. and then use that for the next search. Can you post the 0.3sec code logic? can't PM here I think – Alan Pallath Commented Aug 10, 2017 at 14:07

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

I dont think searching 5000 entries should cause performance issues. Check out this code which should return the desired entries when you call search('text')

var data = JSON.parse('JSON DATA HERE') // dataset
var search_fields = ['track','artist','album'] //key fields to search for in dataset

function search(keyword){
    if(keyword.length<1) // skip if input is empty
        return

    var results = []

    for(var i in data){ // iterate through dataset
        for(var u=0;u<search_fields.length;u++){ // iterate through each key in dataset

            var rel = getRelevance(data[i][search_fields[u]],keyword) // check if there are matches

            if(rel==0) // no matches...
                continue // ...skip

            results.push({relevance:rel,entry:data[i]}) // matches found, add to results and store relevance
        }
    }

    results.sort(pareRelevance) // sort by relevance

    for(i=0;i<results.length;i++){
        results[i] = results[i].entry // remove relevance since it is no longer needed
    }

    return results
}

function getRelevance(value,keyword){
    value = value.toLowerCase() // lowercase to make search not case sensitive
    keyword = keyword.toLowerCase()

    var index = value.indexOf(keyword) // index of the keyword
    var word_index = value.indexOf(' '+keyword) // index of the keyword if it is not on the first index, but a word

    if(index==0) // value starts with keyword (eg. for 'Dani California' -> searched 'Dan')
        return 3 // highest relevance
    else if(word_index!=-1) // value doesnt start with keyword, but has the same word somewhere else (eg. 'Dani California' -> searched 'Cali')
        return 2 // medium relevance
    else if(index!=-1) // value contains keyword somewhere (eg. 'Dani California' -> searched 'forn')
        return 1 // low relevance
    else
        return 0 // no matches, no relevance
}

function pareRelevance(a, b) {
  return b.relevance - a.relevance
}

Since it's not an array you can't use Array.prototype.filter() unless you turn your object into an array. You could do this every time you get a new Json, no need to do this with every search.

var myArray = [];
for(var elementName in data) //We iterate over the Object to get the names of the nested objects
    myArray.push(data[elementName]); //We get the objects of the json and push them inside our array.

Then you can use .filter to filter your data, I remend using regex:

var userQuery = 'Mado' //user input
var myRegex = new RegExp('.*' + userQuery + '.*','gi'); //We create a new regular expression, this one tests if the text is contained within a string.

var filteredArray = myArray.filter(function(item){
    //We test each element of the object to see if one string matches the regexp.
    return (myRegex.test(item.track) || myRegex.test(item.artist) || myRegex.test(item.album))

}); 

filteredArray should be the elements of the json you need.

Array.prototype.filter MDN

RegeExp MDN

Here's a pattern I often use for filter functionalities. Some key points are:

1. Always build an index property that contains the appended string of the filterable values. For example, if the values of 'track','artist' and 'album' can be filtered on, then join their values into a string, and add that string as one of the properties to the original object.

   This helps quickly search using indexOf, rather than having to iterate through each object when filtering. It significantly improves the performance as those iterations and additional number of properties*number of objects parisons are no longer required. In your case, you'd be saving roughly 10k parisons and 15k iterations with every filter operation.

2. If the filter operation is case-insensitive, use toLowerCase while appending the values to build indexes. It also saves you from performing those many toLowerCase operations every time filter is called.

3. Always create an array of objects, rather than an object with object properties. I don't have specific stats on whether this improves performance or not, but it provides you some array methods such as array.filter or array.sort that you could utilize to improve UX. I haven't done that in the snippet, but you can do that quite easily while preparing the data.

var data = {
"1": {
    "track": "Dani California",
    "artist": "Red Hot Chili Peppers",
    "album": "Stadium Arcadium"
},
"2": {
    "track": "Tell me baby",
    "artist": "Red Hot Chili Peppers",
    "album": "Stadium Arcadium"
},
"3": {
    "track": "Snow (Hey Oh)",
    "artist": "Red Hot Chili Peppers",
    "album": "Stadium Arcadium"
}};

// One time activity!
// Build search indexes, for every object.
for(var prop in data) {
  if(data.hasOwnProperty(prop)) {
    var index = "";
    var item = data[prop];
    
    // Iterate over each object and build the index by appending the values of each property.
    for(var attr in item) {
      if(item.hasOwnProperty(attr)) {
        // Note: Different values are separated by a hash as hash # is unlikely to e into the search query.
        index = index + item[attr] + "#";
      }
    }
    
    // Insert the index property into the object.
    // Also notice the toLowerCase that allows for case insenstive searches later on.
    item.index = index.toLowerCase();
  }
}

console.log("Prepared data:" ,data);

// Filter process.
var key = "Sn";

var keyLowerCase = key.toLowerCase(); 

// Iterate over the objects and pare the index prpoerty to match with the search string.
var filteredData = [];
for(var prop in data) {
  if(data.hasOwnProperty(prop)) {
    var item = data[prop];
    
    if(item.index.indexOf(keyLowerCase) >= 0 ){
      filteredData.push(item);
    }
  }
}

console.log("Filtered data:", filteredData);

本文标签： javascriptSearch through json with keywordsStack Overflow