I want to assign array elements to multiple divs which also have image tag in them using for loop.
Array consists of image paths.
var img_list = ["one.png", "two.png", "three.png", "four.png"];
By using above array I have to create below HTML Structure. All divs should be inside "outer" div with a data-slide attribute which is without ".png".
<div id="outer">
<div class="slide" data-slide="one"><img src="Images/one.png" /></div>
<div class="slide" data-slide="two"><img src="Images/two.png" /></div>
<div class="slide" data-slide="three"><img src="Images/three.png" /></div>
<div class="slide" data-slide="four"><img src="Images/four.png" /></div>
</div>
This is what I wrote:
for (var i=0; i < img_list.length; i++){
var container = document.getElementById("outer").innerHTML;
var new_card = "<div class=\"slide\" data-slide=\'" + img_list[i] + "\'><img src=\'Images/" + img_list[i] + "\' /></div>";
document.getElementById("outer").innerHTML = new_card;
}
But it is only showing the last image.
Please help.
Each time your for loop runs, it is replacing the html element within the "outer" div with the current img html.
In order to have it append you can simply change
document.getElementById("outer").innerHTML = new_card;
to
document.getElementById("outer").innerHTML += new_card; so that the element is appended rather than overwritten.
The code at the question overwrites the .innerHTML within the for loop by setting .innerHTML to new_card at every iteration of the array. You can substitute .insertAdjacentHTML() for setting .innerHTML. Also, substitute const for var to prevent new_card from being defined globally. Include alt attribute at <img> element. You can .split() img_list[0] at dot character ., .shift() the resulting array to get word before . in the string img_list[i] to set data-* attribute value.
const img_list = ["one.png", "two.png", "three.png", "four.png"];
for (let i = 0, container = document.getElementById("outer"); i < img_list.length; i++) {
const src = img_list[i];
const data = src.split(".").shift();
const new_card = `<div class="slide" data-slide="${data}"><img src="Images/${src}" alt="${data}"/></div>`;
container.insertAdjacentHTML("beforeend", new_card);
}
<div id="outer"></div>
You are changing the innerHTML you need to add to it. And use Template literals for creating html strings
var img_list = ["one.png", "two.png", "three.png", "four.png"];
const outer = document.getElementById('outer')
img_list.forEach(img => {
outer.innerHTML += `<div class="slider" data-slide="${img.split('.')[0]}"><img src="Images/${img}" /></div>`
})
console.log(outer.innerHTML)
<div id="outer">
</div>
#Tony7931, please replace the last line of for loop with below code:
document.getElementById("outer").innerHTML += new_card;
You are almost there but, every time you are overriding the slider div.
You just have to add + at assignments section. like below.
document.getElementById("outer").innerHTML += new_card;
Here is the full example:
var img_list = ["one.png", "two.png", "three.png", "four.png"];
for (var i=0; i < img_list.length; i++){
var container = document.getElementById("outer").innerHTML;
var new_card = "<div class=\"slide\" data-slide=\'" + img_list[i].split('.')[0] + "\'><img src=\'Images/" + img_list[i] + "\' /></div>";
document.getElementById("outer").innerHTML += new_card;
}
<div id="outer"></div>
You could also use map method of array and Element.innerHTML to get the required result.
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
Demo
const img_list = ["one.png", "two.png", "three.png", "four.png"];
let result = img_list.map((v, i) => `<div class="slide" data-slide="${v.split(".")[0]}"><img src="Images/${v}"/>${i+1}</div>`).join('');
document.getElementById('outer').innerHTML = result;
<div id="outer"></div>
You can declare your variables outside of the loop and reuse them. This is more efficient.
const and let are preferable to var. You only need to set container once so it can be const. new_card should be let since you need to assign it more than once.
You can also use template string so you don't need all the back slashes.
using forEach will make the code cleaner:
const img_list = ["one.png", "two.png", "three.png", "four.png"];
const container = document.getElementById("outer")
let new_card;
img_list.forEach(i => {
new_card = `<div class=slide data-slide='${i.split(".")[0]}'><img src='Images/${i}'></div>`
container.innerHTML += new_card;
})
<div id="outer">
</div>
Alternately, using reduce:
const img_list = ["one.png", "two.png", "three.png", "four.png"];
const container = document.getElementById("outer")
const reducer = (a, i) => a + `<div class=slide data-slide='${i.split(".")[0]}'><img src='Images/${i}'></div>`
container.innerHTML = img_list.reduce(reducer, '')
<div id="outer">
</div>
Related
I have this simple code with 5 paramaters taken from an API that logs data:
for (i = 0; i < arr.length-1; i++) {
console.log('For Calls')
console.log(arr[i].league.name)
console.log(arr[i].teams.home.name, arr[i].goals.home)
console.log(arr[i].teams.away.name, arr[i].goals.away)
}
it logs this data to the console (2 sets of data shown):
Logged Data
The issue I am having is trying to display this looped content to the website, I haven't even been able to get it on the screen so far using the .append methods.
Here is the format I am trying to create:
<div class="parentDiv">
<div class="league">Data goes here</div>
<div class="team1">Data goes here</div>
<div class="score1">Data goes here</div>
<div class="team2">Data goes here</div>
<div class="score2">Data goes here</div>
</div>
I am aware I can give each div a class and append that way but I need this in a loop so those methods do not work for me in this circumstance.
Any Tips are Appreciated.
My current attempt:
for (i = 0; i < filtered.length-1; i++) {
let parent = document.createElement("div")
parent.className = 'parentDiv'
let homeTeamName = document.createElement("div")
homeTeamName.className = 'league'
homeTeamName.innerHTML = filtered[i].league.name
parent.appendChild(homeTeamName)
let homeTeamScore = document.createElement("div")
homeTeamScore.className = 'team1'
homeTeamScore.innerHTML = filtered[i].teams.home.name
parent.appendChild(homeTeamScore)
let awayTeamName = document.createElement("div")
awayTeamName.className = 'score1'
awayTeamName.innerHTML = filtered[i].teams.home.name
parent.appendChild(awayTeamName)
let awayTeamScore = document.createElement("div")
awayTeamScore.className = 'team2'
awayTeamScore.innerHTML = filtered[i].teams.home.name
parent.appendChild(awayTeamScore)
}
It prints nothing to the dom, blank page. You can use the web console at footballify.net/test
You never Attach the "parent" variable to your body
Try:
document.body.append(parent) at the end
I'm a beginner in JavaScript. I've got a problem.
I need to create some elements and I need to put my API's data is these elements. But I want to create 3 cards (bootstraps) in my first row and 2 in my second row.
But I think my loop isn't ok. Because all my data are on my fifth card.
That's my code HTML and JavaScript:
HTML :
</section>
<section class="container">
<div class="row">
<div id="colCam1" class="col-12 col-lg-4"></div>
<div id="colCam2" class="col-12 col-lg-4"></div>
<div id="colCam3" class="col-12 col-lg-4"></div>
</div>
<div class="row">
<div id="colCam4" class="col-12 col-lg-4"></div>
<div id="colCam5" class="col-12 col-lg-4"></div>
</div>
</section>
JS :
fetch("http://localhost:3000/api/cameras")
.then((response) =>
response.json().then ((data) => {
console.log(data);
for(i=0; i < data.length; i++) {
let indexCard = document.createElement("div");
let indexImg = document.createElement("img");
let indexBodyCard = document.createElement("div");
let indexProductTitle = document.createElement("h5");
let indexProductPrice = document.createElement("p");
colCam1.appendChild(indexCard);
colCam2.appendChild(indexCard);
colCam3.appendChild(indexCard);
colCam4.appendChild(indexCard);
colCam5.appendChild(indexCard);
indexCard.classList.add("card");
indexCard.appendChild(indexImg);
indexImg.classList.add("card-img-top");
indexCard.appendChild(indexBodyCard);
indexBodyCard.classList.add("card-body");
indexBodyCard.appendChild(indexProductTitle)
indexProductTitle.classList.add("card-title");
indexBodyCard.appendChild(indexProductPrice);
indexProductPrice.classList.add("card-text");
indexProductTitle.innerHTML = data[i].name;
indexProductPrice.innerHTML = parseInt(data[i].price) + " €";
indexImg.setAttribute("src", data[i].imageUrl);
}
})
);
That's the result on my inspector :
Result of my code
Thx for your help
If I understood correctly, you are only expecting to get 5 elements from your API and you want to put each of them in one column. If that's the case, you can put your column elements in an array and index them accordingly in your loop like so:
const cols = [colCam1, colCam2, colCam3, colCam4, colCam5]
for(i=0; i < data.length; i++) {
let indexCard = document.createElement("div");
let indexImg = document.createElement("img");
let indexBodyCard = document.createElement("div");
let indexProductTitle = document.createElement("h5");
let indexProductPrice = document.createElement("p");
cols[i].appendChild(indexCard);
indexCard.classList.add("card");
indexCard.appendChild(indexImg);
indexImg.classList.add("card-img-top");
indexCard.appendChild(indexBodyCard);
indexBodyCard.classList.add("card-body");
indexBodyCard.appendChild(indexProductTitle)
indexProductTitle.classList.add("card-title");
indexBodyCard.appendChild(indexProductPrice);
indexProductPrice.classList.add("card-text");
indexProductTitle.innerHTML = data[i].name;
indexProductPrice.innerHTML = parseInt(data[i].price) + " €";
indexImg.setAttribute("src", data[i].imageUrl);
}
This code is going to break if your API returns more than 5 elements. You could try something like cols[i % 5].appendChild(indexCard); or consider other layout strategies.
I am trying to pass two variables one is having integer and other is having some string,say i want to pass id,name
<div class='redstatus' onclick='redStatus("+Id+","+name+")'><span class='countspan''>"+red_count+"</span></div>
In the above code in onclick function if i pass only id <div class='redstatus' onclick='redStatus("+Id+")'><span class='countspan''>"+red_count+"</span></div> it is working fine.
I want to send one more parameter name along with id separated by comma
<div class='redstatus' onclick='redStatus("+Id+","+name+")'><span class='countspan''>"+red_count+"</span></div>
it is not working.I need help on this.
for(var i in appData ){
console.log("Data"+JSON.stringify(appData));
for(j in appData.LOB){
var LOBId = appData.LOB[j].LOBID;
LOBName = appData.LOB[j].LOBName;
var LOBRef = appData.LOB[j].LOBRef;
var LOBNameRef = appData.LOB[j].LOBNameRef;
//console.log("LOBId"+LOBId+"LOBName"+LOBName);
$(".left_div").append("<div class='left_lob_name'>"+LOBName+"</div>");
streamInRed = [];
streamInAmber = [];
streamInGreen = [];
currentItemRed = [LOBId];
currentItemAmber = [LOBId];
currentItemGreen = [LOBId];
//$("."+LOBNameRef+"").append("<div id="+LOBId+" style='height:74vh;overflow-y:auto;'><table class='table table-bordered' ><thead><tr><th>StreamName</th><th>BusinessSLA Description</th><th>Status</th><th>Business SLA</th><th>Forecast Completion Time</th><th>Actual Completion Time</th><th>JobName</th></tr></thead><tbody class='"+LOBRef+"'></tbody></table></div>");
for(var k in appData.LOB[j].Streams.Stream){
//console.log("Streams"+JSON.stringify(appData.LOB[j].Streams.Stream));
var streamId = appData.LOB[j].Streams.Stream[k].streamId;
var streamName = appData.LOB[j].Streams.Stream[k].streamName;
var Status = appData.LOB[j].Streams.Stream[k].Status;
var jobName = appData.LOB[j].Streams.Stream[k].JobName;
var BSD= appData.LOB[j].Streams.Stream[k].BusinessSLADescrition;
var BSLA = appData.LOB[j].Streams.Stream[k].BusinessSLA;
var FCT = appData.LOB[j].Streams.Stream[k].ForecastCompletionTime;
var ACT = appData.LOB[j].Streams.Stream[k].ActualCompletionTime;
var RAGStatus = appData.LOB[j].Streams.Stream[k].RAGStatus;
if(Status == "red"){
//$("."+LOBName+"").append("<div class='streamcolor_red test' data-name='1'>"+streamName+"</div>");
//$("."+LOBRef+"").append("<tr class='test' data-name='1'><td style='background-color:#f3180d;color:#fff;'>"+streamName+"</td><td>"+BSD+"</td><td>"+RAGStatus+"</td><td>"+BSLA+"</td><td>"+FCT+"</td><td>"+ACT+"</td><td>"+jobName+"</td></tr>");
red_count = red_count+1;
currentItemRed = [streamName,BSD,RAGStatus,BSLA,FCT,ACT,jobName];
streamInRed.push(currentItemRed);
//redStatus();
//console.log("streamInRed"+streamInRed);
}else if(Status == "amber"){
//$("."+LOBRef+"").append("<tr class='test' data-name='2'><td style='background-color:rgba(243, 168, 15, 0.9215686274509803);color:#fff;'>"+streamName+"</td><td>"+BSD+"</td><td>"+RAGStatus+"</td><td>"+BSLA+"</td><td>"+FCT+"</td><td>"+ACT+"</td><td>"+jobName+"</td></tr>");
//$("."+LOBName+"").append("<div class='streamcolor_amber test' data-name='2'>"+streamName+"</div>");
amber_count = amber_count+1;
currentItemAmber = [streamName,BSD,RAGStatus,BSLA,FCT,ACT,jobName];
streamInAmber.push(currentItemAmber);
}else {
//$("."+LOBRef+"").append("<tr class='test' data-name='3'><td style='background-color:green;color:#fff;'>"+streamName+"</td><td>"+BSD+"</td><td>"+RAGStatus+"</td><td>"+BSLA+"</td><td>"+FCT+"</td><td>"+ACT+"</td><td>"+jobName+"</td></tr>");
//$("."+LOBName+"").append("<div class='streamcolor_green test' data-name='3'>"+streamName+"</div>");
green_count = green_count+1;
currentItemGreen=[streamName,BSD,RAGStatus,BSLA,FCT,ACT,jobName];
streamInGreen.push(currentItemGreen);
}
//console.log("streamId"+streamId+"streamName"+streamName+"Status"+Status);
}
console.log("LOBId",LOBId);
console.log("sep_symbol",sep_symbol);
console.log("syb",syb);
console.log("LOBNameRef",LOBNameRef);
var tempvar = "'"+LOBNameRef+"'";
console.log("tempvar"+LOBId +sep_symbol +tempvar);
$("<div style='text-align:center;height:5vh;margin:2vw;'> <div class='redstatus' onclick='redStatus("+LOBId+","+LOBNameRef+")'><span class='countspan''>"+red_count+"</span></div> <div class='amberstatus' onclick='amberStatus("+LOBId+")'><span class='countspan'>"+amber_count+"</span></div> <div class='greenstatus' onclick='greenStatus("+LOBId+")'><span class='countspan'>"+green_count+"</span></div></div>").appendTo(".right_div");
red_count = 0;
amber_count = 0;
green_count = 0;
//var Streams = appData.LOB[j].Streams;
//console.log("Before"+$wrapper);
//var $wrapper = $('.'+LOBRef+'');
//console.log("after"+$wrapper);
//$wrapper.find('.test').sort(function (a, b) {
/// return +a.dataset.name - +b.dataset.name;
//})
//.appendTo( $wrapper );
}
}
i have added the code for your reference
The problem is with the line
$("<div style='text-align:center;height:5vh;margin:2vw;'> <div class='redstatus' onclick='redStatus("+LOBId+","+LOBNameRef+")'><span class='countspan''>"+red_count+"</span></div> <div class='amberstatus' onclick='amberStatus("+LOBId+")'><span class='countspan'>"+amber_count+"</span></div> <div class='greenstatus' onclick='greenStatus("+LOBId+")'><span class='countspan'>"+green_count+"</span></div></div>").appendTo(".right_div");
which, more prettily, and without the inline handlers, can be constructed like:
const htmlStr = `
<div style='text-align:center;height:5vh;margin:2vw;'>
<div class='redstatus'><span class='countspan'>${red_count}</span></div>
<div class='amberstatus'><span class='countspan'>${amber_count}</span></div>
<div class='greenstatus'><span class='countspan'>${green_count}</span></div>
</div>
`;
You can pass the HTML string to jQuery to get a jQuery collection, then select the inner divs and add a listener to each:
const $row = $(htmlStr);
$row.find('.redstatus').on('click', () => redStatus(LOBId, LOBNameRef));
$row.find('.amberstatus').on('click', () => amberStatus(LOBId, LOBNameRef));
$row.find('.greenstatus').on('click', () => greenStatus(LOBId, LOBNameRef));
$row.appendTo(".right_div");
(or pass whatever parameters you want to the status functions - no quote escaping required!)
Make sure the LOBIds and LOBNameRefs don't reassign themselves in other iterations of the loop - declare them with const, eg:
const LOBId = appData.LOB[j].LOBID;
const LOBName = appData.LOB[j].LOBName;
const LOBRef = appData.LOB[j].LOBRef;
so they're scoped to the block, not to the function.
(It would also probably be good to have just a single <color>Status function, rather than three separate standalone functions (which probably all do something somewhat similar) - too much repetition should be avoided)
You want to concatenate two parameters passed to a function, do not enclose variables in single or double quotes, it should be as :onclick="redStatus(Id,name)"
function redStatus(Id,name){
var result = Id+'_'+name;
document.getElementsByClassName('countspan')[0].innerText = result;
}
<!DOCTYPE html>
<html>
<head>
<title>Append Two Params</title>
</head>
<body>
<div onclick="redStatus(1,'name')">Append Two Params</div>
<span class='countspan'></span>
</body>
</html>
I'm using newsapi to request JSON data, and am then dynamically loading it onto the page without reloading the page/going onto another page.
When the user initially goes onto the site, a request made on the backend will automatically be made and load the results onto the site via an EJS template. There will also be a button at the bottom of the page, so when a user clicks on it, new articles will be loaded.
The issue is that when the user clicks on the button, the new articles aren't appended after the last instance of a card-container. For example, say I have articles 1 2 3 4 5 already on the page and want to load articles 6 7 8 9, after clicking the button the articles are now in the order of 1 6 2 7 3 8 4 9 5. Where I want it to be in the order 1 2 3 4 5 6 7 8 9.
I've thought by using Jquerys insertAfter() function to insert each new element after the last would work, but it clearly doesn't.
Whilst the code I have below may be messy, I want to fix the logic before tidying it up.
JS
let more = document.getElementById("test");
more.addEventListener("click", function () {
(async () => {
const data = await fetch('http://localhost:3000/articles/');
const articles = await data.json()
for (let i = 0; i < articles.articles.length; i++) {
let newDate = articles.articles[i].date;
newDate = newDate.substring(0, newDate.indexOf('T')).split("-");
var articleList = document.getElementsByClassName("card-container");
var lastArticle = articleList[articleList.length - 1];
let cardContainer = document.createElement('div');
cardContainer.className += "card-container";
let card = document.createElement('div');
card.className += "card";
let content = document.createElement('div');
content.className += "content";
let thumbnail = document.createElement('div');
thumbnail.className += "thumbnail";
let image = document.createElement('img');
image.className += "image";
let text = document.createElement('div');
text.className += "text";
let title = document.createElement('div');
title.className += "title";
let a = document.createElement('a');
let meta = document.createElement('div');
meta.className += "meta";
let source = document.createElement('div');
source.className += "source";
let date = document.createElement('div');
date.className += "date";
document.getElementsByClassName('card-container')[i]
.appendChild(card).appendChild(content).appendChild(thumbnail)
.appendChild(image)
document.getElementsByClassName("content")[i]
.appendChild(text).appendChild(title).appendChild(a)
document.getElementsByClassName("text")[i]
.appendChild(meta).appendChild(source)
document.getElementsByClassName("meta")[i]
.appendChild(date)
let container = document.getElementById('article-container')
container.innerHTML = container.innerHTML + cardContainer;
image.setAttribute("src", articles.articles[i].image)
a.setAttribute('href', articles.articles[i].link);
a.innerHTML = articles.articles[i].title;
source.innerHTML = articles.articles[i].source.name;
date.innerHTML = newDate[1] + " " + newDate[2] + " " + newDate[0];
}
})();
})
Desired markup
<div class="card-container">
<div class="card">
<!-- Post-->
<div class="content">
<!-- Thumbnail-->
<div class="thumbnail">
<img
src="https://ssio.azurewebsites.net/x500,q75,jpeg/http://supersport-img.azureedge.net/2019/8/Man-City-190804-Celebrating-G-1050.jpg" />
</div>
<!-- Post Content-->
<div class="text">
<div class="title"><a
href="https://www.goal.com/en-gb/lists/deadline-day-dybala-coutinho-premier-league-transfers-happen/68rpu0erk0e81pm2anfv2ku16">Coutinho
llega a un acuerdo con el Arsenal para marcharse del Barcelona - PASIÓN
FUTBOL</a>
</div>
<div class="meta">
<div>Source</div>
<div class="date-text">07 07 2019</div>
</div>
</div>
</div>
</div>
</div>
JS Fiddle
I seem to have got it working - but not all of the JSON (other than the image) are being mapped to their divs inner HTML :/
https://jsfiddle.net/georgegilliland/ofxtsz2a/5/
In order to append in pure JS you have to take the last content of the container, append new data to it, then replace the container content with the new data.
I wrote a jsfiddle based on the stack overflow question I posted in the comment : https://jsfiddle.net/HolyNoodle/bnqs83hr/1/
var container = document.getElementById('container')
for(var i = 0; i < 3; i++) {
container.innerHTML = container.innerHTML + "<p>" + i + "</p>"
}
Here you can see I am getting the container inner html, appending new value to it, then replacing the container inner html by the new html
Fixed the issue... The problem was that I was getting elements by class name at whatever index the for loop was on. So if the for loop was on it's 5th iteration, it was appending content to the 5th instance of content, rather than appending it to the end of the container.
document.getElementById('article-container')
.appendChild(cardContainer)
.appendChild(card).appendChild(content).appendChild(thumbnail)
.appendChild(image)
document.getElementsByClassName("content")[i]
.appendChild(text).appendChild(title).appendChild(a)
document.getElementsByClassName("text")[i]
.appendChild(meta).appendChild(source)
document.getElementsByClassName("meta")[i]
.appendChild(date)
What I did to fix this was get the number of elements with the classname card-container before the for loop:
let nodelist = document.getElementsByClassName("card-container").length;
And then get elements at the index of the for loop summed with the amount nodelist.
document.getElementById('article-container')
.appendChild(cardContainer)
.appendChild(card).appendChild(content).appendChild(thumbnail)
.appendChild(image)
document.getElementsByClassName("content")[i + nodelist]
.appendChild(text).appendChild(title).appendChild(a)
document.getElementsByClassName("text")[i + nodelist]
.appendChild(meta).appendChild(source)
document.getElementsByClassName("meta")[i + nodelist]
.appendChild(date)
I have a template that I'm cloning to make Single Page Application. Inside this template are some div's that should have a unique id's so that it should be working individually when I open multiple apps(clone multiple divs)
<template id="templ">
<div id="name"></div>
<div id="btn">
<fieldset id="fld">
<input type="text" id="userMessage"placeholder="Type your message…" autofocus>
<input type="hidden">
<button id="send" >Save</button>
</fieldset>
</div>
</template>
and I'm cloning it like this
var i =0
let template = document.querySelector('#templ')
let clone = document.importNode(template.content, true)
clone.id = 'name' + ++i // I can't change the Id o this name div
document.querySelector('body').appendChild(clone)
Thanks
clone.id is undefined since clone is a #document-fragment with two children.
You need to query the 'name' child and change its id, for example like this:
const template = document.querySelector('#templ')
const body = document.querySelector('body')
function appendClone(index){
let clone = document.importNode(template.content, true)
clone.getElementById('name').id = 'name' + index
// all other elements with IDs
body.appendChild(clone)
}
Then you can iterate over the amount of clones and simply call the function with the loop index:
let clones = 5
for (let i = 0; i < clones; i++){
appendClone(i)
}
store the dynamic HTML data in script element and add when ever required by replaciing with dynamic data.
HTML Data:
<script id="hidden-template" type="text/x-custom-template">
<div id='${dynamicid}'>
<p>${dynamic_data}</p>
</div>
</script>
Script to replace and append.
var template_add = $('#hidden-template').text();
var items = [{
dynamicid: '1',
dynamic_data: '0'
}];
function replaceDynamicData(props) {
return function(tok, i) {
return (i % 2) ? props[tok] : tok;
};
}
var dynamic_HTML = template_add.split(/\$\{(.+?)\}/g);
$('tbody').append(items.map(function(item) {
return dynamic_HTML.map(replaceDynamicData(item)).join('');
}));