D'accord, c'est un peu délicat de mon côté. J'ai deux fichiers JSON, nourriture.json et rest_category.json. J'essaie de trouver un moyen de filtrer les aliments dans la nourriture.json sur la base de la catégorie dans Rest_Category.json. J'ai eu une idée que je devrais peut-être ajouter un étranger_id dans la nourriture.json qui correspond à l'ID dans la catégorie dans Rest_Category.json. Néanmoins, comment puis-je procéder de là? Y a-t-il une façon de tenter cela? Je l'apprécierais vraiment. Merci
Vous trouverez ci-dessous un échantillon de ma nourriture.json et rest_category.json.
aliment.json rest_category.json juste pour ajouter, la réponse doit être affichée sur une page HTML. Je suis actuellement en mesure d'ajouter une liste de catégories et d'aliments. Coincé sur la section du filtre.
Vous trouverez ci-dessous mon exemple de code que j'ai utilisé pour ajouter les catégories et la nourriture. // affiche les produits du fichier JSON }); // Afficher les catégories d'affichage du fichier JSON
3 Réponses :
Vous devriez essayer d'essayer de Array .Filter () Méthode:
p>
const arr = [
{
"id": "1",
"Name": "Coke 500ml",
"Price": "80",
"Quantity": "50",
"Category": "Beverages"
},
{
"id": "2",
"Name": "Cake",
"Price": "150",
"Quantity": "40",
"Category": "Appetizer"
},
{
"id": "3",
"Name": "Beef Ribs",
"Price": "100",
"Quantity": "50",
"Category": "Side Items"
},
{
"id": "4",
"Name": "Cabbage Salad",
"Price": "50",
"Quantity": "30",
"Category": "Salads"
},
{
"id": "5",
"Name": "Cake",
"Price": "150",
"Quantity": "30",
"Category": "Appetizer"
},
{
"id": "6",
"Name": "Beef Ribs",
"Price": "100",
"Quantity": "30",
"Category": "Side Items"
}
];
function filterArrayByCategory(category) {
return arr.filter(el => el.Category === category);
}
console.log(filterArrayByCategory('Appetizer'));Ça marche parfaitement. mais ceci est mon problème..Le problème de spécification de la catégorie dans le fichier JavaScript comme SO Console.log (filteraraybycategory ("apéritif")); J'en ai besoin pour être comme, quand je clique sur une catégorie Sur une page, il affiche des aliments associés à cette catégorie.
Il suffit d'utiliser p> array.map code> et array.filter code>:
let products = [
{
"id":"1",
"Name":"Coke 500ml",
"Price":"80",
"Quantity": "50",
"Category":"Beverages"
},
{
"id":"2",
"Name":"Cake",
"Price":"150",
"Quantity": "40",
"Category":"Appetizer"
},
{
"id":"3",
"Name":"Beef Ribs",
"Price":"100",
"Quantity": "50",
"Category":"Side Items"
},
{
"id":"4",
"Name":"Cabbage Salad",
"Price":"50",
"Quantity": "30",
"Category":"Salads"
},
{
"id":"5",
"Name":"Cake",
"Price":"150",
"Quantity": "30",
"Category":"Appetizer"
},
{
"id":"6",
"Name":"Beef Ribs",
"Price":"100",
"Quantity": "30",
"Category":"Side Items"
}
];
let categories = [
{
"id" : "1",
"name" : "Appetizers",
"Status" : "Active"
},
{
"id" : "2",
"name" : "Salads",
"Status" : "Active"
},
{
"id" : "3",
"name" : "Entrees",
"Status" : "Active"
},
{
"id" : "4",
"name" : "Side Items",
"Status" : "Active"
},
{
"id" : "5",
"name" : "Beverages",
"Status" : "Active"
}
];
let result = categories.map(c=>{
return {
...c,
products : products.filter(p=>p.Category===c.name)
}
})
console.log(JSON.stringify(result,null,2));
Maintenant, vous pouvez montrer votre catégorie / produits de Tree Way.
Afin de vous aider à atteindre vos objectifs, je vais ajouter une autre réponse, ce qui vous montrera une autre approche. Veuillez l'utiliser comme référence et adaptez votre code en fonction de votre implémentation actuelle:
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='categories'></select>
<table id='availableFoodByCategory' style='display:none;'>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>Veuillez envisager d'approuver ma réponse, si cela résout vraiment votre problème et correspond à vos attentes
Quel est l'échantillon de la réponse que vous attendez
Il devrait être affiché sur une page. Je suis actuellement capable d'afficher la nourriture et la catégorie, mais impossible d'effectuer le filtre.