How to set Message for an Invalid Input in Javascript?

Question

I have an array of objects.

let mainMenu = [
    {
        brand: "Zara",
        type: "Shirt",
        gender: ["Men", "Women", "Boys", "Girls"],
        size: "Small",
        image: "",
        description: "",
        price: "300",
        colour: "Red",
        stock: "10",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Nike",
        type: "Shirt",
        gender: ["Men", "Women", "Boys"],
        size: "Medium",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "20",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Adidas",
        type: "Shirt",
        gender: ["Men", "Women"],
        size: "Large",
        image: "",
        description: "",
        price: "700",
        colour: "Red",
        stock: "30",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Puma",
        type: "tShirt",
        gender: ["Boys", "Girls"],
        size: "Small",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "40",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Nike",
        type: "tShirt",
        gender: ["Men", "Women", "Girls"],
        size: "Medium",
        image: "",
        description: "",
        price: "400",
        colour: "Red",
        stock: "50",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Zara",
        type: "tShirt",
        gender: ["Women", "Boys", "Girls"],
        size: "Large",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "40",
        discount: 5,
        rating: "5"
    },
    {
        brand: "USPA",
        type: "Jeans",
        gender: ["Men"],
        size: "Small",
        image: "",
        description: "",
        price: "2000",
        colour: "Red",
        stock: "30",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Adidas",
        type: "Jeans",
        gender: ["Women"],
        size: "Medium",
        image: "",
        description: "",
        price: "2500",
        colour: "Red",
        stock: "20",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Puma",
        type: "Jeans",
        gender: ["Boys"],
        size: "Large",
        image: "",
        description: "",
        price: "3000",
        colour: "Red",
        stock: "10",
        discount: 5,
        rating: "4"
    }
];

I want to Show the whole items that Match Gender name. My input is let searchForGender = "Men"; Below is the function and working fine.

function getClothesAvaGen() {
    mainMenu.forEach(obj => {
        for (let i = 0; i < obj["gender"].length; i++) {
            if (obj["gender"][i] === searchForGender && searchForType === "" && searchForSize === "" && searchForBrand === ""
                && searchForStock === "" && searchForPrice === "" && searchForRating === "") {
                console.log(obj)
                document.write("gender : " + obj["gender"][i] + "<br>" + "type : " + obj["type"] + "<br>" + "size : " + obj["size"] + "<br>" + "brand : " + obj["brand"] + "<br>" +
                    "price : " + obj["price"] + "<br>" + "stock : " + obj["stock"] + "<br>" + "rating : " + obj["rating"] + "<br>" + "<br>")
            }
        }
    });
}
getClothesAvaGen();

Output:

gender : Men
type : Shirt
size : Small
brand : Zara
price : 300
stock : 10
rating : 4

gender : Men
type : Shirt
size : Medium
brand : Nike
price : 600
stock : 20
rating : 5

gender : Men
type : Shirt
size : Large
brand : Adidas
price : 700
stock : 30
rating : 5

gender : Men
type : tShirt
size : Medium
brand : Nike
price : 400
stock : 50
rating : 4

gender : Men
type : Jeans
size : Small
brand : USPA
price : 2000
stock : 30
rating : 4

But I want to set 'No Match Found' for input like "Men1", "MenAbc" or for any other invalid input. How and Where can I set this in my above written code. 'No Match Found' should appear only once for a wrong input.

Side Note: You are using `document.write()` which is bad practice. You should manipulate the DOM. Here is a great article expressing why `document.write()` is bad and provides great information on [alternative solutions](https://stackoverflow.com/questions/4537963/what-are-alternatives-to-document-write/27531116#27531116) — Christopher Ellis, Feb 01 '21 at 18:58

score 0 · Answer 1 · answered Feb 01 '21 at 18:38

Right after the for loop, like this

function getClothesAvaGen() {
    mainMenu.forEach(obj => {

        let isNotFound = true

        for (let i = 0; i < obj["gender"].length; i++) {
            if (obj["gender"][i] === searchForGender && searchForType === "" && searchForSize === "" && searchForBrand === ""
                && searchForStock === "" && searchForPrice === "" && searchForRating === "") {
                isFound = false
                console.log(obj)
                document.write("gender : " + obj["gender"][i] + "<br>" + "type : " + obj["type"] + "<br>" + "size : " + obj["size"] + "<br>" + "brand : " + obj["brand"] + "<br>" +
                    "price : " + obj["price"] + "<br>" + "stock : " + obj["stock"] + "<br>" + "rating : " + obj["rating"] + "<br>" + "<br>")
            }
        }

        if(isNotFound) {
           // do something
        }
    });
}
getClothesAvaGen();

score 0 · Answer 2 · answered Feb 02 '21 at 08:00

You can use array.filter and array.includes functions to make it easier.

function getClothesAvaGen(){
  // filter items those their gender, includes our searchForGender term.
  let availableItems = mainMenu.filter(item => item['gender'].includes(searchForGender));

  // if not found such items then print no match and get out of function.
  if (availableItems.length == 0){
    console.log('No Match');
    return;
  }

  //If found , for each of them, print some data
  availableItems.forEach(obj =>{
    console.log("gender : " + searchForGender + "\n" + "Brand : " + obj['brand'] + "\n" + "Other Data...")});
}

getClothesAvaGen();

let mainMenu = [
    {
        brand: "Zara",
        type: "Shirt",
        gender: ["Men", "Women", "Boys", "Girls"],
        size: "Small",
        image: "",
        description: "",
        price: "300",
        colour: "Red",
        stock: "10",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Nike",
        type: "Shirt",
        gender: ["Men", "Women", "Boys"],
        size: "Medium",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "20",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Adidas",
        type: "Shirt",
        gender: ["Men", "Women"],
        size: "Large",
        image: "",
        description: "",
        price: "700",
        colour: "Red",
        stock: "30",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Puma",
        type: "tShirt",
        gender: ["Boys", "Girls"],
        size: "Small",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "40",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Nike",
        type: "tShirt",
        gender: ["Men", "Women", "Girls"],
        size: "Medium",
        image: "",
        description: "",
        price: "400",
        colour: "Red",
        stock: "50",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Zara",
        type: "tShirt",
        gender: ["Women", "Boys", "Girls"],
        size: "Large",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "40",
        discount: 5,
        rating: "5"
    },
    {
        brand: "USPA",
        type: "Jeans",
        gender: ["Men"],
        size: "Small",
        image: "",
        description: "",
        price: "2000",
        colour: "Red",
        stock: "30",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Adidas",
        type: "Jeans",
        gender: ["Women"],
        size: "Medium",
        image: "",
        description: "",
        price: "2500",
        colour: "Red",
        stock: "20",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Puma",
        type: "Jeans",
        gender: ["Boys"],
        size: "Large",
        image: "",
        description: "",
        price: "3000",
        colour: "Red",
        stock: "10",
        discount: 5,
        rating: "4"
    }
];
let searchForGender = "Men";
function getClothesAvaGen(){
  let availableItems = mainMenu.filter(item => item['gender'].includes(searchForGender));
  if (availableItems.length == 0){
    console.log('No Match');
    return;
  }
  availableItems.forEach(obj =>{
    console.log("gender : " + searchForGender + "\n" + "Brand : " + obj['brand'] + "\n" + "Other Data...")});
}

getClothesAvaGen();

AbbasEbadian- Thanks for this help. If available, please check https://stackoverflow.com/q/66059947/15069520 — kuldeep, Feb 05 '21 at 10:13

How to set Message for an Invalid Input in Javascript?

2 Answers2

Linked