I'm just trying to do this but I keep getting only countries[i].Code instead of the image, can anyone help me out with this ?
function flist(){
var list = document.querySelector("#flist");
var myRows = "";
for(var i=0; i < countries.length; i++){
myRows += "<tr>" +
"<td>" + "<figure>" + "<img src=" + "\"" + "/flags/"+ countries[i].Code +
".png" + "\"" + "alt=" + "\"" + countries[i].Code + "\"" + "height=" +"\""+ "14"+ "\"" + " width=" + "\"" +"14" + "\""+ ">" +"</figure>" + "</td>" +
"<td>" + countries[i].Code + "</td>" +
"<td>" + countries[i].Name.English + "</td>" +
"<td>" + countries[i].Continent + "</td>" +
"<td>" + countries[i].AreaInKm2.toString()+ "</td>" +
"<td>" + countries[i].Population.toString() + "</td>" +
"<td>" + countries[i].Capital + "</td>" +
"</tr>";
}
list.innerHTML += myRows;
};
Example of Countires
var countries = [
{
Code: "AF",
Continent: "Asia",
AreaInKm2: 652230,
Population: 35530081,
Capital: "Kabul",
Name: {
"English": "Afghanistan",
"Arabic": "أفغانستان",
"Chinese": "阿富汗",
"Franch": "Afghanistan",
"Hindi": "अफ़ग़ानिस्तान",
"Korean": "아프가니스탄",
"Japanese": "アフガニスタン",
"Russian": "Афганистан"
}
Im trying to make a table in the HTML of each county and in the begging to have a flag
<h4 id="subtitle">List of Countries and Dependencies</h4>
<table id="outputTable">
<thead>
<tr>
<th>Flag</th>
<th>Code</th>
<th id="countyrName">Country/Dep. Name</th>
<th>Continent</th>
<th>Area (Km<sup>2</sup>)</th>
<th>Population</th>
<th>Capital</th>
</tr>
</thead>
<tbody id="flist"></tbody>
</table>
If you use singles quotes for dealing with building HTML in javascript, you don't have to escape the double quotes around params and is less prone to making mistakes.
myRows += '<tr>' +
'<td><figure><img src="/flags/' + countries[i].Code + '.png" alt="' + countries[i].Code + '" height="14" width="14" /></figure></td>' +
'<td>' + countries[i].Code + '</td>' +
'<td>' + countries[i].Name.English + '</td>' +
'<td>' + countries[i].Continent + '</td>' +
'<td>' + countries[i].AreaInKm2.toString()+ '</td>' +
'<td>' + countries[i].Population.toString() + '</td>' +
'<td>' + countries[i].Capital + '</td>' +
'</tr>';
I'd be keeping your HTML as HTML, keep it out of the JavaScript. If you change from a table to ul you now have to go rewrite your javascript.
Set a hidden template. Make a copy of the template to work with and remove the template all together. Then you can clone the template an replace values as needed without needing to worry about your HTML structure.
var countries = [{
Code: "AF",
Continent: "Asia",
AreaInKm2: 652230,
Population: 35530081,
Capital: "Kabul",
Name: {
"English": "Afghanistan",
"Arabic": "أفغانستان",
"Chinese": "阿富汗",
"Franch": "Afghanistan",
"Hindi": "अफ़ग़ानिस्तान",
"Korean": "아프가니스탄",
"Japanese": "アフガニスタン",
"Russian": "Афганистан"
}}]
//Make a clone out of tempate
var template = document.getElementById("rowTemplate").cloneNode(true);
template.removeAttribute("id")
console.log(template);
//get rid of original we done't need it any more
document.getElementById("flist").innerHTML = "";
function flist() {
var list = document.querySelector("#flist");
var myRows = "";
for (var i = 0; i < countries.length; i++) {
//make a working copy of the template
var workingTemplate = template.cloneNode(true);
//Do the replace
workingTemplate.innerHTML = workingTemplate.innerHTML
.replace(/{{code}}/g, countries[i].Code)
.replace(/{{name}}/g, countries[i].Name.English)
.replace(/{{continent}}/g, countries[i].Continent)
.replace(/{{area}}/g, countries[i].AreaInKm2)
.replace(/{{population}}/g, countries[i].Population)
.replace(/{{capital}}/g, countries[i].Capital);
myRows += workingTemplate.outerHTML;
}
//update the table
list.innerHTML += myRows;
};
flist();
#rowTemplate {
display: none;
}
<h4 id="subtitle">List of Countries and Dependencies</h4>
<table id="outputTable">
<thead>
<tr>
<th>Flag</th>
<th>Code</th>
<th id="countyrName">Country/Dep. Name</th>
<th>Continent</th>
<th>Area (Km<sup>2</sup>)</th>
<th>Population</th>
<th>Capital</th>
</tr>
</thead>
<tbody id="flist">
<tr id="rowTemplate">
<td class="img">
<figure><img src="/flags/{{code}}" alt="{{code}}" height="14" width="14"></figure>
</td>
<td>{{code}}</td>
<td>{{name}}</td>
<td>{{continent}}</td>
<td>{{area}}</td>
<td>{{population}}</td>
<td>{{capital}}</td>
</tr>
</tbody>
</table>
Related
I have this table
<table id="player_info">
<tr>
<th>Position</th>
<th>Club</th>
<th>Points</th>
<th>Matches Played</th>
<th>Wins</th>
<th>Draws</th>
<th>Losses</th>
<th>Goals For</th>
<th>Goals Against</th>
<th>Goal Difference</th>
<th>Form</th>
</tr>
</table>
And I have this function which iterates through JSON keys and creates a new table cell with each key. I would like to have the logo of each club appear next to its name in the table cell. The logo URL is stored in the JSON.
My current code
data.api.standings[0].forEach(elements => {
var tr = document.createElement('tr');
var img = new Image();
img.src = elements.logo;
tr.innerHTML = '<td>' + elements.rank + '</td>' +
'<td>' + elements.teamName + img + '</td>' +
'<td>' + elements.points + '</td>' +
'<td>' + elements.all.matchsPlayed + '</td>' +
'<td>' + elements.all.win + '</td>' +
'<td>' + elements.all.draw + '</td>' +
'<td>' + elements.all.lose + '</td>' +
'<td>' + elements.all.goalsFor + '</td>' +
'<td>' + elements.all.goalsAgainst + '</td>' +
'<td>' + elements.goalsDiff + '</td>' +
'<td>' + elements.forme + '</td>';
table.appendChild(tr);
});
However I am getting the team name and [object HTMLImageElement] and no image.
In your case you can do this instead
var img = '<img src="' + elements.logo + '" />'
instead of making an img element
I am getting dynamic values in table using Datatables. I am getting my desired value in alert, but I want to show that value in table. for that purpose I used .append, .html but no luck. How can I show = my value in <td>. I also try to gave gave td an id e.g <td id="files">
here is my code:
function format(d) {
var str = d.files;
var myarr = str.split(",");
for (var i = 0; i < myarr.length; i++) {
alert(myarr[i]);
$("#files").append("<a href='/uploads/" + myarr[i] + "'>" + myarr[i] + "</a>");
}
// `d` is the original data object for the row
return '<table id="ChildRows" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Contact Person:</td>' +
'<td>' + d.person + '</td>' +
'</tr>' +
'<tr>' +
'<td>Phone:</td>' +
'<td>' + d.phone + '</td>' +
'</tr>' +
'<tr>' +
'<td>Web:</td>' +
'<td>' + d.web + '</td>' +
'</tr>' +
'<tr>' +
'<td>Trade Type:</td>' +
'<td>' + d.ttype + '</td>' +
'</tr>' +
'<tr>' +
'<td>Files:</td>' + '<td id="files">'
'</td>' +
'</tr>' +
'</table>';
}
I hope it will be a easy fix.any help will be highly appreciable
Your issue is that the #files element doesn't exist at the point you attempt to select it. You need to first add that HTML string to the DOM, then append to it.
Alternatively, you could amend the logic which creates that HTML string to include the output of your for loop, like this:
function format(d) {
var str = d.files;
var filesHtml = str.split(",").map(function(file) {
return '' + file + '';
});
return '<table id="ChildRows" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Contact Person:</td>' +
'<td>' + d.person + '</td>' +
'</tr><tr>' +
'<td>Phone:</td>' +
'<td>' + d.phone + '</td>' +
'</tr><tr>' +
'<td>Web:</td>' +
'<td>' + d.web + '</td>' +
'</tr><tr>' +
'<td>Trade Type:</td>' +
'<td>' + d.ttype + '</td>' +
'</tr><tr>' +
'<td>Files:</td>' +
'<td id="files">' + filesHtml + '</td>' +
'</tr>' +
'</table>';
}
var html = format({
person: 'John Smith',
phone: '1234 567890',
web: 'http://google.com',
ttype: 'Foobar',
files: 'a.jpg,b.jpg'
});
$('div').append(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I am trying to populate an html table of JSON data. I was provided the JSON data and cannot determine why it isn't populating but suspect the JSON may not be formatted properly. When I use other sample data it works, then when I sub in the JSON I was provided it doesn't work. I've tried copying the JSON into a file on my direct server, linking to what I was provided (here: https://boiling-fortress-75456.herokuapp.com/) and inserting it on myjson.com and reformatting the JSON data.
Here is my code:
<script>
$(function() {
var entries = [];
var dmJSON = "https://api.myjson.com/bins/6sjud?callback=?";
$.getJSON(dmJSON, function(data) {
$.each(data.entries, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.rank + "</td>" + "<td>" + f.name + "</td>" + "<td>" + f.march_rank + "</td>" + "<td> " + f.april_rank + "</td>" + "<td>" + f.may_rank + "</td>" + f.personal_volume + "</td>" + f.team_volume + "</td>" + "</tr>"
$(tblRow).appendTo("#incentive tbody");
});
});
});
</script>
<div class="wrapper">
<div class="profile">
<table id= "incentive" border="1">
<thead>
<th>Rank</th>
<th>Name</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>Highest Rank</th>
<th>Personal Volume</th>
<th>Team Volume</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
You need to get the objects from affiliate
$.each(data.affiliate, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.rank + "</td>" + "<td>" + f.name + "</td>" + "<td>" + f.march_rank + "</td>" + "<td> " + f.april_rank + "</td>" + "<td>" + f.may_rank + "</td>" + f.personal_volume + "</td>" + f.team_volume + "</td>" + "</tr>"
$(tblRow).appendTo("#incentive tbody");
});
Response from service
{
"affiliate":[{
"rank":1,"name":"Sally","march_rank":"Gold","april_rank":"Silver","may_rank":"Silver","highest_rank":"Silver","team_volume":12345
},{
"rank":2,"name":"Zelda","march_rank":"Gold","april_rank":"Bronze","may_rank":"Silver","highest_rank":"Gold","team_volume":12345
}
]
}
When using child_added to populate a table, I use append() to show the data on the HTML table, but how do I do it with child_changed? Should I delete the row and then append a new one with the changed information? If so, how do I delete this row? Or maybe use something else instead of append() to update the data on the HTML table?
HTML Table
<table id="tableAssets" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr id="tableHeader">
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th class="mdl-data-table__cell--non-numeric">Brand</th>
<th class="mdl-data-table__cell--non-numeric"> </th>
</tr>
</thead>
<tbody id="table_body"> </tbody>
</table>
JavaScript
rootRef.on("child_added", snap => {
var assetKey = snap.child("id").val();
var name = snap.child("name").val();
var brand = snap.child("brand").val();
$("#table_body").append("<tr data-id='"+assetKey+"'>"+
"<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
"<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
"</div></td></tr>");
});
For child added use id in tr
rootRef.on("child_added", snap => {
var assetKey = snap.child("id").val();
var name = snap.child("name").val();
var brand = snap.child("brand").val();
$("#table_body").append("<tr id='row"+assetKey+"'>"+
"<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
"<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
"</div></td></tr>");
});
For Child Changed
rootRef.on("child_changed", snap => {
var assetKey = snap.child("id").val();
var name = snap.child("name").val();
var brand = snap.child("brand").val();
editrow = "row"+assetKey;
document.getElementById("editrow").innerHTML = "<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
"<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
"</div></td>");
});
This will help.
I want to empty the data inside tbody, I tried:
$("#detail_tbody").html("");
$("#detail_tbody").empty();
but the result is that the current page is cleared.
When i click the next page,the data will show again.How can i empty all of them?
<table id="detail_table">
<tr align="center">
<th style="display: none;"></th>
<th width="100px">1</th>
<th width="130px">2</th>
<th width="130px">3</th>
<th width="130px">4</th>
<th width="130px">5</th>
<th width="130px">6</th>
<th width="130px">7</th>
</tr>
<tbody id="detail_tbody"></tbody>
</table>
The js is :
for (var i = 0; i < productTradeDetail_list.length; i++) {
productTradeDetail_listobj = productTradeDetail_list[i];
p += "<tr align=\"center\">" +
"<td style='display: none;'>" + i + "</td>" + //
"<td>" + productTradeDetail_listobj.procode + "</td>" +
"<td>" + productTradeDetail_listobj.proname + i + "</td>" +
"<td>" + productTradeDetail_listobj.tradename + "</td>" +
"<td>" + productTradeDetail_listobj.confirmatm + "</td>" +
"<td>" + productTradeDetail_listobj.confirmvol + "</td>" +
"<td>" + productTradeDetail_listobj.statename + "</td>" +
"<td>" + productTradeDetail_listobj.tradedata + "</td></tr>";
}
$("#detail_tbody").empty();
$("#detail_tbody").append(p);
page = new Page(5, "detail_table", "detail_tbody");
$("#tradeDetail_pageLabel").val(page.pageIndex + 1 + "/" + page.pageCount);
ADD:I have two response,i need clear current data of response and show another when i change into next response.