We Keep Coding

Data showing undefined in table

I am trying to get my data into an HTML table. The JavaScript is properly detecting the data and is showing two rows in the table, which is correct. The issue is each of the fields of both rows display undefined. Not sure where to go from here.
$(function() {
var records = [];
$.getJSON('https://v1.nocodeapi.com/devmarq/airtable/RiBnzHulmTPHkgnD?tableName=JobListings&fields=company,logo,companyDescription,role,roleDescription,location,link,dateAdded&view=AllListings', function(data) {
$.each(data.records, function parseJSON(i, f) {
var tblRow = "<tr>" + "<td>" + f.company + "</td>" + "<td>" + f.companyDescription + "</td>" + "<td>" + f.role + "</td>" + "<td>" + f.roleDescription + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="wrapper">
<div class="profile">
<table id="userdata" border="2">
<thead>
<th>Company</th>
<th>Company Description</th>
<th>Role</th>
<th>Role Description</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
Again the table is showing two rows, which is correct, but each value of the rows says undefined.

You need to pull the fields key out of the record object:
$(function() {
var records = [];
$.getJSON('https://v1.nocodeapi.com/devmarq/airtable/RiBnzHulmTPHkgnD?tableName=JobListings&fields=company,logo,companyDescription,role,roleDescription,location,link,dateAdded&view=AllListings', function(data) {
$.each(data.records, function parseJSON(i, { fields: f }) {
var tblRow = "<tr>" + "<td>" + f.company + "</td>" + "<td>" + f.companyDescription + "</td>" + "<td>" + f.role + "</td>" + "<td>" + f.roleDescription + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="wrapper">
<div class="profile">
<table id="userdata" border="2">
<thead>
<th>Company</th>
<th>Company Description</th>
<th>Role</th>
<th>Role Description</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
I changed the second argument of the parseJSON function from f to { fields: f }; this uses object destructuring to grab the value of the fields entry in the object passed to the second argument and assigns it to the f variable so that the rest of the code can use that object to get their values.

Table in jQuery with toggable row

I have a table with the list of orders in my ecommerce site. I would like another line to appear with the order details by clicking on each line.
I don't understand how to write the function.
Here is how i wrote the table row:
$("#tbody").append("<tr id='riga" + i + "'><th scope='row'>" + idordine
+ "</th><td>" + data + "</td><td>" + prezzoTotale
+ "€</td><td> <button id='button_" + i
+ "')>Dettagli</button></tr><tr id='orderdetail_" + i
+ "' style='display:none;'>"
+ "<th scope='row'> ciao </th><td>ciao2</td><td>ciao2</td><td>ciao2</td></tr>"
);
and the function i wrote is:
for (var i = 0; i < ordini.length; i++) {
$("#button_" + i).click(function(i) {
$("#orderdetail_" + i).toggle("slow");
});
}
the variable i in $("#orderdetail_"+i) doesn't work. How can i do it?
Thanks all.

There's no need to link button_i with orderdetail_i, you can use relative navigation, in this case a relatively simple:
$(this).closest("tr").next()
To facilitate the event handler, I've added togglebutton class to each button and used that in a single selector.
Updated code:
// setup some example data
for (var i = 1;i<10; ++i) {
$("tbody").append("<tr id='riga" + i + "'><th scope='row'>" + "idordine"
+ "</th><td>" + "data" + "</td><td>" + "prezzoTotale"
+ "€</td><td> <button class='togglebutton' id='button_" + i
+ "')>Dettagli</button></tr><tr id='orderdetail_" + i
+ "' style='display:none;'>"
+ "<th scope='row'> ciao </th><td>ciao" + i + "</td><td>ciao" + i + "</td><td>ciao" + i + "</td></tr>"
);
}
// handle toggle
$("button.togglebutton").click(function() {
$(this).closest("tr").next().toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
</tbody>
<table>

Append data to datatable using Firebase

The table displays 'No data available' but the data was appended inside the table
TableImage[1]
this is my firebaseimage
here's my html code:
<div class="box box-success">
<div class="box-header">
<h3> Sales </h3>
<table id="orders" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Date Ordered</th>
<th>Date Delivered</th>
<th>Status</th>
</tr>
</thead>
<tbody id="example">
</tbody>
</table>
</div>
</div>
my javascript code:
$('#orders').dataTable();
var rootRef = firebase.database().ref().child("sales/");
rootRef.on("child_added", snap => {
var key = snap.key;
var product = snap.child("product").val();
var price = snap.child("price").val();
var quantity = snap.child("quantity").val();
var date_ordered = snap.child("date_ordered").val();
var date_delivered = snap.child("date_delivered").val();
$("#example").append("<tr id='" + key + "'><td>" + key + "</td><td>" +
product + "</td><td>" + price + "</td><td>" + quantity + "</td><td>" +
date_ordered + "</td><td>" + date_delivered + "</td><td>" +
"<a href = 'product_list.html' > View < /a></td > < /tr>");
});
can anyone help me? please .. :(

I have a small improvement for your code, you can check it out below. I think you should try to make it works with raw HTML table first before using dataTable plugin. I don't know which dataTable plugin you're using but maybe you got 'No data available' because at the time you init the plugin, your table is empty.
var rootRef = firebase.database().ref().child("sales/");
rootRef.on("child_added", snap => {
var row = snap.val();
var key = snap.key;
var product = row.product;
var price = row.price;
var quantity = row.quantity;
var date_ordered = row.date_ordered;
var date_delivered = row.date_delivered;
$("#example").append("<tr id='" + key + "'><td>" + key + "</td><td>" +
product + "</td><td>" + price + "</td><td>" + quantity + "</td><td>" +
date_ordered + "</td><td>" + date_delivered + "</td><td>" +
"<a href = 'product_list.html' > View < /a></td > < /tr>");
});

splice in javascript change values of my other objects

NOTE! this is for an extra credit assignment, so I am not looking for code re-write but rather guidance in what I am doing wrong. I have gone through my code several times and I feel like I am just missing something very minor. I have completed it fully with the exception of the following error:
I created an array of objects.
Everything starts off fine. I can create objects and they are added to the array and successfully displayed on my screen with correct values.
The trouble arises when I delete an object from the array. It does delete this object and removes it from my displayed list, but suddenly all the remaining objects get new values. These new values match those of the LAST object I added to the array. I need them to retain their original values!
var tableContent = document.getElementById("tableContent");
var tableString = " ";
var counter = 0;
var courseArray = [];
tableContent.innerHTML = tableString;
function Course(number, title, hours, prereq) {
this.number = number;
this.title = title;
this.hours = hours;
this.prereq = prereq;
}
function createCourse() {
var number = document.getElementById("number-field");
var title = document.getElementById("title-field");
var hours = document.getElementById("hours-field");
var prereq = document.getElementById("prereq-field");
courseArray.push(new Course(number, title, hours, prereq));
buildCourseTableBody();
}
function buildCourseTableBody() {
tableString += "<tr>" +
"<td>" + counter + "</td>" +
"<td>" + courseArray[counter].number.value + "</td>" +
"<td>" + courseArray[counter].title.value + "</td>" +
"<td>" + courseArray[counter].hours.value + "</td>" +
"<td>" + courseArray[counter].prereq.value + "</td>" +
"<td><button id='delete' onClick='deleteCourse(" + counter + ")'><img id=counter src='../image/delete.png' alt='delete course'></button></td>" +
"</tr>";
counter++;
tableContent.innerHTML = tableString;
}
function deleteCourse(counterIndex) {
courseArray.splice(counterIndex, 1);
counter--;
tableString = "";
for (var i = 0; i < courseArray.length; i++) {
tableString += "<tr>" +
"<td>" + i + "</td>" +
"<td>" + courseArray[i].number.value + "</td>" +
"<td>" + courseArray[i].title.value + "</td>" +
"<td>" + courseArray[i].hours.value + "</td>" +
"<td>" + courseArray[i].prereq.value + "</td>" +
"<td><button id='delete' onClick='deleteCourse(" + i + ")'><img id=counter src='../image/delete.png' alt='delete course'></button></td>" +
"</tr>";
}
and HTML code(everything in main, which is wrapped in body. js file is included):
<main id="main-index">
<h1 id="page-caption">CS Department Course Catalog</h1>
<div id="course-list">
<p id="course-list-caption">Course List</p>
<table>
<thead>
<tr>
<th>Count</th>
<th>Number</th>
<th>Title</th>
<th>Hours</th>
<th>Prereq</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tableContent">
</tbody>
</table>
</div>
<div id="course-edit">
<p><input id="number-field" placeholder="Course #, e.g. CS234"></p>
<p><input id="title-field" placeholder="Course title, e.g. Database and Wed Systems Development"></p>
<p><input id="hours-field" placeholder="Credit hours, e.g. 3.0"></p>
<p><input id="prereq-field" placeholder="Course prereqs, e.g. CS150, CS111"></p>
<p><button id="add" onClick="createCourse()">+</button></p>
</div>
</main>

Your error is in createCourse. You are assigning the HTML-Elements instead of their value.
function createCourse() {
var number = document.getElementById("number-field").value;
var title = document.getElementById("title-field").value;
var hours = document.getElementById("hours-field").value;
var prereq = document.getElementById("prereq-field").value;
courseArray.push(new Course(number, title, hours, prereq));
buildCourseTableBody();
}
The class course will hold a reference to the element itself. Like that your functions which generate the table itself, will always get the most current value of the input boxes.
Notice:
Don't forget to adapt buildCourseTableBody and deleteCourse.

Getting data from a .json URL and displaying it in HTML with Javascript/JQuery

I am trying to get json data from:
http://api.dailymile.com/entries.json
Then I wish to display this data in a table. The below code works when the json link points to a file already on my computer, but not when referring to a URL.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$(function() {
var entries = [];
var dmJSON = "http://api.dailymile.com/entries.json";
$.getJSON( dmJSON, function(data) {
$.each(data.entries, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.id + "</td>" + "<td>" + f.user.username + "</td>" + "<td>" + f.message + "</td>" + "<td> " + f.location + "</td>" + "<td>" + f.at + "</td>" + "</tr>"
$(tblRow).appendTo("#entrydata tbody");
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
<table id= "entrydata" border="1">
<thead>
<th>ID</th>
<th>UserName</th>
<th>Message</th>
<th>Location</th>
<th>Time</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
Any help as to why it won't load the json data is appreciated.

As aldux suggests, a simple way of accessing JSON cross-domain is to use JSONP. In your case, the server (dailymile.com) does support JSONP, so you can simply add a ?callback=? parameter to your url, i.e.
var dmJSON = "http://api.dailymile.com/entries.json?callback=?";
$.getJSON( dmJSON, function(data) {
$.each(data.entries, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.id + "</td>" + "<td>" + f.user.username + "</td>" + "<td>" + f.message + "</td>" + "<td> " + f.location + "</td>" + "<td>" + f.at + "</td>" + "</tr>"
$(tblRow).appendTo("#entrydata tbody");
});
});

This is because the AJAX Same Origin Policy tha won't allow you to fetch data from different domains:
http://en.wikipedia.org/wiki/Same_origin_policy
Try this instead:
http://en.wikipedia.org/wiki/JSONP