jQuery $.each iterating through firebase array twice

jQuery $.each iterating through firebase array twice - javascript

I am trying to use jQuery with firebase on the web and am building a quick table of users and tickets. The users and tickets are displaying properly, however they are iterated over twice, in that the table contains the same users and tickets twice. I am not sure what is happening.`
var users = ["Nick","Peter"];
var rows = "";
var number = 0;
//Sync all changes
dbRefAllUsers.on('value', function(snap) {
console.log("#Run",number+1);
jQuery.each(users, function(index,name){
console.log(name);
rows += "<tr><td>" + name + "</td><td>" + snap.child(name).child("tickets").val() + "</td></tr>";
console.log(rows);
});
$(rows).appendTo("#ticketTable tbody");
return head.innerText = JSON.stringify(snap.val(), null, 3);
});`
HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
</head>
<body>
<h1 id="head"></h1>
<script src="https://www.gstatic.com/firebasejs/3.6.7/firebase.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="./app.js"></script>
<table id="ticketTable" style="font-size:18px;">
<thread>
<tr>
<th>Users</th>
<th>Tickets</th>
</tr>
</thread>
<tbody>
</tbody>
</table>
</body>
</html>

Related

JavaScript Create Table and filling with an array content

I need to create a table in JS which have 3 cells in the first row and in the rest (20 rows) 4 column.
How should I do it work properly if I want to fill the rows from an array value?
So I have myArray[0, 1, 2, 3...] and those values need to insert into the table starting with the second row. (First is like header row)
const apptid_divs11 = [...document.querySelectorAll('.apptSearchResultSelected')];
const apptid_set11 = new Set(apptid_divs11.map(div => div.textContent.trim().split('#')[0]))
The apptid_set11 values needs to go to the table, but the size of the array is always changing

Your question isn't detailed. The following is an example which you can use as a home base
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<th>H1</th>
<th>H2</th>
<th colspan="2">H3</th>
</thead>
<tbody></tbody>
</table>
<script>
let myArrayData = Array.from(Array(20), (x, i) => i);
let rows = "";
for (let rowData of myArrayData) {
rows += `
<tr>
<td>${rowData}</td>
<td>${rowData}</td>
<td>${rowData}</td>
<td>${rowData}</td>
</tr>
`;
}
document.querySelector("table tbody").innerHTML = rows;
</script>
</body>
</html>

Get data from a table html with click

Good afternoon, I'm a beginner, I'm having trouble getting information from a table that consumes data from an api.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="main.js"></script>
<title>Document</title>
</head>
<body onload="apendeOnClick()">
<table id="tablerow">
<caption>Alien football stars</caption>
<thead>
<tr>
<th>DATA</th>
<th>TELEFONE</th>
<th>RAMAL</th>
<th>DESCRIÇÃO</th>
<th>ACÕES</th>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
<script>
</script>
</body>
</html>
My code is this, it feeds the table normally, but I would like when the person clicks on the row button to display the information in the alert.
main.js
fetch("https://my-json-server.typicode.com/lfnoleto/api-fake/contact").then((data) => {
return data.json()
}).then((Objectdata) => {
//console.log(Objectdata[0].data)
let tabelaData = ""
Objectdata.map((values)=>{
tabelaData += `<tr>
<td>${values.data}</td>
<td>${values.tefone}</td>
<td>${values.ramal}</td>
<td>${values.descricao}</td>
<td><button id="butao" class="btn btn-success" ><i class="fa fa-phone"></button></td>
</tr>`
})
document.getElementById("table_body").innerHTML = tabelaData
innerHTML = tabelaData
})
function apendeOnClick(){
const table = document.getElementById("tablerow")
console.log(table)
if (table) {
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].childNodes[5].childNodes[1].onclick = function() {
tableText(this);
};
}
}
}
function tableText(tableRow) {
let telefone = tableRow.childNodes[1].innerHTML;
let ramal = tableRow.childNodes[2].innerHTML;
let obj = {'telefone': telefone, 'ramal': ramal};
console.log(obj);
}
I hope that when the person clicks on the telephone icon, he displays the extension and telephone information

you can use data attribute to store extension info or other information.
<button id="butao" data-extension="123" class="btn btn-success" >
in javascript :
const button = document.querySelector('button');
button.dataset.extention // "123"
a good references:
https://www.w3schools.com/tags/att_data-.asp
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

jQuery I'm using to make the rows of my table sortable is not working

I'm re-writing a project of mine to better align with the best practice documentation. I'm most of the way there, but it seems the jQuery I'm using to make the rows of my table sortable is not working. When I inspect the raw HTML of the table when it loads following the async call, I noticed that the sortable classes that the jQuery sortable widget is supposed to embed is not there (I can see it in my old code).
I have the relevant code duplicated on this sheet, but I'll include it here:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base target="_top">
<?!= include('1.1 openPackV2Stylesheet'); ?>
</head>
<body>
<div class="grid-container">
<table id="awayLineup">
<thead>
<tr>
<th></th>
<th>Rtg</th>
<th>Season</th>
<th>Name</th>
<th>Age</th>
<th>Team</th>
<th>OB</th>
<th>Out</th>
<th>Walk</th>
<th>Single</th>
<th>Single+</th>
<th>Double</th>
<th>Double+</th>
<th>Triple</th>
<th>Homer</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<?!= include('1.1 openPackV2Javascript'); ?>
</body>
</html>
1.1 openPackV2Javascript
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function() {
var awayLineup = google.script.run.withSuccessHandler(displayAwayLineup)
.getLineupV2();
});
function displayAwayLineup(awayLineup){
// $('.loading').style.display("hidden");
var tbody = $('#awayLineup > tbody');
for (i in awayLineup){
tbody.append(
'<tr><td class="demographics">'+awayLineup[i][54]+'</td><td class="demographics">'+awayLineup[i][52]+'</td><td class="demographics">'+awayLineup[i][0]+'</td><td class="playerName">'+awayLineup[i][3]+'</td><td class="demographics">'+awayLineup[i][4]+'</td><td class="demographics">'+awayLineup[i][7]+'</td><td class="cardData"><span class="circle">'+awayLineup[i][32]+'</span></td><td class="cardData">'+awayLineup[i][33]+'</td><td class="cardData">'+awayLineup[i][34]+'</td><td class="cardData">'+awayLineup[i][35]+'</td><td class="cardData">'+awayLineup[i][36]+'</td><td class="cardData">'+awayLineup[i][37]+'</td><td class="cardData">'+awayLineup[i][38]+'</td><td class="cardData">'+awayLineup[i][39]+'</td><td class="cardData">'+awayLineup[i][40]+'</td></tr>')
}
}
// make tables sortable
$(window).on("load", function(){
$("table tbody").sortable({
helper:function(e,row){
var originalCells = row.children();
var cloneRow = row.clone();
cloneRow.children().each(function(index){
$(this).width(originalCells.eq(index).width());
})
return cloneRow;
}
});
});
</script>

When I saw your script, it seems that jQuery UI is not loaded. So, how about the following modification?
From:
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function() {
var awayLineup = google.script.run.withSuccessHandler(displayAwayLineup)
.getLineupV2();
});
To:
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
google.script.run.withSuccessHandler(displayAwayLineup).getLineupV2();
});
In your script, var awayLineup = of var awayLineup = google.script.run can be removed.
Reference:
jQuery UI

JSON throw undefined in HTML

Please help me I am new in API integration
I want to show Poster, Title and year from API url.
here is the code which i tried, when i log, its shows JSON in array but its throw undefined in front end please help.
Thanks in advance
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Welcome</title>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1>Movies</h1>
<table class="table table-bordered table-responsive table-striped" id="movies_table">
<tr>
<th>Poster</th>
<th>Name</th>
<th>Year</th>
</tr>
</table>
</div>
</div>
<div id="my_div" class="hide">"Thank You"</div>
</body>
<script>
$(document).ready(function(){
$.getJSON("http://www.omdbapi.com/?apikey=d8ecb486&s=red", function(data) {
console.log(data);
var movies = '';
$.each(data, function(key,value){
movies += '<tr>';
movies += '<td>'+value.poster+'</td>';
movies += '<td>'+value.title+'</td>';
movies += '<td>'+value.year+'</td>';
movies += '</tr>';
});
$('#movies_table').append(movies);
});
});
</script>
</html>
here is the API structure
{"Search":[{"Title":"RED","Year":"2010","imdbID":"tt1245526","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw##._V1_SX300.jpg"},{"Title":"Red Dragon","Year":"2002","imdbID":"tt0289765","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTQ4MDgzNjM5MF5BMl5BanBnXkFtZTYwMjUwMzY2._V1_SX300.jpg"},{"Title":"The Hunt for Red October","Year":"1990","imdbID":"tt0099810","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BY2Y5NWVjMmQtMWRmOC00ZTg3LWI3YWQtZGI2MWUwNWQ4OWQ2XkEyXkFqcGdeQXVyNDk3NzU2MTQ#._V1_SX300.jpg"},{"Title":"The Thin Red Line","Year":"1998","imdbID":"tt0120863","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYjEzMTM2NjAtNWFmZC00MTVlLTgyMmQtMGQyNTFjZDk5N2NmXkEyXkFqcGdeQXVyNzQ1ODk3MTQ#._V1_SX300.jpg"},{"Title":"RED 2","Year":"2013","imdbID":"tt1821694","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjI2ODQ4ODY3Nl5BMl5BanBnXkFtZTcwNTc2NzE1OQ##._V1_SX300.jpg"},{"Title":"Red Sparrow","Year":"2018","imdbID":"tt2873282","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTA3MDkxOTc4NDdeQTJeQWpwZ15BbWU4MDAxNzgyNTQz._V1_SX300.jpg"},{"Title":"Red Eye","Year":"2005","imdbID":"tt0421239","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNzAxNjc1ODczOF5BMl5BanBnXkFtZTcwMjE3MjEzMw##._V1_SX300.jpg"},{"Title":"Red Riding Hood","Year":"2011","imdbID":"tt1486185","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTc4NjYyMzQ5MV5BMl5BanBnXkFtZTcwNjE5Mjc3NA##._V1_SX300.jpg"},{"Title":"Three Colors: Red","Year":"1994","imdbID":"tt0111495","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYTg1MmNiMjItMmY4Yy00ZDQ3LThjMzYtZGQ0ZTQzNTdkMGQ1L2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyMTQxNzMzNDI#._V1_SX300.jpg"},{"Title":"Red Dawn","Year":"2012","imdbID":"tt1234719","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjI0MDAwMzA1M15BMl5BanBnXkFtZTcwNzIxMjY3OA##._V1_SX300.jpg"}],"totalResults":"3993","Response":"True"}

there are multiple things
First of all your actual data is coming under Search Array
secondly the key you're trying to read is starting from Uppercase
then if you iterate through search array key will be index like 0,1,2...n and you need to read from value
just update this logic and you're good to go
var movies = '';
$.each(response.Search, function(key,value){
movies += `<tr>
<td>${value.Poster}</td>
<td>${value.Title}</td>
<td>${value.Year}</td>
</tr>`;
});
$('#movies_table').append(movies);

The issue is with your each loop, you need to use key.poster instead of value.poster. The first argumemnt to loop specifies the data element.
$(document).ready(function(){
$.getJSON("http://www.omdbapi.com/?apikey=d8ecb486&s=red", function(data) {
console.log(data);
var movies = '';
$.each(data, function(key,value){
movies += '<tr>';
movies += '<td>'+key.poster+'</td>';
movies += '<td>'+key.title+'</td>';
movies += '<td>'+key.year+'</td>';
movies += '</tr>';
});
$('#movies_table').append(movies);
});
});

HTML/JS: appendTo doesnt work

I wanted to dynamically append a Table/List to HTML page. My code as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Lead Manager</title>
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="themes/jquery.mobile.structure-1.2.0.min.css" />
<script src="themes/jquery-1.8.2.min.js"></script>
<script src="themes/jquery.mobile-1.2.0.min.js"></script>
</head>
<body id="body" name="body">
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>Lead Manager</h1>
</div>
<div data-role="content" data-theme="a">
<h2>List of Leads</h2>
</div>
</div>
</body>
<script>
$(document).ready(function(e) {
//var data = Android.getLeads();
var data = [{"status":"1","name":"1","campaign":"1","date":"1"},{"status":"2","name":"2","campaign":"2","date":"2"}];
var items = [];
var date;
var name;
var status;
//eval(" var x = " + data + " ; ");
//var y = JSON.stringify(x);
$.each(data, function(key,val){
items.push('<tr><td>' + val.date + '</tr></td>');
});
var text = $('<table/>', { html: items.join('')});
$('<table/>', {
html: items.join('')
}).appendTo('body');
});
</script>
</html>
The Items[] variable is getting filled with the tr and td values. However, the appendTo, doesnt work. The JSON as you can see doesnt require eval as its already in the format required.
Please can you help?

The issue was mainly because of the jquery.mobile script as it wasnt allowing dynamic addition of html code.

Develop Reference

JavaScript is the programming language of the Web.

jQuery $.each iterating through firebase array twice - javascript

Related

JavaScript Create Table and filling with an array content

Get data from a table html with click

jQuery I'm using to make the rows of my table sortable is not working

JSON throw undefined in HTML

HTML/JS: appendTo doesnt work

Categories

Resources