I have sample from Socket.io which is display price ticker of cryptocurrency. I try to find way to parse this socket to HTML table but still not find the resources. Here is the sample code using socket.io javascript :
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
</head>
<body>
<div id='trade'> open console </div>
</body>
<script type="text/javascript">
var socket = io.connect('https://coincap.io');
socket.on('trades', function (tradeMsg) {
console.log(tradeMsg);
document.getElementById('trade').innerHTML = JSON.stringify(tradeMsg)
})
</script>
</html>
Here is sample of output string from above code :
{"coin":"BTC","exchange_id":"bitfinex","market_id":"BTC_USD","message":{"coin":"BTC","msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237}},"msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237},"NODE_ID":1,"WORKER_ID":"3002"}
I want to parse above value to HTML table like this :
<table>
<tr>
<td>COIN</td>
<td>EXCHANGE</td>
<td>MARKET</td>
</tr>
<tr>
<td>value coin here</td>
<td>value exchange here</td>
<td>value market here</td>
</tr>
</table>
Any idea how to parse json from socket to html table?? thanks for help.
The mere parsing into an HTML table is rather easy. Note, that the following code makes use of template strings. It also has no checks in place to verify the message or the existence of the table. So you might need to add those.
function toTable( msg ) {
document.getElementById( 'results' )
.insertAdjacentHTML( 'beforeend',
`<tr><td>${msg.coin}</td><td>${msg.exchange_id}</td><td>${msg.market_id}</td></tr>`
);
}
toTable( {"coin":"BTC","exchange_id":"bitfinex","market_id":"BTC_USD","message":{"coin":"BTC","msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237}},"msg":{"cap24hrChange":0.98,"long":"Bitcoin","mktcap":112062520162.10434,"perc":0.98,"price":6454.5,"shapeshift":true,"short":"BTC","supply":17254075,"usdVolume":4485870675.82,"volume":4485870675.82,"vwapData":6452.35557294237,"vwapDataBTC":6452.35557294237},"NODE_ID":1,"WORKER_ID":"3002"} );
<table id="results">
<tr>
<th>COIN</th>
<th>EXCHANGE</th>
<th>MARKET</th>
</tr>
</table>
On the other hand, updates will be more interesting, as you have to create a key for each entry and keep track of whether there already a row for that entry or not.
based on above answer, i just modify the code to make it work without adding new row. Here is the code.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
</head>
<body>
<div id='trade'></div>
</body>
<script type="text/javascript">
function toTable( data ) {
document.getElementById( 'results' ).innerHTML = "<tr><th>COIN</th><th>EXCHANGE</th><th>MARKET</th><th>PRICE</th></tr>";
document.getElementById( 'results' ).innerHTML += "<tr><td>" + data.coin + "</td><td>" + data.exchange_id.toUpperCase() + "</td><td> " + data.market_id + "</td><td>" + data.message.msg.price + "</td></tr>";
}
var socket = io.connect('https://coincap.io');
socket.on('trades', function (tradeMsg) {
console.log(tradeMsg);
//document.getElementById('trade').innerHTML = JSON.stringify(tradeMsg);
toTable(tradeMsg);
})
</script>
</html>
<table border="1" id="results"></table>
Related
I created a rest web api and using AngularJS, I want to receive those json data and store them in a table. I am new to AngularJS. I was able to get all the json data but I want to split them up into each row. I am not sure if I am doing to correctly or not but here is my code:
index.html
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Angular</title>
<script src="lib/angular.js"></script>
<script src="angularDemo.js"></script>
</head>
<body>
<div ng-controller="demoController">
<table>
<tr>
<th>Id</th>
<th>Question</th>
</tr>
<tr ng-repeat=" quiz values">
<td>{{result.id}}</td> <!-- Does not get any value-->
<td>{{result.question}}</td> <!-- Does not get any value-->
</tr>
</table>
<h1>{{result}}</h1> <!-- gets all the json data -->
</div>
</body>
</html>
js
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope, $http) {
$http.get("http://localhost:8080/quiz/webapi/quiz")
.then(function(response) {
$scope.result = response.data;
});
});
Your ng-repeat is not good,
If i understand your array of results is in $scope.result, so you have to do this kind of ng-repeat :
<tr ng-repeat="row in result">
<td>{{row.id}}</td>
<td>{{row.question}}</td>
</tr>
I have a table with columns and rows and cells have an onclick handler.
<tr name="row1">
<td name="col1" onclick="f1(this)">
<td name="col2" onclick="f1(this)">
<td name="col3" onclick="f1(this)">
</tr>
The function f1 marks the cells as selected by the user. This has all worked as expected. I am trying to add the functionality that if a user has saved selections and then returns to the form, I can pre-select the correct cells saved by the user. So I wrote this function that I can call with values of row and col from the database.
function f2 (row, col) {
f1( $( 'tr[name=row'+row+']' ).find( 'td[name=col'+col+']' ) );
}
Only thing is, it doesn't work. If I construct the complete string, e.g.,
f1( $( 'tr[name=row1]' ).find( 'td[name=col2]' )[0])
then it works just fine. But it doesn't work in the page, and i'm guessing it has to do with incorrect quoting of the parameters, but I can't figure out how to correctly proceed. How do I construct programmatic calls to f1 ?
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
<script>
function f2 (self) {
var col = self.attributes["name"].value;
var row = self.parentNode.attributes["name"].value;
alert(row + " " + col);
// do what you want
}
</script>
</head>
<body>
<table>
<tr name="row1">
<td name="col1" onclick="f2(this);">test1</td>
<td name="col2" onclick="f2(this);">test2</td>
<td name="col3" onclick="f2(this);">test3</td>
</tr>
</table>
</body>
</html>
I am very new to angular JS and zurb,I have a controller which displays remote json data located in http://jsonplaceholder.typicode.com/users, but I want to display the response of the controller in form of tables using zurb.When a user clicks on a row, a reveal modal should pop up and show the specific user’s full details including: address, phone number can someone help me how to do this the code below is my angular controller which I have used, my controller just displays the data but I want to display in form tables using zurb tables and grids.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="usersController">
<ul>
<li ng-repeat="x in names">
{{ x.id + ', ' + x.name + ', '+ x.username + ', '+ x.email}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('usersController', function($scope, $http) {
$http.get(" http://jsonplaceholder.typicode.com/users")
.success(function (data) {$scope.names = data;});
});
</script>
</body>
</html>
As I understand from their website, Zurb table is nothing but with some stylish look and feel, you can use it like this:
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th >User Name </th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td ng-bind="x.id"></td>
<td ng-bind="x.name"></td>
<td ng-bind="x.username"></td>
<td ng-bind="x.email"></td>
</tr>
</tbody>
</table>
How to set values for the below div block (setting values in '?' placeholder).
<table>
<tr>
<td class="tfArrive " valign="top">
<div class="tfArrAp" id="txt3">
? </div>
</td> </tr>
</table>
I have tried with following scenario, but not working
<script type="text/javascript">
document.getElementById('txt3').innerHTML = "TEST";
</script>
Your script is working perfectly, it's just that you need to be sure that you are placing the script after the HTML is rendered, so first you need to print the tables out and than use the script tag, because if you place the script before the id="txt3" has rendered, it won't change anything as onload the script didn't find any, so this should be the order...
<table>
<tr>
<td class="tfArrive " valign="top">
<div class="tfArrAp" id="txt3">
?
</div>
</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById('txt3').innerHTML = "TEST";
</script>
Side Note : If you are using HTML5, you don't need
type="text/javascript" anymore, as now, default is JavaScript
$(document).ready(function(){
$('#txt3').html("New Text");
});
Be sure your page is loaded before you manipulate it:
<script type="text/javascript">
window.onload = function() {
document.getElementById('txt3').innerHTML = "TEST";
}
</script>
I'm trying to get a specific value from a table cell and pass is to a controller. But it doesn't seem to be working. I show you some of my codes:
This is in the controller:
def searchUser = {
String abc = request.getParameter("harrow")
println(abc)
}
This is in the html page:
<form>
<div style="height: 250px; overflow: scroll; width: 100%;">
<table id="normal">
<g:each in = "${result}">
<tr id="btn">
<td width=10% >${it.ID}</td>
<td width=25% id="harrow">${it.username}</td>
</tr>
</g:each>
</table>
</div>
<input type ="submit" name ="abc" id="opener">
</form>
EDIT
AJAX:
$("#edittable").on('click', function() {
$.ajax({
url: URL,
data: $(this).serialize(),
type: "POST",
success: function(html){
//do something with the `html` returned from the server here
$("#edit1").html(html).dialog("open")
},
error: function(jqXHR, textStatus, errorThrown){
alert('error: ' + textStatus + ': ' + errorThrown);
}
});
return false;//suppress natural form selection
});
I can get the value to pass to the controller, but right now it only retrieves the first row of values rather than the other. Is there something wrong with my AJAX codes? Thank you guys so much.
So to show details of the row, one of the approaches can be:
CONTROLLER METHODS
def rows = [
[id:1, name:'name1'],
[id:2, name:'name2'],
[id:3, name:'name3']
]
def show(){
[results:rows]
}
def showLine(Long id){
render rows.find {it.id == id }
}
VIEW
<html>
<head>
<g:javascript library="jquery" />
<r:layoutResources />
</head>
<body>
<table>
<thead>
<tr>
<th>Action</th>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<g:each in="${results}" status="i" var="r">
<tr>
<td><g:remoteLink value="Details" id="${r.id}" action="showLine" update="lineDetails">Details</g:remoteLink></td>
<td>${r.id}</td>
<td>${r.name}</td>
</tr>
</g:each>
</tbody>
</table>
<div id="lineDetails">
</div>
</body>
</html>
Basically you call showLine method using AJAX and passing row object id. Then you search for the object and render it back. Rendered data is put into div under the table. It's up to you if you use onclick, button or link in the table. It's also up to you how to show details on results page - use jquery dialog, or something else. Hope it helps