问题
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?
回答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.
回答2:
Not entirely the answer to the question asked but just a different approach:
If you stop using document.write but instead you add a <div id="mydiv"> to your html, you can use document.getElementById("mydiv").innerHTML = "whatever"; to change the div text, so that you can empty it before filling it.
Example:
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;
let searchForSize = "Small";
function fetchItemsBySize() {
document.getElementById("mydiv").innerHTML = "";
let isSizeAva = mainMenu.filter(obj => obj["size"] === searchForSize);
isSizeAva.forEach(obj => {
for (let i = 0; i < obj["size"].length; i++) {
if (obj["size"] === searchForSize) {
}
}
document.getElementById("mydiv").innerHTML = document.getElementById("mydiv").innerHTML + obj["type"] + " of " + obj["size"] + " size is Available for " + obj["gender"] + "<br>" + "<br>";
//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);
}<div id="mydiv">content</div>回答3:
I suggest to take a single function for filtering and hand over the type and value for searching.
This approach takes a check for the property and if the value is an array, it checks the items, otherwise it take a comparison with the hand over value.
To show the filterd data, you could take an element and replace the result
const
filter = (array, key, value) => array.filter(object => Array.isArray(object[key])
? object[key].includes(value)
: object[key] === value
),
data = [{ 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" }];
document.getElementById('result').innerHTML = JSON.stringify(filter(data, 'size', 'Small'), null, 4);
setTimeout(() => document.getElementById('result').innerHTML = JSON.stringify(filter(data, 'type', 'Shirt'), null, 4), 3000);<pre id="result"></pre>回答4:
So if I understood it correctly, you don't want to simply append the second output to the previous output, instead you want to clear the previous output and then write the new output. I think you have two different ways to approach this.
- You can erase the whole output and then write again, but this time you can omit the lines you are not looking for. Use
document.open()to have a new empty document. - You can use a tag to change the content only of that tag, for example, you could have the t-shirts size stuff to be displayed inside of this new tag, this way you can easily replace the content of the tag without altering the rest of your output. This can be done by giving a div and id like.
<div id="myDiv">
</div>
And in your js code...
let myDiv = document.getElementById("myDiv")
myDiv.innerHTML = "This is my output"
Hope this helps... Please, let me know if you have any questions.
来源：https://stackoverflow.com/questions/66059947/how-to-clear-or-overwrite-document-write-on-browser-when-my-next-filterbasica