Numeric-defined varliable becomes as NaN while trying to print json array - javascript

I'm trying to use the following code in order to split Json array into 3-columns Bootstrap rows
I'm trying that by increasing a numeric variable to 3, adding a new row div and set it back to 1.
actually, the variable return as "NaN" at the first attemt to increase it
please your help, or any other idea to splir json to 3-col rows.
the code:
<script>
$( document ).ready(function() {
var coli;
console.log( 'ready!'+coli );
$.getJSON("games.json", function(data) {
var html = '';
var coli=1;
$.each(data, function(key,value){
if (coli==3) {
html += '<div class="row">';
console.log( "3!" );
}
html += '<div class="col-md-4 img-portfolio">';
html += '<a href="portfolio-item.html">';
html += '<img class="img-responsive img-hover" src="'+value.teaser+'" alt="">';
html += '</a>';
html += '<h3>';
html += ''+value.title+'' ;
html += '</h3>';
html += '<p>'+coli+value.description+'</p>';
html += '</div> ';
if (coli==3) {
html += '</div>';
var coli=1;
console.log( "1!" );
}
coli++;
console.log( 'ready!'+coli );
});
$('#yourContainerId').html(html);
});
});
</script>
Thanks

try replace
if (coli==3) {
html += '</div>';
var coli=1;
console.log( "1!" );
}
with
if (coli==3) {
html += '</div>';
coli=1;
console.log( "1!" );
}
You are declaring your variable coli new in the if-statement. That is what you should not do.

Related

Get index-name dynamically

So, I have an UL which is empty. By clicking on a button, list-items (li) will be added to the ul. All these items do have a header (h1). The header of each item, has to get it's index from the list. So the second li needs to have a header with the number 2, and the third with the number 3.
I've searched the internet for a while for proper solutions, but wasn't able to find one. Now I have created a small piece of code which, in my opinion, should work. But it doesn't. Below is the JavaScript (jQuery) code which adds the items to the list, but also sets it's header.
/*Give all list items a name*/
function AddName() {
var list = $("#jrn_form_input_list");
for (var i = 0; i < 5; i++) {
var index = $("li").index(list[i]);
var header = "Journey leg: " + index;
$(list[i]).find("h1").text(header);
}
};
/*Add journy leg*/
$("#jrn_add_leg_btn").click(function() {
var html = '';
html += '<li>';
html += '<div class="jrn_field">';
html += '<h1 class="jrn_field_header">"TEST_LEG_NAME"</h1>';
html += '<label for="jrn_location"><b>Traveling to</b></label>';
html += '<input type="text" name="jrn_location">';
html += '</div>';
html += '</li>';
$("#jrn_form_input_list").append(html);
AddName();
});
So the function AddName() doesn't work. Is there anyone who knows how to do this properly in JavaScript/jQuery?
In this example all 5 list items are added at once.
$( "#jrn_add_leg_btn" ).click(function()
{
for (var i = 0; i < 5; i++)
{
var j = i + 1;
var html = '';
html += '<li>';
html += '<div class="jrn_field">';
html += '<h1 class="jrn_field_header">Journey leg:'+ j +'</h1>';
html += '<label for="jrn_location"><b>Traveling to</b></label>';
html += '<input type="text" name="jrn_location">';
html += '</div>';
html += '</li>';
$("#jrn_form_input_list").append(html);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id = "jrn_add_leg_btn" >click</button>
<ul id='jrn_form_input_list'></ul>

alternating between even and odd elements in json with JS

I'm trying to generate a .html div containers using .json file that looks like below.
[
{
"KEYWORD": XXXX,
"DATEx": XXXX,
"TOPIC": XXXX,
"CSPANLINK": XXXX,
"EXCERPTS": XXXX
},
{
"KEYWORD": YYYY,
"DATEx": YYYY,
"TOPIC": YYYY,
"CSPANLINK": YYYY,
"EXCERPTS": YYYY
}]
For odd numbered elements, I want to create div with class = "container left" and for even numbered elements, I want to create div with class = "container right". I used the below code to generate .html:
$.getJSON("XXXXYYYY.json", function (data) {
var html = '';
$.each(data, function (key, value) {
html += '<div class="container left">';
html += '<div class="content">';
html += '<h2>' + value.DATEx + '</h2>'
html += '<p>' + value.EXCERPTS + '</p>';
html += '</div>';
html += '</div>';
});
$('div.timeline').html(html);
});
So in a nutshell, I would like to alternate between these two codes, depending on the index of each element.
html += '<div class="container left">';
and
html += '<div class="container right">';
What kind of javascript conditional statement should I use to do this?
The parameter you pass in the $.each is the array and the function callback with index and value
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});
So in your case you can check even odd for your index and add the class accordingly.
Something like this
$.getJSON("XXXXYYYY.json", function (data) {
var html = '';
$.each(data, function (index, value) {
html += index%2===0 ? '<div class="container right">' : '<div class="container left">';
html += '<div class="content">';
html += '<h2>' + value.DATEx + '</h2>'
html += '<p>' + value.EXCERPTS + '</p>';
html += '</div>';
html += '</div>';
});
$('div.timeline').html(html);
});
looks like its an duplication of:
Is this an even or odd element?
Therefor the following Code should work for you.
$('div').each(function(i, el) {
// As a side note, this === el.
if (i % 2 === 0) { /* we are even */ }
else { /* we are odd */ }
});

Ajax Jquery / JavaScript create HTML Elements when data is greater than 0 (zero)

I have a HTML element that I am populating with divs & data with JSON returned from a PHP script. The data is constantly updating so I am using Eventsouce (sse).
<div class="row state-overview" id="statusCount"> </div>
let fsource;
function getStatus() {
if (typeof(EventSource) !== "undefined") {
try {
fsource.removeEventListener("status", stream, false);
} catch (ex) {
}
fsource = new EventSource("-PHP FILE-");
fsource.addEventListener("status", stream, false);
} else {
console.log("Oh no");
}
}
function stream(e) {
let data = JSON.parse(e.data);
let html = '';
$.each(data, function (key, value) {
html += '<div class="col-lg-2 panel ' + key + ' ">';
html += '<p>' + key + '</p>';
html += '<label>' + value + '</label>';
html += '</div>';
});
$('#statusCount').html(html);
}
getStatus();
This works perfectly, however, I am trying to hide / not show elements where the value = 0.
A sample of the JSON looks like so:
event: status
data: {"Online": 2, "Stopped": 3, "Alarm": 0, "Offline": 0}
Unfortunately I can't change the PHP to manipulate what data gets returned,
so any JavaScript or Jquery Solutions would be great - cheers!
What about a simple condition:
$.each(data, function (key, value) {
// if value IS more than zero, add some html
if(value>0){
html += '<div class="col-lg-2 panel ' + key + ' ">';
html += '<p>' + key + '</p>';
html += '<label>' + value + '</label>';
html += '</div>';
}
});

print array of object in javascript and print in html tags

i am using storelocater.js for multiple location in google map and show the information according to the location with image. i can show only one image but i want to show multiple images inside the information panel. link this
Here is my code
var panelDiv = document.getElementById('panel');
storeLocator.Panel.NO_STORES_IN_VIEW_HTML_ = '<li class="no-stores">The nearest outlet:</li>';
var Store = storeLocator.Store;
Store.prototype.generateFieldsHTML_ = function(fields) {
var html = '';
html += '<div class="store-data">';
if(this.props_['title']){
html += '<div class="title"><div class="img-list clearfix">' +
for (var i = 0; i <= this.props_[images].length; i++) {
console.log(this.props_[images[i]]);
// <img src=' + this.props_['images'] + '>
}
+ '</div></div>'
}
html += '</div>';
return html;
}
var data = new storeLocator.StaticDataFeed;
data.setStores([
new storeLocator.Store('store02', new google.maps.LatLng(27.67663,85.31093), null, {images: ["img/thapathalil.jpg","img/thapathalil.jpg","img/thapathalil.jpg"]})
]);
and it shows:
Uncaught SyntaxError: Unexpected token for...
how can i solve this?? how can i fetch location inside of "images"
THANKS in advance
Actually you got Uncaught SyntaxError: Unexpected token for... because you used the for..loop in the string concatenation statement, directly after the + sign.
Change this code :
html += '<div class="title"><div class="img-list clearfix">' +
for (var i = 0; i <= this.props_[images].length; i++) {
console.log(this.props_[images[i]]);
// <img src=' + this.props_['images'] + '>
}
+ '</div></div>'
To the following:
html += '<div class="title"><div class="img-list clearfix">';
for (var i = 0; i <= this.props_['images'].length; i++) {
console.log(this.props_['images'][i]);
html += '<img src=' + this.props_['images'][i] + '>';
}
html += '</div></div>'
Note:
You should separate the concatenation of strings to the html
variable and the for loop logic, using html += instead of just using concatenation with + sign on multiple lines.
Make sure to wrap the properties names between two '' while accessing your objects, like in this.props_[images] where it should be this.props_['images'] and in this.props_[images[i]] where it should be this.props_['images'][i].
And the first 2 lines of your html variable decalaration and the concatenation, var html = ''; html += '<div class="store-data">'; can be shortened to just var html = '<div class="store-data">';.
I think there is a typo. Change this:
console.log(this.props_[images[i]])
to
console.log(this.props_['images'][i])
And you should use
i < this.props_['images'].length
So try this:
for (var i = 0; i < this.props_['images'].length; i++) {
console.log(this.props_['images'][i]);
}

JSON date not showing in HTML

I have a problem with JSON data: I want make news feed via JSON URL, but the information not showing in HTML.
$(function() {
var entries = [];
var dmJSON = "http://www.stellarbiotechnologies.com/media/press-releases/json";
$.getJSON( dmJSON, function(data) {
var html = '<div class="panel-body"><h3 class="lead">${title}</h3>';
html += '<time datetime="${published}">';
html += '<span class="glyphicon glyphicon-time"></span> ';
html += '<span class="month">${monthName}</span> ';
html += '<span class="day">${day}</span>, ';
html += '<span class="year">${year}</span></time></div>';
$('#ticker').html
},
<div id="ticker"></div>
You could do something like this:
<script>
$(document).ready(function() {
var dmJSON = "http://www.stellarbiotechnologies.com/media/press-releases/json";
$.getJSON( dmJSON, function(data) {
var html = '';
// loop through all the news items, and append the
// title and published date to the html variable.
for(var i = 0; i < data.news.length; i++){
html += '<div>';
html += data.news[i].title
html += '<br>';
html += data.news[i].published
html += '</div>';
}
// append all the html variable to the ticker div.
$("#ticker").append(html);
});
});
</script>
This will loop through the news node, and get the title and the published date and then append them to the page (an element with the id of ticker.

Categories