I have a component for displaying a list, and this component is rendered from a parent component. I am currently generating the contents of this list using a for loop. Like -
let content = []
for (let i = 0; i < list.length; i++) {
content.push(
<div>
<p> list[i].something </p>
<p> list[i].somethingElse </p>
</div>
)
}
return content;
Now whenever a new object is added to this list, all the previous objects of the list, and the newly added object get rendered. This becomes extremely slow when the list contains around 1000 objects.
Is there a way by which only the new added can be added and rendered, without re-rendering all the previous entries of the list again?
This must be mainly because you havent added key, try the following code after setting an id for each list item and assign it to key prop.
let content = []
for (let i = 0; i < list.length; i++) {
content.push(
<div key={list[i].id}>
<p> list[i].something </p>
<p> list[i].somethingElse </p>
</div>
)
}
return content;
If the list is a static one which doesnt change, index can also be used as the value for key prop.
let content = []
for (let i = 0; i < list.length; i++) {
content.push(
<div key={i}>
<p> list[i].something </p>
<p> list[i].somethingElse </p>
</div>
)
}
return content;
You shoulda unique id for each item to render list item component. You can do on the ES6 something like:
const renderList = (list) => (
list.map(item =>
<div key={item.id}>
<p>{item.something}</p>
<p>{item.somethingElse}</p>
</div>
);
Related
I am a beginner in JavaScript and I can't figure out the following problem: I am trying to create a simple JavaScript Movie List. I have 10 lists on the Movie List. I tried to show all of the lists with for loop, but it doesn't work.
Here's the code:
function renderModal() {
for (let i = 0; i < listMovies.length; i++) {
let movieData = listMovies[i];
document.getElementById("poster").src = movieData.img;
document.getElementById("title").innerHTML = movieData.name;
document.getElementById("genre").innerHTML = movieData.genre;
document.getElementById("rating-num").innerHTML = "Rating: "+ movieData.rating + "/10";
document.getElementById("movie-desc").innerHTML = movieData.desc;
document.getElementById("imdb-page").href = movieData.link;
return movieData;
}
}
What do I have to do?
Help me to fix it!.
You can use template tag for list and render it into target element.I am showing an example.
Movie list
<div id="movieList"></div>
template for list
<template id="movieListTemplate">
<div class="movie">
<img src="" class="poster" alt="">
<div class="title"></div>
<div class="genre"></div>
<div class="rating-num"></div>
<div class="movie-desc"></div>
<div class="imdb-page"></div>
</div>
</template>
Javascript code:
if (listMovies.length > 0) {
const movileListTemplate = document.getElementById('movieListTemplate')
const movieRenederElement = document.getElementById('movieList')
for(const movie of listMovies) {
const movieEl = document.importNode(movileListTemplate.content, true)
movieEl.querySelector('.poster').src = movie.img
movieEl.querySelector('.title').textContent = movie.name
//use all queryselector like above
}
}
Your return movieData; will stop the loop dead. Not that running it more than once will change anything since you change the same elements over and over. IDs must be unique.
Here is a useful way to render an array
document.getElementById("container").innerHTML = listMovies.map(movieData => `<img src="${movieData.img}" />
<h3>${movieData.name}</h3>
<p>${movieData.genre}</p>
<p>Rating: ${movieData.rating}/10</p>
<p>${movieData.desc}
IMDB
</p>`).join("<hr/>");
With return movieData, the for loop will ends in advance.You should put it outside the for loop.
lets say i have a parent-div. And in this div-container, i want to display 5 elements which have all the same structure. For example:
<div class="element">
<p class="name">
</p>
<div class="logo">
</div>
</div>
Is there a way to make an object or prototype out of it, so i dont have to generate every single HTML Element with their classes and src values with the appendChild-function and Dot-Notations in a for-loop?
Im thinking of something like:
for(let i = 0; i<=5;i++){
var element = new element(class,src1,src2 ...);
}
And the "element" is defined in a external class file or something familiar.
Im a beginner, so please show mercy :)
You'll need to clone the node from the template's content. For example:
const templateElement = document.querySelector("#someTemplate")
.content
.querySelector(".element");
// create an Array of nodes (so in memory)
const fiveNodes = [];
for (let i = 0; i < 5; i += 1) {
const nwNode = templateElement.cloneNode(true);
// ^ clone the whole tree
nwNode.querySelector("p.name").textContent += ` #${i + 1}`;
fiveNodes.push(nwNode);
}
// append the nodes to document.body
// this is faster than appending every element in the loop
fiveNodes.forEach(el => document.body.append(el));
<template id="someTemplate">
<div class="element">
<p class="name">I am node</p>
<div class="logo"></div>
</div>
</template>
Consider the following hierarchy in DOM
<div class="bodyCells">
<div style="foo">
<div style="foo">
<div style="foo1"> 'contains the list of text elements I want to scrape' </div>
<div style="foo2"> 'contains the list of text elements I want to scrape' </div>
</div>
<div style="foo">
<div style="foo3"> 'contains the list of text elements I want to scrape' </div>
<div style="foo4"> 'contains the list of text elements I want to scrape' </div>
</div>
By using class name bodyCells, I need to scrape out the data from each of the divs one at a time (i.e) Initially from 1st div, then from the next div and so on and store it in separate arrays. How can I possibly achieve this? (using puppeteer)
NOTE: I have tried using class name directly to achieve this but, it gives all the texts in a single array. I need to get data from each tag separately in different arrays.
Expected output:
array1=["text present within style="foo1" div tag"]
array2=["text present within style="foo2" div tag"]
array3=["text present within style="foo3" div tag"]
array4=["text present within style="foo4" div tag"]
As you noted, you can fetch each of the texts in a single array using the class name. Next, if you iterate over each of those, you can create a separate array for each subsection.
I created a fiddle here - https://jsfiddle.net/32bnoey6/ - with this example code:
const cells = document.getElementsByClassName('bodyCells');
const scrapedElements = [];
for (var i = 0; i < cells.length; i++) {
const item = cells[i];
for (var j = 0; j < item.children.length; j++) {
const outerDiv = item.children[j];
const innerDivs = outerDiv.children;
for (var k = 0; k < innerDivs.length; k++) {
const targetDiv = innerDivs[k];
scrapedElements.push([targetDiv.innerHTML]);
}
}
}
console.log(scrapedElements);
I'm new to React JS and I'm not sure how to do a for loop to render something a variable number of times. This is my code:
<div className="product-selector__products">
{ this.props.products.sort(function(a,b) { return a.ranking - b.ranking }).map((p) => {
const className = "product" + ((this.props.selectedProductIds.indexOf(p.id) !== -1) ? " product--selected" : "");
const descriptionHtml = { __html: p.description };
const nameHtml = { __html: p.name };
return (
<div className={className} key={ p.id } onClick={this.onProductClick.bind(this, p.id)}>
<div className="product__image">
<img src={`/~/media/Bayer CropScience/Country-United-States-Internet/Comparison Tool/img/logos/${p.id}_sm.png`} alt={p.name} />
</div>
<div className="product__info">
<div className="product__name" dangerouslySetInnerHTML={nameHtml}></div>
<div className="product__description" dangerouslySetInnerHTML={descriptionHtml}></div>
</div>
<div className="product__message" ref={ p.id }>
<div className="product__message-tooltip">Please remove a product<br/>before adding another</div>
<div className="product__message-triangle-down"></div>
</div>
</div>
);
}) }
/* Here I want to render <div className="product product--empty"> </div> a variable number of times*/
</div>
It generates a grid of product items, with 4 items per row.
I need to add empty divs onto the end of the last row so that each row has the same number of divs in it.
So if this.props.products.length == 7 I need 1 empty div, and if I have 5 products I need 3 empty divs, etc.
The script i want is this:
let remainder = 4 - (this.props.products.length % 4);
for (let i = 0; i < remainder; i++){
return ( <div className="product product--empty"> </div> )
}
I'm not sure how to properly put this into the code-block though.
I've just modified a little Your code.
renderRemainders() {
let products = []
let remainder = 4 - (this.props.products.length % 4)
for (let i = 0; i < remainder; i++){
products.push( <div className="product product--empty"> </div> )
}
return products
}
And just put
{ this.renderRemainders() }
somewhere in Your 'render' function.
Also, could You say something about why you need to render these empty rows?
I'm looping over an array and modifying the contents of the array, but I don't get the results I expect. What am I missing or doing wrong?
I have two groups of divs (one with class attacker, and other enemy) with three elements each. I am trying to select one element from each side by making a border around it. Now i want to toggle classes from a attacker to enemy and the other way.
But when I use for loop it somehow ignores some elements and changes only one or two div classes. Here is my code:
HTML:
<div id="army1">
<div class="attacker">
<img src="img/Man/Archer.jpg" />
<div class="hp"></div>
</div>
<br><div class="attacker">
<img src="img/Man/Knight.jpg" />
<div class="hp"></div>
</div>
<br><div class="attacker">
<img src="img/Man/Soldier.jpg" />
<div class="hp"></div>
</div>
<br>
</div>
<div id="army2">
<div class="enemy">
<img src="img/Orcs/Crossbowman.jpg" />
<div class="hp"></div>
</div>
<br><div class="enemy">
<img src="img/Orcs/Mine.jpg" />
<div class="hp"></div>
</div>
<br><div class="enemy">
<img src="img/Orcs/Pikeman.jpg" />
<div class="hp"></div>
</div>
<br>
</div>
And my javascript code:
var attacker = document.getElementsByClassName('attacker');
var enemy = document.getElementsByClassName('enemy');
var button = document.getElementById("fight");
// var class1 = document.getElementsByClassName("first")[0].getAttribute("class");
// class1 = class1.split(" ");
//choose attacker
for (var i = 0; i < attacker.length; i++) {
attacker[i].onclick = function () {
//select only one attacker and set its id to attackerid
if (this.getAttribute('class') != 'attacker first') {
resetAttackerClasses();
this.setAttribute('class', 'attacker first');
} else {
resetAttackerClasses();
}
};
}
//choose enemy
for (var i = 0; i < enemy.length; i++) {
enemy[i].onclick = function () {
//select only one attacker and set its id to enemyid
if (this.getAttribute('class') != 'enemy second') {
resetEnemyClasses();
this.setAttribute('class', 'enemy second');
} else {
resetEnemyClasses();
}
};
}
//fight
button.onclick = function() {
//take off enemy health
document.getElementsByClassName('enemy second')[0].children[1].style.width = '50px';
resetAttackerClasses();
resetEnemyClasses();
for (var i = 0; i < attacker.length; i++) {
attacker[i].setAttribute('class', 'enemy');
enemy[i].setAttribute('class', 'attacker');
};
};
function resetAttackerClasses() {
for (var i = 0; i < attacker.length; i++) {
attacker[i].setAttribute('class', 'attacker');
};
}
function resetEnemyClasses() {
for (var i = 0; i < attacker.length; i++) {
enemy[i].setAttribute('class', 'enemy');
};
}
It's because you're removing the class that was used to fetch the element, which means the element will automatically be removed from the live NodeList (since it no longer matches the query).
When this happens, the NodeList is reindexed, so the next element becomes the current one, and you end up skipping over it with the next i++;
To fix it, iterate in reverse instead.
If you don't want to go in reverse, then decrement the index every time you remove an element from the list.