I have created an HTML table called players_table consisting of 3 variables(ID, Name, Country)
The table should display the fetched JSON data into its rows. I don't know what's wrong and why it isn't fetching anything. Could you please help me out fix this error and display results into the table?
<script>
$(document).ready(function()
{
$.getJSON("GameDb.json", function(data)
{
var player_data = '';
$.each(data,function(key,value)
{
player_data +='<tr>';
player_data +='<td>'+value.Id+'</td>';
player_data +='<td>'+value.Name+'</td>';
player_data +='<td>'+value.Country+'</td>';
player_data +='</tr>';
});
$('#players_table').append(player_data);
});
});
</script>
The console is not showing any errors. However, the entire table cells are showing the word "Undefined".
This is the view from my end.
Related
I want to read only one row each time on excel. I can read all datas in excel but I couldn't limit it. Either I can read only 1 column in all rows or the all data. How can I read just 1 row on javascript?
I use this script and this src:
<script src="https://unpkg.com/read-excel-file#4.x/bundle/read-excel-file.min.js"></script>
<body>
<input type="file" id="input">
<script>
var input = document.getElementById('input');
input.addEventListener("change", function (){
readXlsxFile(input.files[0]).then(function (data){
data.map((row,index)=>{
var location= document.createTextNode(row);
console.log(location)
If you need one row, don't map over entire file:
readXlsxFile(input.files[0]).then(data => {
console.log(data[0]) // supposed to print the first row
})
I am using Framework7 to build a mobile app. Using the popup and request features, I am dynamically building an html table with JSON data as follows:
//Do something when popup is opened
$$(document).on('popup:opened', '.popup-airconSearch', function (e) {
//Show preloader
app.preloader.show();
//Request json data from URL
app.request.json('my-URL', function (data) {
var tableHtml = '';
for(var i = 0; i < data.length; i+=1){
tableHtml+= '<tr><td class="numeric-only">' +data[i].brand+ '</td> <td class="numeric- only">' +data[i].model+ '</td></tr>';
}
//Add rows to HTML table
$$('.data-table #airconDatabase').html(tableHtml);
app.preloader.hide();
})
})
The JSON URL also includes an ID field and I am trying to log the ID of each entry when a table row is clicked. I have updated the above function with:
$$('.data-table #airconDatabase tr').on('click', e => {
var id = data[i].regnumber;
console.log (id);
})
However the console logs ID as underfined. If I change it to
var id = data[0].regnumber;
Then the first JSON entry regnumber field is logged to console no matter which table row is clicked. If I change it to
var id = data[1].regnumber;
Then the second JSON entry regnumber field is logged and so on.
Where am I going wrong?
My solution:
Firstly build the dynamic HTML table with a row ID from the JSON data:
tableHtml+= '<tr id="' +data[i].am_5_regnumber+ '"><td class..
Then get the row ID when a table row is clicked:
$$('.data-table #airconDatabaseTable tbody tr').on('click', function (e) {
var zaf = $$(this).closest('tr').attr('id');
console.log (zaf);
})
In addition to the above, I had to add an ID to the HTML table and not just the table body.
I am using https://github.com/wenzhixin/bootstrap-table on some project.
I find that is really easy to use and implement pagination. However I have some problem regarding custom html in different rows. This is just peace of code.
$('#selector').bootstrapTable({
pagination: true,
url : some_rest_url,
sidePagination: 'server',
onLoadSuccess: function (res) {
var data_ = [];
var rows = res.rows;
for (var i =0; i < rows.length; i ++) {
var data = {};
var item = rows[i];
$.each(item, function (key, value) {
if (key == "cost") value = "< span class="cl" >"currency + " " + parseFloat(value).formatNumber(2, '.', ',')."< / span >";
//and so on some more styling and formatting for other elements/columns of table
data[key] = value;
});
data_.push(data);
}
$('#selector').bootstrapTable("load", data_);
So table should have one column and in each row span element with that class but that is not happening.
I just have that default plain text data from boostrapTable default load (json data).
BTW when using plain ajax call instead of that default boostrapTable pagination thingy everything works great but then i have to make custom pagination (and using sidePagination = client is just wrong and working slow when have like 1000 records ).
After wasting couple of hours, solution was to use formatter for columns. For example:
field: 'column_name',
formatter: operateFormatter
function operateFormatter(value, row, index){
//value is text from json
//row is all values from json for that row
}
well this way, code will be much more clearer.
I am working with weather api, my intention is to display the json data into simple html view....
The problem is that (perhaps) the above script not working at all, even alert, if i am doing it wrong please someone guide....
Script and html
<div id ="fj"></div>
$(document).ready(function() {
var teams;
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?lat=33.5689&lon=72.6378&cnt=10", function(dataDD) {
//do some thing with json or assign global variable to incoming json.
var tasks = $.parseJSON(dataDD.city);
alert(tasks);
//alert('empLoggedId');
$.each(tasks, function(key, value) {
$("#fj").append(data.weather.description);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="fj"></div>
Any kind of hep or reference will be appreciated
Thanks for your time
Here you go, http://jsfiddle.net/9c2tb8xk/
I am not sure what you are trying to list but I think this is what you want.
$(document).ready(function() {
var teams;
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?lat=33.5689&lon=72.6378&cnt=10", function(dataDD) {
//$.getJson parses for you, dont try to parse it again.
var tasks = dataDD.list //tasks is list property of dataDD
$.each(tasks, function(key, value) { //for each value in list will be in value
$("#fj").append(value.weather[0].description); //I used the value as a specific item from list.
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id ="fj"></div>
I have build a table:
function insertTable(elementName, text, textColor, backgroundColor, relativeOffsetArea, fatherBC, scrollArea, offsetArea, clientArea) {
this.elementName = elementName;
this.text = text;
this.textColor = textColor;
this.backgroundColor = backgroundColor;
this.relativeOffsetArea = relativeOffsetArea;
this.fatherBC = fatherBC;
this.scrollArea = scrollArea;
this.offsetArea = offsetArea;
this.clientArea = clientArea;
}
And i'm adding to this table data during the running process..
but when I'm viewing the filled table in console log with this code:
console.table(consoleResult,["elementName", "text", "textColor", "backgroundColor", "relativeOffsetArea", "fatherBC", "scrollArea",
"offsetArea", "clientArea"]);
the maximum number of the lines is 1000.
does console table is limited to length of 1000 ?
Do you familiar with another way (maybe excel) to export this table ?
console.table only works in some browser versions. If you want this data in excel just loop it to a server script and download it as an xls with and html table in it. ( its a bit hacky but excel will happily open an html table saved as an xls file)
in php heres an example:
HTML table to excel - PHP