JSON date not showing in HTML - javascript

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.

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>

javascript scripts not working in electron

I am trying to work on electron and made a simple dashboard GUI. i am a beginner in node js and electron.
Problem:
in my main gui.html: i have a table is being loaded, and from that table i need to select the rows from checklist for which i have made a js script:
script in read_checklist.js, this is taking the input checkbox element and selecting the whole row, which will later be shown after some processing in the textarea.
var checkboxes = document.getElementsByTagName("input");
var select_all = document.getElementById("allcb");
var warn_code = Array();
var family_array = Array();
var fail_drive_array = Array();
var waiverMap = {};
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var Warn_Code = currentRow.getElementsByTagName("td")[0];
var Family = currentRow.getElementsByTagName("td")[1];
var failing_drive = currentRow.getElementsByTagName("td")[3];
warn_code.push(Warn_Code.textContent);
family_array.push(Family.textContent);
fail_drive_array.push(failing_drive.textContent);
console.log('server started!' + currentRow );
alert(currentRow.textContent);
};
}
I am trying to import this in my gui.html like this:
This is where the table is getting displayed (code for this is below and it is stored in the renderer.js)
<!--This is for the table-->
<div id="data_lib" class="table-responsive">
</div>
<script type="text/javascript" src="./read_checklist.js"></script>
<!--This is for the table-->
My table is coming from another file, renderer.js
$(document).ready(function(){
var data;
$.ajax({
type: "GET",
url: "/Users/mrimat01/Desktop/CODE/electron_QAB_GUI_main/GUI/data.csv",
dataType: "text",
success: function(response)
{
data = $.csv.toArrays(response);
generateHtmlTable(data);
}
});
function generateHtmlTable(data) {
var html = "<table id='big_tables' class='table table-striped table-bordered' method='GET'>";
if(typeof(data[0]) === 'undefined') {
return null;
} else {
$.each(data, function( index, row ) {
//bind header
if(index == 0) {
html += '<thead>';
html += '<tr>';
$.each(row, function( index, colData ) {
html += '<th>';
html += colData;
html += '</th>';
});
html += '<th>';
html += "<input type='checkbox' id='allcb' name='allcb'/>Select";
html += '</th>';
html += '</tr>';
html += '</thead>';
html += '<tbody>';
} else {
html += '<tr>';
$.each(row, function( index, colData ) {
html += '<td>';
html += colData;
html += '</td>';
});
html += '<td>';
html += "<input id='name' type='checkbox' name='name' value='name' /> ";
html += '</td>';
html += '</tr>';
}
});
html += '</tbody>';
html += '</table>';
$('#data_lib').append(html);
}
}
});
I can see the table getting generated but read_checklist.js desn't work.
If i try to do the same thing in console, it works perfectly.
i have gone through many SO answers but couldn't seem to make this work.
Things i have tried:
making node_integration: true
using
module = undefined;}</script>
<script>if (window.module) module = window.module;</script>
adding the script directly below root <div>

how to get the text inside the dynamically rendered items on the click of the button?

I am displaying the content after fetching it via ajax using jquery so the content is dynamic,
var i, j;
var product_names = [];
var product_image = [];
var product_rate = [];
var product_amount = [];
var product_category = [];
$.ajax({
url: BASE_URL + '/getOrgServices?orgId=' + orgId,
type: 'GET',
success: function(result) {
//console.log(result);
for (i in result) {
product_names[i] = result[i].name;
product_image[i] = result[i].imgurl;
product_rate[i] = result[i].rate;
product_amount[i] = result[i].amount;
product_category[i] = result[i].categories;
}
for(i in product_category){
var html = '<div class="prod-content"><ul id="products">';
html += '<li class="row product-listing">';
html += '<div class="product-img-container"><img class="product-img" src="' + product_image[i] + '"></div>';
html += '<div class="container product-listing-details"><h6 id="product-title">' + product_names[i] + '</h6><div id="product-description">' + product_amount[i] + '</div><br><div id="product-cost">' + product_rate[i] + '</div></div>';
html += '<div id="product-add">';
html += '<button class="add-button" type="button" role="button">ADD</button>';
html += '<span class="quantity"><input class="item-quantity" type="number" value="0" min="0" max="50" step="1"></span>';
html += '</div></li> </ul></div>'
//adding elements to all category
var id_str = '#' + new_id[0];
$(id_str).append(html);
}
}
Now in the below function i want to access the name of one h6 product_name at a time so is there any method to do so like if I could select
$(".add-button").click(function() {
//here i want to add items to cart on button click (means the button clicked its corresponding item should be added to cart )
});
is the cart part of the html code
<div class="order">
<ul id="products">
<li>
//here i want to append the added item
</li>
</ul>
</div>
To get all h6 you can do similar thing as below, without jQuery.
$(".add-button").click(function() {
console.log("click");
document.querySelectorAll("div.prod-content h6").forEach((function(elem) {
console.log(elem.innerText);
if (parseInt(elem.innerText) > 0) {
console.log(elem);
}
}));
});

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

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.

javascript $_GetJSON from .php file

I have a PHP file (GenerateJson.php) that uses json_encode to produce JSON data from my database, I know I can have that same PHP file write to a .json file but if I do that the written JSON will only contain the data from the last time the GenerateJson.php the requested and I want to javascript to be able to access live data on the fly
currently my code is is this:
$('#search').keyup(function() {
var searchField = $('#search').val();
var myExp = new RegExp(searchField, 'i');
$.getJSON('Generated.json', function(data) {
var output = '<ul class="searchresult1">';
$.each(data.data, function(key, val) {
if ((val.artists.Artist.search(myExp) != -1)) {
var ArtistURL = "music/abArtist.php?artist=" + encodeURIComponent(val.artists.Artist);
output += '<li>';
output += '<h2>' + val.artists.Artist + '</h2>';
output += '</li>';
}
});
output += '</ul>';
$('#update1').html(output);
});
});
When I replace "Generated.json" with "GenerateJson.php"
This javascript don't work anymore...
What is a good and simple fix? to get this to work with "GenerateJson.php" and how?
Thanks!
If you want to get the JSON data dynamically from PHP you can try the following
$.ajax({
dataType: 'json',
url: 'GenerateJson.php',
done(function( data ) {
var output = '<ul class="searchresult1">';
$.each(data.data, function(key, val) {
if ((val.artists.Artist.search(myExp) != -1)) {
var ArtistURL = "music/abArtist.php?artist=" + encodeURIComponent(val.artists.Artist);
output += '<li>';
output += '<h2>' + val.artists.Artist + '</h2>';
output += '</li>';
}
});
output += '</ul>';
$('#update1').html(output);
});

Categories