Develop Reference

Loop of html using javascript

i am new on using of JavaScript on looping of html. I have this code below that i am working at. In this problem of mine i have 2 loop the main and the card-body loop. As you can see in the code First I need to loop the main to create a card and then at the body i need also to loop it because of the data content. I have also working code below but as you can see at the card-body its not looping anymore but static data that I inputted.
Problem
for (var i = 0; i < dataLength; i++) {
var docsLength = data.data[i].resultData;
var title = data.data[i].resultData[i].Type.Description;
var card = '<div class="card"> <div class="card-header bg-success"><h3 class="card-title">' + title + ' </h3 ></div> <div class="card-body">'; for (var a = 0; a < 2; a++) { "a" } ' </div>' +
'</div >';
$("#card_documents > .card-body").append(card);
}
Working
for (var i = 0; i < dataLength; i++) {
var docsLength = data.data[i].resultData;
var title = data.data[i].resultData[i].Type.Description;
var card = '<div class="card"> <div class="card-header bg-success"><h3 class="card-title">' + title + ' </h3 ></div> <div class="card-body">' +
"asdasdasdasd" +
'</div > ' +
'</div >';
$("#card_documents > .card-body").append(card);
}
Is my syntax wrong?. Please help. Thanks

You can replace for (var a = 0; a < 2; a++) { "a" } with "a".repeat(2).
More info about repeat() here

Yes, your syntax is wrong. Specifically the way you're trying to use the for loop.
I would suggest building up the string in a variable.
Here is a stripped down version of how you might achieve that.
var card = '<div class="card">';
for (var a = 0; a < 2; a++) {
card += "a";
}
card += '</div>';
$("#card_documents > .card-body").append(card);

How to erase from an array only one element also if duplicated with jQuery?

This is my problem: if I try to erase the last element that I pushed with the relative button everything works, but if I try to erase the first (or at least not the last one), all the elements in the array are erased.
To avoid this I used $.inArray to check if the element is in the Array and to erase only the element in that index, but it doesn't help.
What I want is to be able to erase the element I want and only the one that I select.
$(document).ready(function() {
var array = [];
$('.add').click(function(e) {
var $thisEvent = $(e.currentTarget).closest('.event');
var i = $thisEvent.find('.i').text();
array.push(i);
console.log(i +' added, Array is now ' + array);
$thisEvent.append('<button class="remove">🗙' + i + '</button>');
var $total = 0;
for (var y = 0; y < array.length; y++) {
$total += array[y] << 0;
}
$('.total').html('The sum of the elements in the array is ' + $total);
$('.remove').click(function() {
if ($.inArray(i, array) !== -1) {
array.splice($.inArray(i, array), 1);
console.log(i + ' removed, Array is now ' + array);
} else {
console.log('There is no ' + i + ' to remove from the array!');
}
$(this).remove();
var $total = 0;
for (var y = 0; y < array.length; y++) {
$total += array[y] << 0;
}
$('.total').html('The sum of the elements in the array is ' + $total);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event">
<span class="i" style="margin-right: 5px;">1</span><button class="add">Add to Array</button>
</div>
<br />
<div class="event">
<span class="i" style="margin-right: 5px;">2</span><button class="add">Add to Array</button>
</div>
<br />
<div class="event">
<span class="i" style="margin-right: 5px;">3</span><button class="add">Add to Array</button>
</div>
<p class="total"></p>

Try changing
$thisEvent.append('<button class="remove">🗙' + i + '</button>');
To
var $remove = $('<button class="remove">🗙' + i + '</button>');
$thisEvent.append($remove);
Then change
$('.remove').click(function() {
To
$remove.click(function() {
This way you aren't adding a new click event listener to all the other remove buttons every time a new one is added

Why doesn't my for loop execute?

When i use document.write it works, but it doesn't work with getElementById.
The same for while.
`
<div id="mydiv"></div>
<script>
var i = 0;
for (i=0; i<=10; i++){
//while (i<=10){
document.getElementById("mydiv").innerHTML = i + "<br>";
//i++;
}
</script>
Output is just 10, but I want to list 0-10 line by line. How to fix?

Each time your loop ran, it overwrite innerHTML for the div.
This implementation starts with an empty string for html, then uses += to concatenate the counter and <br> on each iteration.
var i = 0;
var html = '';
for (i=0; i<=10; i++){
html += i + '<br>';
}
document.getElementById("mydiv").innerHTML = html;

You are over-writing or replacing the contents. You need to append, so you can use += operator instead of =.
<div id="mydiv"></div>
<script>
var i = 0;
for (i=0; i<=10; i++){
document.getElementById("mydiv").innerHTML += i + "<br>";
}
</script>

You're overwriting. Append instead.
for (var i = 0; i <= 10; i++) {
var div = document.getElementById("mydiv");
div.innerHTML = div.innerHTML + "<br/>" + i;
}
<div id="mydiv"></div>

While other answers are true, I think it's a risky practice because your browser might try to execute the code before having loaded all html elements. (For example if your div is after the code..)
So I propose this:
<div id="mydiv">
<script>
for (var i=0; i<=10; i++){
document.write ( i + "<br />");
}
</script>
</div>
N.B: However, keep in mind you cannot use "document.write" after the page finished loading.
You can also do that to be safe:
<div id="mydiv"></div>
<script>
document.onload = function(){
temp=""
for (var i=0; i<=10; i++){
temp += i + "<br />";
}
document.getElementById("mydiv").innerHTML = temp;
}
</script>

Generate HTML with JavaScript and jQuery - JavaScript not executing?

Following to this post, I recreated the code with jQuery. jsFiddle says, that everything should be find and I can't find any mistakes either. Here's the Code:
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div></div>').attr('post_' + postCount).attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
$('#post_h3_' + postCount).append('<span>' + time + '</span>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
var paragraphCount = 0;
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
paragraphCount++;
}
postCount++;
}
Now the problem might be that the JavaScript is not even executed, my HTML looks like this:
<head>
<?php include 'components/_head.php';?>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/postGen.js"></script>
<script type="application/javascript" src="postGen.js">
document.addEventListener('DOMContentLoaded', function() {
generatePost("Testing Title", "I don't know", "This is || a paragraph");
}
</script>
</head>
<body>
<header>
<?php include 'components/header.php';?>
</header>
<main>
<?php include 'components/main.php';?>
<div class="fullscreencontainer">
<img class="background" src="img/background.jpg">
<div class="title">
<h2>Der Bürger als Edelmann</h2>
<h4>von Moliére</h4>
</div>
</div>
<div class="container">
<div id="postcontainer">
/* ? */
</div>
<div class="sidebar">
</div>
</div>
</main>
<footer>
<?php include 'components/footer.php';?>
</footer>
</body>
The structure of the files:
index.php
js/jquery-1.11.3.min.js
js/jquery-migrate-1.2.1.min.js
js/postGen.js This file contains the code written in the first code-box
Inspector shows nothing new.
Console shows:
Syntax Error: Missing ) after argument list
EDIT:
The final Code:
<script type="application/javascript">
$(document).ready(function() {
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div id=' + "post_" + postCount + '></div>')
$('#post_' + postCount).attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '<span>' + time + '</span></h3>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>');
}
postCount++;
}
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
});
</script>

Seems you were calling the generatePost() function too early (when document loads, but at the same time, thats also when you load your jQuery... why you were getting the ")" Missing error..).
So I changed the HTML to:
<head>
</head>
<body>
<main>
<div class="container">
<div id="postcontainer">
</div>
</div>
</main>
</body>
And the jQuery to:
$(document).ready(function() {
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div id=' + "post_" + postCount + '></div>').attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
$('#post_h3_' + postCount).append('<span>' + time + '</span>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
var paragraphCount = 0;
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
paragraphCount++;
}
postCount++;
}
generatePost("Testing Title", "I don't know", "This is || a paragraph");
});
Just calling the function at the end of the document.ready. Also, as you can see, I also ran into some issues about how the post's id was being assigned, so ended up switching that up as well, assigning it with some simple string interpolation.
Cheers,
PG

problems trying to get tweets from different zip codes

I am trying to get tweets from different zip codes.For doing this, I am using latitude and longitude values for each zip code. So far I want to get 3 tweets for each zip code(I have 2 zip codes), but it is working only for one zip code.
Any suggestion will be appreciated. Thank you in advance!
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var lat=[41.9716,42.0411];
var lng=[-87.7026,-87.6900];
$(document).ready(function() {
for(var i=1; i<2; i++)
{
$.getJSON('http://search.twitter.com/search.json?q=business&geocode='+lat[i]+','+lng[i]+',5mi&lang=en&callback=?', function(data) {
var data = data.results;
var html = "";
for(var j=0; j<3;j++){
html += "<div style='width:600px;border:solid thin blue'><img src='"+data[j].profile_image_url+"'/><a href='http://twitter.com/" + data[j].from_user + "'>#"+ data[j].from_user + "</a>: " + data[j].text + "</div>";
}
$('.content'+i).html(html);
}); }
});
</script>
</head>
<body>
<div class="content1"></div>
<div class="content2"></div>
</body>

I found 2 problems with your code:
1) If you want to iterate 2 times, your for function should be like this: for (var i = 0; i < 2; i++)
2) You must have in consideration that the function that gets called in $.getJSON runs asynchronously, so when that function gets called the for will have already finished, therefore you can't use the i value with that purpose inside that function.
So, after correcting those 2 things in your code you should be able to get what you want. Try with something like this:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var lat = [41.9716, 42.0411];
var lng = [-87.7026, -87.6900];
var count = 1;
$(document).ready(function () {
for (var i = 0; i < 2; i++) {
$.getJSON('http://search.twitter.com/search.json?q=business&geocode=' + lat[i] + ',' + lng[i] + ',5mi&lang=en&callback=?', function (data) {
var data = data.results;
var html = "";
for (var j = 0; j < 3; j++) {
html += "<div style='width:600px;border:solid thin blue'><img src='" + data[j].profile_image_url + "'/><a href='http://twitter.com/" + data[j].from_user + "'>#" + data[j].from_user + "</a>: " + data[j].text + "</div>";
}
$('.content' + count++).html(html);
});
}
});
</script>
</head>
<body>
<div class="content1"></div>
<div class="content2"></div>
</body>
</html>