Get Element von Array nach Wert in Javascript

Question

Ich habe einfachen Code, der mir verwandten Produkt basierend auf Tags anzeigen kann, aber ich möchte diesen Code erweitern, das kann ich mehr als ein Tag eingeben. In diesem Moment kann ich nur laufen:

Und ich habe jedes Produkt mit 'Tag1' in ihren Tags. In diesem Fall name1 und name2.

var products = [ 
    { 
    name: 'name1', 
    tags: ['tag1', 'tag2', 'tag3'], 
    }, 
    { 
    name: 'name2', 
    tags: ['tag1', 'tag3', 'tag4', 'tag5'], 
    }, 
    { 
    name: 'name3', 
    tags: ['tag2', 'tag5', 'tag6'], 
    } 

]; 

var finalHtml = ""; 

function category(tag) { 
    return products.filter(function(product){ 
    if (~product.tags.indexOf(tag)) { 
     finalHtml += '<li>' + product.name + '</li>'; 
     document.getElementById("related_prod").innerHTML = finalHtml; 
    } 
    }); 
} 

Was ich erwarte?

Wenn ich diesen Code ausführen wird:

<script type="text/javascript">category('tag1, tag6');</script> 

Ich möchte jedes Produkt sehen, die tag1 OR tag2 in ihren Tags hat. In diesem Fall sollte es name1 und name3 sein.

Answer 1

Hier wird eine Lösung mit ECMAScript2015:

var products = [ 
 
    { 
 
    name: 'name1', 
 
    tags: ['tag1', 'tag2', 'tag3'], 
 
    }, 
 
    { 
 
    name: 'name2', 
 
    tags: ['tag1', 'tag3', 'tag4', 'tag5'], 
 
    }, 
 
    { 
 
    name: 'name3', 
 
    tags: ['tag2', 'tag5', 'tag6'], 
 
    } 
 
]; 
 

 
function category(...tags) { 
 
    let related = document.getElementById("related_prod"); 
 
    // clear output 
 
    related.innerHTML = ''; 
 
    // turn array values into object properties for faster lookup 
 
    tags = tags.reduce((tags, tag) => (tags[tag] = 1, tags), {}); 
 
    // find products that have at least one of the tags 
 
    products.filter(product => product.tags.some(tag => tags[tag])) 
 
      // display the names of the found products 
 
      .forEach(product => { 
 
       let li = document.createElement('li'); 
 
       li.textContent = product.name; 
 
       related.appendChild(li); 
 
      }); 
 
} 
 

 
category('tag4','tag5');

<ul id="related_prod"></ul>

Answer 2

Dies kann mor allgemein wie ich von Ihrer Anforderung verstehen Sie „oder“ nicht „und“ so die Antwort gesucht werden kann:

function category() { 
    var args = Array.prototype.slice.call(arguments); 
    return products.filter(function(product){ 
    args.forEach(function(arg){ 
    if (product.tags.indexOf(arg)> -1) {// readability 
     finalHtml += '<li>' + product.name + '</li>'; 
     document.getElementById("related_prod").innerHTML = finalHtml; 
    } 
    }) 
    }); 
} 

bearbeiten: Für eine bessere Lösung, die eine gute Trennung haben und lesbar ein (vorausgesetzt, Sie ECMAScript5 Shim verwenden)

function findProducts(){ 
    var args = Array.prototype.slice.call(arguments); 
    var foundProducts = []; 
    products.forEach(function(product) { 
     args.forEach(function(arg){ 
      if(product.tags.indexOf(arg) > -1 && foundProdutcs.indexOf(product) == -1) 
       foundProducts.push(product); 
     } 
    }); 
    return foundProducts; 

} 
function doSomethingWithTheProducts() { 
    var products = findProducts.apply(this,arguments); 
    var finalHtml = ""; 
    products.forEach(function(product){ 
     finalHtml += "<li>" + product.name + "</li">; 
    }); 
    document.getElementById("related_prod").innerHTML = finalHtml; 
} 

doSomethingWithTheProducts('tag1','tag2');