Search code examples
javascriptjqueryjsonselectoptgroup

Use a 'Like' statement to find similar values in JSON data

I have some JSON data. I cam trying to get similar values from it. Is there any ways to use javascript to do that? I am getting my JSON from the server. But I have a sample. I am trying to load different browser versions into their optgroups.

Is there a way to do that?

JSON:

[
{
    "browser": "Amazon Silk 3.30"
},
{
    "browser": "Amazon Silk 49.2"
},
{
    "browser": "Edge 42.11"
},
{
    "browser": "Edge 42.15"
},
{
    "browser": "Google Chrome 0.01"
},
{
    "browser": "Google Chrome 0.03"
}
]

HTML

<select id="browsers" style="max-height: 150px; overflow: auto;"></select>

JavaScript

$.getJSON(jsonBrowser, function(data) {
    data.forEach((d, i) => {
        let browser_val = d.browser.replace(/ /g, "%20");
        $('#browsers').append(`<option value=${browser_val} selected>${d.browser}</option>`);
    });
});
}

Result: Right now, this code only populates by dropdown. 

 Amazon Silk 3.30
 Amazon Silk 49.2
 Edge 42.11
 Edge 42.15
 Google Chrome 0.01
 Google Chrome 0.03

Result I need: I want to use optgroups in my dropdown to show:

**Amazon**:
 Amazon Silk 3.30
 Amazon Silk 49.2
**Edge**:
 Edge 42.11
 Edge 42.15
**Google**:
 Google Chrome 0.01
 Google Chrome 0.03

Is there a way to group them using JavaScript/jQuery?

Solution

  • Is the json ordered correctly? In the current state of your code the optgroups would only make sense if all similar browser appear after each other. But what if you have edge, then chrome and then edge again? In this case I would split it in 2 loops

    1) loop through the json and push values into new array based on their name

    2) loop through the new array and build the content

    var example = [
{
    "browser": "Amazon Silk 3.30"
},
{
    "browser": "Amazon Silk 49.2"
},
{
    "browser": "Edge 42.11"
},
{
    "browser": "Edge 42.15"
},
{
    "browser": "Google Chrome 0.01"
},
{
    "browser": "Google Chrome 0.03"
},
{
    "browser": "Edge 42.13"
},
{
    "browser": "Amazon Silk 50"
}
]

var grouped_browsers = {
    'Edge': [],
    'Amazon': [],
    'Chrome': []
};
$.each(example, function() {
    if (this.browser.indexOf('Edge') !== -1) {
        grouped_browsers['Edge'].push(this.browser);
    } else if (this.browser.indexOf('Amazon') !== -1) {
        grouped_browsers['Amazon'].push(this.browser);
    } else if (this.browser.indexOf('Chrome') !== -1) {
        grouped_browsers['Chrome'].push(this.browser);
    } else {
        grouped_browsers['Other'].push(this.browser);
    }
});

var rendered_groups = '';
var formatted_browsers = {
    'Amazon': 'Amazon Silk',
    'Chrome': 'Google Chrome',
    'Edge': 'Edge'
};
$.each(grouped_browsers, function(key, value) {
    rendered_groups += '<optgroup label="'+formatted_browsers[key]+'">';
    $.each(value, function() {
        rendered_groups += '<option value="'+this+'">'+this+'</option>';
    });
    rendered_groups += '</optgroup>';

});
$('#browsers').html(rendered_groups);

    I made a fiddle with a simple solution https://jsfiddle.net/rLbzs1ky/1/.