vendredi 5 février 2021

how to clear or overwrite document.write() on browser when my next filter(basically a condition) match in JS

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"
    }
];

let filteredArr = [];
filteredArr = mainMenu;

I want to Check if an item exist (e.g Shirt) then show it using document.write(). My input is: let searchForType = "Shirt";.

My code is as follow.

function fetchItemsByType() {
    let isItemAva = filteredArr.filter(obj => obj["type"] === searchForType);
    isItemAva.forEach(obj => {
        for (let i = 0; i < obj["type"].length; i++) {
            if (obj["type"] === searchForType) {
            }
        }
        document.write(obj["type"] + " of " + obj["size"] + " size is Available for " + obj["gender"] + "<br>" + "<br>")
    });
    return isItemAva;
}
let getItemsByType = fetchItemsByType();

if (searchForType === searchForType) {
    console.log(getItemsByType);
}

Output:

Shirt of Small size is Available for Men,Women,Boys,Girls

Shirt of Medium size is Available for Men,Women,Boys

Shirt of Large size is Available for Men,Women

But in next case, I want to Check the availability of Shirt's size. If size is available then want to show again using document.write() but don't want to show Shirt's results alongwith. I tried but getting both cases results. Code is below of 2nd case and input is : let searchForSize = "Small";

function fetchItemsBySize() {
    let isSizeAva = getItemsByType.filter(obj => obj["size"] === searchForSize);
    isSizeAva.forEach(obj => {
        for (let i = 0; i < obj["size"].length; i++) {
            if (obj["size"] === searchForSize) {
            }
        }
        document.write(obj["type"] + " of " + obj["size"] + " size is Available for " + obj["gender"] + "<br>" + "<br>")
    });
    return isSizeAva;
}
let getItemsBySize = fetchItemsBySize();

if (searchForSize === searchForSize) {
    console.log(getItemsBySize);
}

Output is:

Shirt of Small size is Available for Men,Women,Boys,Girls

Shirt of Medium size is Available for Men,Women,Boys

Shirt of Large size is Available for Men,Women

Shirt of Small size is Available for Men,Women,Boys,Girls

But I want to show only

Shirt of Small size is Available for Men,Women,Boys,Girls 

in my final result. Need help.

Aucun commentaire:

Enregistrer un commentaire