We Keep Coding

How do I use For Loop in JavaScript to show the list?

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.

update prices in text after deleting items from button in inner html

The div tags are created inside this const and I have used a delete function to delete items from order page. I want to update prices after deletion and updating in text displaying totalprice.
total_price = total_price + parseInt(item.prisinklmoms);
// Create a row for the item in view
const order_item = document.createElement('div');
order_item.className = `ordered_item`;
order_item.innerHTML = `<div class="product-name">${item.namn}</div>
<div class="product-percentage">${item.alkoholhalt}</div>
<div class="product-price">${item.prisinklmoms}</div>
<button id="div-button" onclick="delOrderlist(this)">Del</button>`;
orderContainer.appendChild(order_item);

Scrape text from a complex DOM structure

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);

Check each div for id based upon values within an array

I'm creating a set of tabs based upon an existing set of categories with the below JS. I need to extend this to target specific id's within the DIV id based upon values from a JS array.
$("#categories div[id^=category]:not(:first)", this).hide();
var cats = $('#categories div[id^=category]');
cats.each(function () {
var anch = $(this).find('h3 a').eq(1).clone();
anch[0].rel = this.id;
$('<li/>').append(anch).appendTo('#tabs');
});
The html:
<div id="category_1">
<h3 class="maintitle">
<a class="toggle">..</a>
Cat 1 Title
</h3>
<div>
...
</div>
</div>
<div id="category_2">
<h3 class="maintitle">
<a class="toggle">..</a>
Cat 2 Title
</h3>
<div>
...
</div>
</div>
I've got a JS array ready by adding:
var catsList = '{$cats}'; // comma separated list of numbers generated in PHP - returns 1,4,8 currently.
var catsArray = catsList.split(',');
How would I convert the below, to check for each item within catsArray ?
var cats = $('#categories div[id^=category]');
Something like
var cats = $('#categories div[id^=category_'+catsArray+']');
but obviously checking each item within the array and not the entire array as that's doing.

You could use that as IDs have to be unique on context page:
var cats = $('#category_'+catsArray.join(',#category_'));
DEMO

you probably want the each function
$.each(catsArray,function(index, item) {
var cats = $('#categories div[id^=category_'+item+']');
});
Depending on how you using this a for loop will do it also:
for (var i = 0; i < catsArray.length; i++) {
var catIndex = catsArray[i];
var cats = $('#categories div[id^=category_'+catIndex +']');
}

JQuery and Dynamic sub list on separate div

I am trying to create a sub listview page separate from the typical caged one:
This is what I'm trying to do:
STEP1 - Loops gets all the data and creates the list in the listview:
$(document).ready(function() {
var data = {"id":[{"id":1,"title":"title1","bodytext":"sometext 1"},{"id":2,"title":"title2","bodytext":"sometext 2"},{"id":3,"title":"title3","bodytext":"sometext 3"}
}]
var output = ''
$.each(data.id, function(index, value){
output += '<li>'+value.title+'</li>';
$('#mypage').text(value.title); //will this be different for each item?
});
$('#mylistview').html(output).listview('refresh'); //Refresh the listview with new added data
});
STEP 2:
The listview now looks like this:
<ul id-"mylistview">
<li>title1</li>
<li>title2</li>
<li>title3</li>
</ul>
STEP 3:
I have a pre-made template:
<div id="mypage">
Data from selected item goes here
</div>
So, if I click on list item 1 mypage will look like this:
<div id="mypage">
Sometext 1
</div>
or if item 2 is clicked:
<div id="mypage">
Sometext 2
</div>
My problem is that no matter which item I click in the listview I always get the data from item 1.
How can I maker it so each item has it's own data displayed?

$(document).ready(function() {
var data = {"ids":[
{"id":1,"title":"title1","bodytext":"sometext 1"},
{"id":2,"title":"title2","bodytext":"sometext 2"},
{"id":3,"title":"title3","bodytext":"sometext 3"}]};
var output = '',
myPages = $('.mypage'),
container = $('#mylistview');
$.each(data.ids, function(index, value){
output += '<li>'+value.title+'</li>';
myPages.eq(index).text(value.bodytext);
});
container.html(output);
container.on('click', 'a', function(e){
e.preventDefault();
var links = container.find('a');
alert(myPages.eq(links.index(this)).text());
});
});
Demo: http://jsfiddle.net/mDnE6/

That is because you can only have one id call "pagetitle"