We Keep Coding

Autodesk forge viewer table row click to isolate elements

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

error overlayer - can get variable index - leaflet

i want to fetch branch data then put it into overlay but index data can't be fetched, maybe you can help me how to write data with array
this is my code layergroup with variable cabang
#foreach ($cabang as $data)
var cabang{{ $data->idCabang }} = L.layerGroup();
#endforeach
initiate variable cabang at layer and overlayer
var map = L.map('map', {
center: [-7.6453934, 112.739125],
zoom: 8.48,
layers: [
peta1,
#foreach ($cabang as $data)
cabang{{ $data->idCabang }},
#endforeach
],
});
var overlayer = {
#foreach ($cabang as $data)
"{{ $data->namaCabang }}": cabang{{ $data->idCabang }},
#endforeach
};
this is a code for marker get data with json
var mark = $(document).ready(function() {
$.getJSON('mark/json', function(data) {
$.each(data, function(index) {
markers.addLayer(
L.marker(
L.latLng(
data[index].latitude, data[index].longitude
)
)
.bindPopup(
"<div style='font-size: 8px'>" +
"<table>" +
"<tr>" +
"<th width='60px'>Name</th>" +
"<td>" + ': ' + data[index].namaAgen + "</td>" +
"</tr>" +
"<tr>" +
"<th>ID Kerjasama</th>" +
"<td>" + ': ' + data[index].idKerjasama + "</td>" +
"</tr>" +
"<tr>" +
"<th>Cabang</th>" +
"<td>" + ': ' + data[index].namaCabang + "</td>" +
"</tr>" +
"<tr>" +
"<th>Alamat</th>" +
"<td>" + ': ' + data[index].alamat + "</td>" +
"</tr>" +
"<tr>" +
"<td>" +
"<a href='/detailWeb/" + data[index].idAgen +
"' class='btn btn-sm btn-primary' style='font-size:8px; color: white;'>Detail</a>" +
"</td>" +
"</tr>" +
"</table>"
)
).addTo(cabang.data[index].idCabang); // <----- can't get data
});
});
});
).addTo(cabang.data[index].idCabang); // <----- can't get data

How to parse JSON data in javascript when the property name is unknown

I am parsing JSON data and property name is unknown. I am sharing my code please tell me how can i get all data with unknown property
datas.data.videoGroup.past after that please use a loop
$.each(datas.data.videoGroup.past.Algebra, function(i, v) {
var hash5 = v.id;
var link = hash5;
var tblRows = "<tr>" + "<td>" + v.title + "</td>" + "<td>" + 2 + ' ₹' + "</td>" + "<td><a target='_blank' href='" + link + "'>" + "WATCH/DOWNLOAD" + "</a></td>" + "</tr>";
$(tblRows).appendTo("#userdata");
});
$.each(datas.data.videoGroup.past["Number System"], function(i, v) {
I put Number System and Algebra manually but i can't do it with each subject and for each teacher.

Either iterating over the properties using for...in loop or getting the list of all the known keys on the object using the Object.keys() method; which returns an array containing all the keys which can be mapped over.
const obj = {
a: 'hello',
b: 'world',
c: 'test',
};
for (const prop in obj) {
console.log(`${prop}: ${obj[prop]}`);
}
// "a: 1"
// "b: 2"
// "c: 3"
console.log(Object.keys(obj));
// ["a", "b", "c"]
#
Something like -
for( const prop in datas.data.videoGroup.past) {
$.each(datas.data.videoGroup.past[prop], function(i, v) {
var hash5 = v.id;
var link = hash5;
var tblRows = "<tr>" + "<td>" + v.title + "</td>" + "<td>" + 2 + ' ₹' + "</td>" + "<td><a target='_blank' href='" + link + "'>" + "WATCH/DOWNLOAD" + "</a></td>" + "</tr>";
$(tblRows).appendTo("#userdata");
});
}

In html table how to show Yes/No instead of 1/0

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>" ;

Uncaught Reference Error: okButtonElementFirebase. All about addEventListener

having a hard time on addEventlistner. it gives me uncaught reference error when page is loaded
window.onload= initializer;
var refUsers;
var tableBody;
INITIALIZER
function initializer(){
refUsers=firebase.database().ref().child("users");
tableBody = document.getElementById("table_body");
loadTables();
}
LOADS TABLE
function loadTables(){
refUsers.on("value", function(snap){
var data = snap.val();
var file11 = "";
for(var key in data){
file11 += "<tr>" +
"<td>" + data[key].firstname + "</td>" +
"<td>" + data[key].lastname + "</td>" +
"<td>" + data[key].birthdate + "</td>" +
"<td>" + data[key].email + "</td>" +
"<td>" + data[key].date + "</td>" +
"<td>" + data[key].time + "</td>" +
'<td>' +
'<button class="btn btn-sm btnColorAccept center-block okButton" dataOk-confirmation="' + key + '">' +
'<span class="glyphicon glyphicon-ok"></span>' +
'ACCEPT</button>' +
'</td>' +
'<td>' +
'<button class="btn btn-sm btnColorDecline center-block removeButton" dataRemove-confirmation="' + key + '">' +
'<span class="glyphicon glyphicon-remove"></span>' +
'DECLINE</button>' +
'</td>' +
"</tr>;";
}
tableBody.innerHTML = file11;
if(file11 != ""){
var elementForOkButton = document.getElementsByClassName("okButton");
for( var i=0; i< elementForOkButton.length; i++){
elementForOkButton[i].addEventListener("click", okButtonElementFirebase, false);
}
}
});
} //end table function
GOT ERROR ON THIS LINE
elementForOkButton[i].addEventListener("click", okButtonElementFirebase, false);
FOR BUTTON WHEN CLICKED
function okButtonELementFirebase(){
var keyOkButton = this.getAttribute("dataOk-confirmation");
var firebaseRefUsers = refUsers.child(keyOkButton);
firebaseRefUsers.remove();
}

function okButtonELementFirebase(){
You have a typo - okButtonELementFirebase should be okButtonElementFirebase.