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

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

let filteredArr = [];
filteredArr = mainMenu;

I want to search for a Shirt, if exist then want show using document.write(). My input is: let searchForType = "Shirt";.

My code is:

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

Next time, I want to Check the availability of Shirt's size. If size is available then again want to show(by document.write()) only result(s) of Shirt's size not all Shirt's results. I tried but getting both cases results at the same time. But I want to show only selected size's Shirt(s) in my final output. Below is the code when I enter shirt's size i.e. '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 only

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

any possibility?

question from:https://stackoverflow.com/questions/66059947/how-to-clear-or-overwrite-document-write-on-browser-when-my-next-filterbasica

Answer 1

See Document API.
If you want to clear the document, you can use document.open().
Or you can try document.close() when you expect your next document.write() will automatically clear.