I am receiving a json file from server and in this file there are some values 0/1. And therse values are showing same in html table. But i want to show these values as Yes/No.How can i do that
I am sharing my code
$.getJSON('list.php', function(data) {
$.each(data.classlists , function(i, f) {
var tblRows = "<tr>" + "<td>" + "Info" + "</td>" + "<td>" + f.messageName + "</td>" + "</tr>" +"<tr>" + "<td>" + "Link" + "</td>" +"<td><a target='_blank' href='"+link+"'>"+"Get INFO"+"</a></td>" + "</tr>" + "<tr>" + "<td>" + "Teacher" + "</td>" + "<td>" + f.date + "</td>" + "</tr>" + "<tr>" + "<td>" + "Is Live Now" + "</td>" + "<td>" + f.liveClassStatus + "</td>" + "</tr>" ;
in front of Is Live Now i want to show Yes or No
Pleaee make some necessary change
Put an if condition to check if the value is 1, then use yes otherwise no.
$.getJSON('list.php', function(data) {
$.each(data.classlists , function(i, f) {
var tblRows = "<tr>" + "<td>" + "Info" + "</td>" + "<td>" + f.messageName + "</td>" + "</tr>" +"<tr>" + "<td>" + "Link" + "</td>" +"<td><a target='_blank' href='"+link+"'>"+"Get INFO"+"</a></td>" + "</tr>" + "<tr>" + "<td>" + "Teacher" + "</td>" + "<td>" + f.date + "</td>" + "</tr>" + "<tr>" + "<td>" + "Is Live Now" + "</td>" + "<td>" + (f.liveClassStatus === 1 ? 'Yes' : 'No') + "</td>" + "</tr>" ;
Related
I am trying to create a dynamic table inside the viewer's page.
each row of the table represents an object from the model and has a couple of different parameters ( name, level, etc..)
I want to make a click event on each row, that isolates the element in the viewer's model.
I have created the table programmatically using js. (the table is created after pressing an external command button )
how can I add an event listener to a row click, that would isolate the element?
this is my code for creating the table after pressing the command button:
var myTable = $('.my-table');
var myArr = rows; //matrix of object values
for (var i = 0; i < myArr.length; i++)
myTable.append("<tr id=" + i + ">" +
" <td>" + myArr[i][0] + "</td>" +
"<td>" + myArr[i][1] + "</td>" +
"<td>" + myArr[i][2] + "</td>" +
"<td>" + myArr[i][3] + "</td>" +
"<td>" + myArr[i][4] + "</td>" +
"<td>" + myArr[i][5] + "</td>" +
"<td>" + myArr[i][6] + "</td>" +
"<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
"</tr>");
const row = document.getElementById(`${i}`);
row.addEventListener('onClick', function(evt, item) { /// we are using a viewer api property to isolate the
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});
First, it's not a Forge issue but a JavaScript syntax and indent issue.
After re-indenting your code, you can see the codes for adding the click event is out of the for-loop, so you need to add the bracket pair to include the codes for adding the click event into the for-loop.
When defining for-loop in JavsScirpt without bracket { and }, it only takes the first line in the count.
In addition, there is no onClick event. When using addEventListener, the event name is click, not onClick.
var myTable = $('.my-table');
var myArr = [[1,2,3,4,5,6,7], [1,2,3,4,5,6,7]]; //matrix of object values
for (var i = 0; i < myArr.length; i++) {
myTable.append("<tr id=" + i + ">" +
" <td>" + myArr[i][0] + "</td>" +
"<td>" + myArr[i][1] + "</td>" +
"<td>" + myArr[i][2] + "</td>" +
"<td>" + myArr[i][3] + "</td>" +
"<td>" + myArr[i][4] + "</td>" +
"<td>" + myArr[i][5] + "</td>" +
"<td>" + myArr[i][6] + "</td>" +
"<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
"</tr>");
const row = document.getElementById(`${i}`);
row.addEventListener('click', function(evt) { /// we are using a viewer api property to isolate the
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});
}
To use onClick, it will become:
const row = document.getElementById(`${i}`);
row.onClick = function(evt) { /// we are using a viewer api property to isolate the
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});
Lastly, why not just use jQuery only? The jquey.on can help bind events to dynamically created items, so that the click event will be delegated to any tr element in the table, even if it's added after you bound the event handler.
var myTable = $('.my-table');
var myArr = [[1,2,3,4,5,6,7], [1,2,3,4,5,6,7]]; //matrix of object values
myTable.on('click', 'tr', function() {
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});
for (var i = 0; i < myArr.length; i++) {
myTable.append("<tr id=" + i + ">" +
" <td>" + myArr[i][0] + "</td>" +
"<td>" + myArr[i][1] + "</td>" +
"<td>" + myArr[i][2] + "</td>" +
"<td>" + myArr[i][3] + "</td>" +
"<td>" + myArr[i][4] + "</td>" +
"<td>" + myArr[i][5] + "</td>" +
"<td>" + myArr[i][6] + "</td>" +
"<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
"</tr>");
}
ref: https://stackoverflow.com/a/15420578
I want to access my json object with key as table header, and value with the same pattern that JSON Object has, and show in Html table.
history:{1/22/20: 2, 1/23/20: 3, 1/24/20: 5, 2/1/20: 19, 2/10/20: 32, 2/11/20: 33, 2/12/20: 33, 2/2/20: 19, 2/20/20: 35, 2/21/20: 35}
Code
for (var i = 0; i <= Object.keys(response.confirmed.locations).length; i++) {
var final = response.confirmed.locations[i].history;
$("#show").append("<tr>" +
"<td>" + final['1/22/20'] + "</td>" +
"<td>" + final['1/23/20'] + "</td>" +
"<td>" + final['1/24/20'] + "</td>" +
"<td>" + final['2/1/20'] + "</td>" +
"<td>" + final['2/10/20'] + "</td>" +
"<td>" + final['2/11/20'] + "</td>" +
"<td>" + final['2/12/20'] + "</td>" +
"<td>" + final['2/2/20'] + "</td>" +
"<td>" + final['2/20/20'] + "</td>" +
"<td>" + final['2/21/20'] + "</td>" +
+"<tr>")
}
let yourJSON = ...
Then you must parse yours json object using JSON.parse(yourJSON )
let result = JSON.parse(yourJSON )
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
And then you can iterate the object using Object.entries()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
for (let [key, value] of Object.entries(result )) {
console.log(`${key}: ${value}`);
}
I want to get the length of data, when i try console.log(data) i got all of data but console.log(data.length) is undefined.
function tampilesai(idsoal){
$.ajax({
url: "soalesai/baca/"+idsoal,
type: "POST",
dataType: "JSON",
success: function(data){
console.log(data); //here <=================
console.log(data.length); //here <=============
var html = "";
for (i = 0; i < data.length; ++i) {
html += "<tr>" +
"<td class='isitbl'>" + data[i].idsoal + "</td>" +
"<td class='isitbl' style='width:20px;'>" + data[i].noesai + "</td>" +
"<td class='isitbl' style='width:200px;'>" + data[i].matakuliah + "</td>" +
"<td>" + data[i].isiesai + "</td>" +
"<td class='isitbl'><button class='btn btn-danger btn-block' id='hapus' data[i]-id='" + data[i].idsoal + "'>" +
"<span class='icon-trash'></span> Hapus</button>" +
"</td>" +
"</tr>";
}
$("tbody#tblesai").html(html);
}
})
i need data.length for loop and fill my table. its data log
{idesai: "90", idsoal: "1", noesai: "1", matakuliah: "1", isiesai: "<p>asdd</p>"}
this image browser
If your data is an Object then you need to use Object.keys(data).length instead to get the length of the data object.
Try the following...
Convert the result data into JSON object. Although the return type was explicitly stated as JSON, but some version of jQuery may not parse it automatically. I ran into such bug with some version 2.x
var data = $.parseJSON(data);
// console.log(data.length) *should return 1
var html = "";
$.each(data, function(c) {
html += "<tr>" +
"<td class='isitbl'>" + c.idsoal + "</td>" +
"<td class='isitbl' style='width:20px;'>" + c.noesai + "</td>" +
"<td class='isitbl' style='width:200px;'>" + c.matakuliah + "</td>" +
"<td>" + c.isiesai + "</td>" +
"<td class='isitbl'><button class='btn btn-danger btn-block' id='hapus' data[i]-id='" + c.idsoal + "'>" +
"<span class='icon-trash'></span> Hapus</button>" +
"</td>" +
"</tr>";
});
$("tbody#tblesai").html(html);
I have not tested this, but I think it will give you an alternative idea.
Finish..
function tampilesai(idsoal){
$.ajax({
url: "soalesai/ambil/"+idsoal,
type: "POST",
dataType: "JSON",
success: function(data){
var html = "";
for(i=0;i<data.length;i++){
html += "<tr>" +
"<td class='isitbl'>" + data[i].idsoal + "</td>" +
"<td class='isitbl' style='width:20px;'>" + data[i].noesai + "</td>" +
"<td class='isitbl' style='width:200px;'>" + data[i].matakuliah + "</td>" +
"<td>" + data[i].isiesai + "</td>" +
"<td class='isitbl'><button class='btn btn-danger btn-block' id='hapus' data-id='" + data[i].idsoal + "'>" +
"<span class='icon-trash'></span> Hapus</button>" +
"</td>" +
"</tr>";
}
$("tbody#tblesai").html(html);
}
})
}
i change my controller
public function ambil($idsoal){
echo json_encode(
$this->pertanyaan_model
->ambilsoal($idsoal)->result());
}
and my model..
public function ambilsoal($idsoal){
$query = $this->db
->where("idsoal",$idsoal)
->get("tblsoalesai");
return $query;
}
and its works, thanks guys try to help me.. love you
I already read the string and build an html table from it:
var ShoesXML = "<All><Shoe><Name>All Stars</Name><BrandName>Converse</BrandName><ReleaseDate>10/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe><Shoe><Name>All Star1s</Name><BrandName>Converse1</BrandName><ReleaseDate>11/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe></All>";
$(document).ready(function() {
xmlDoc=$.parseXML( ShoesXML );
$(xmlDoc).find("Shoe").each(function(i, n) {
var html = "<tr>\n" +
"<td><span>" + $(n).find("Name").text() + "</span></td>\n" +
"<td>" + $(n).find("BrandName").text() + "</td>\n" +
"<td>" + $(n).find("ReleaseDate").text() + "</td>\n" +
"<td><img src='" + $(n).find("Picture").text() + "'></td>\n" +
"</tr>";
$("table.shoetable tbody").append(html);
});
});
I tried to set a value this way but no success:
$(n).find("Name").text("NEW VALUE")
Set the .textContext before building HTML string
$(n).find("Name").text("NEW VALUE")
var html = "<tr>\n" +
"<td><span>" + $(n).find("Name").text() + "</span></td>\n" +
"<td>" + $(n).find("BrandName").text() + "</td>\n" +
"<td>" + $(n).find("ReleaseDate").text() + "</td>\n" +
"<td><img src='" + $(n).find("Picture").text() + "'></td>\n" +
"</tr>";
I have this simple Javascript for string concatenation:
function stampaLista(store) {
lista = "<table ><tr>" +
"<td class='titoloLista' style='width:80px'>Data Ins.</td>" +
"<td class='titoloLista' style='width:130px'>Data/Ora Attività </td>" +
"<td class='titoloLista' style='width:100px'>Tipologia</td>" +
"<td class='titoloLista' style='width:30px'>Stato</td>" +
"<td class='titoloLista' style='width:150px'>Utente ins.</td>" +
"<td class='titoloLista' style='width:150px'>Utente designato</td>" +
"<td class='titoloLista' style='width:250px'>Anagrafica</td>" +
"<td class='titoloLista' style='width:30px'>Vai</td>" +
"</tr>";
for (i=0; i<store.length; i++) {
lista += "<tr >" +
"<td class='rigaLista'>" + store[i].dataIns + "</td>" +
"<td class='rigaLista'>" + store[i].dataAtt + " " + store[i].oraAtt + "</td>" +
"<td class='rigaLista'>" + store[i].idTipoAttivita + "</td>" +
"<td class='rigaLista'>" + store[i].stato + "</td>" +
"<td class='rigaLista'>" + store[i].utenteIns + "</td>" +
"<td class='rigaLista'>" + store[i].utenteAtt + "</td>" +
"<td class='rigaLista'>" + store[i].anagrafica + "</td>" +
"<td class='rigaLista'>" + "<div class='go' ><a id='" + store[i].id + "' href='#' class='go' return;><img alt='" + store[i].id + "' src='images/go.gif' /></a>" + "</div></td>" +
"</tr>";
};
lista += "</table>";
lista += "<div class='clearfloat'> </div>";
return lista;
}
but with IE8 I had error, on both population of "lista":
SCRIPT438: Object doesn't support property or method
The problem is solved with IE9 but i need to work also with IE8 due to customer requirements.
Any ideas ?
Thanks a lot
Fabrizio
Because there is HTML mixed with Javascript Make sure there is no HTML element id with the same id as a variable in the Javascript function.