Currently, I am developing a site that guides coin market arbitrage information.
I wonder if the way below is possible in JavaScript.(not React)
backend - django
def index(request):
data = [{"name": "BTC", "binance": "price1", "gecko": "price2", "ftx": "price3"},
{"name": "ETH", "binance": "price1", "gecko": "price2", "ftx": "price3"}]
return render(request, 'index.html', context={'data': data})
html -
<table class="table table-striped mb-0 fixed">
<thead>
<tr>
<th>name</th>
<th>binance</th>
<th>gecko</th>
<th>ftx</th>
</tr>
</thead>
<tbody>
{% for d in data %}
<tr>
<td>{{ d.name }}</td>
<td>{{ d.binance }}</td>
<td>{{ d.ftx }}</td>
<td>{{ d.okx }}</td>
</tr>
{% endfor %}
</tbody>
</table>
JS -
var socket = new WebSocket(
'ws://' + window.location.host +
'/ws?session_key=${sessionKey}')
socket.onmessage = function (e) {
let positions_data = JSON.parse(e.data)
//if positions_data {"site": "binance", "price": "27000", "name": "BTC"}
//update data ->
data = [{"name": "BTC", "binance": "27000", "gecko": "price2", "ftx": "price3"},
{"name": "ETH", "binance": "price1", "gecko": "price2", "ftx": "price3"}]
//do something?
//then change html value
}
Is it possible to change the html value just by changing the variable in JS
Or is it possible to take additional code? Or is there another way?
Change your HTML so that the rows have a unique ID based on the coin name, and the columns have classes that indicate their roles.
<table class="table table-striped mb-0 fixed">
<thead>
<tr>
<th>name</th>
<th>binance</th>
<th>gecko</th>
<th>ftx</th>
</tr>
</thead>
<tbody>
{% for d in data %}
<tr id="row-{{d.name}}">
<td class="name">{{ d.name }}</td>
<td class="binance">{{ d.binance }}</td>
<td class="ftx">{{ d.ftx }}</td>
<td class="okx">{{ d.okx }}</td>
</tr>
{% endfor %}
</tbody>
</table>
Then you can find the row that corresponds to positions_data and update it:
let row = document.querySelector(`#row-${positions_data.name}`);
let site = positions_data.site;
row.querySelector(`.${site}`).innerText = positions_data.price;
Related
I have a list of values [1, paracetamol,[{1, location, quantity}, {2, location2, quantity}]
so I have to print in two rows
1. [1, paracetamol, location, quantity]
2. [2. paracetamol, location1, quantity2]
I have maintained head
headElements = ['Drug ID', 'Drug Name', 'Location', 'Quantity']
<table class="table table-striped" >
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{ head }}</th>
</tr>
</thead>
<tbody>
<div *ngFor = "let drugDetail of drugList">
<tr *ngFor="let loc of drugDetail.drugLocationList">
<th scope="row">{{ drugDetail.drugId }}</th>
<td>{{ drugDetail.drugName }}</td>
<td>{{loc.location}}</td>
<td>{{ loc.quantity}}</td>
</tr>
</div>
</table>
output:
['Drug ID', 'Drug Name', 'Location', 'Quantity']
[1, paracetamol, location, quantity]
[2. paracetamol, location1, quantity2]
Maybe it could be easier if you do first a map to your array data, something like this:
copyDrugList = drugList.map(drugDetail => [
{ drugId : drugDetail.drugLocationList[0].drugId ,
drugName : drugDetail.drugName ,
location : drugDetail.drugLocationList[0].location ,
quantity : drugDetail.drugLocationList[0].quantity ,
},
{ drugId : drugDetail.drugLocationList[0].drugId ,
drugName : drugDetail.drugName ,
location : drugDetail.drugLocationList[1].location ,
quantity : drugDetail.drugLocationList[1].quantity ,
},
]);
Then, you only need to do a classic Angular HTML ngFor:
<tr *ngFor = "let drugDetail of copyDrugList ">
<td>{{ drugDetail.drugId }}</td>
<td>{{ drugDetail.drugName }}</td>
<td>{{ drugDetail.location }}</td>
<td>{{ drugDetail.quantity }}</td>
</tr>
I have an array of JSON data like :
loggers = [{
"allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
"level": "WARN",
"logger": "com.test1",
"status": "success"
},
{
"allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
"level": "WARN",
"logger": "com.test2",
"status": "success"
}
]
I am using dropdown inside a table column and for that using below code, and basically traversing Loggers array but not able to extract allAvailableLevel data.
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Class</th>
<th>Current Level</th>
<th>All Available Levels</th>
<!-- Only display "Action" header if level is changed-->
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr v-for="(logger, index) in loggers" :key="logger">
<td>{{ index + 1 }}</td>
<td>{{ logger.logger }}</td>
<td>{{ logger.level }}</td>
<td>
<b-dropdown
boundary="viewport"
id="dropdown-dropup"
size="sm"
:text="selectedLevelText"
split
class="m-2"
>
<b-dropdown-item-button
v-for="logger in loggers[0].allLevel"
:key="logger"
#click.prevent="changeLevel(level)"
>{{ logger }}</b-dropdown-item-button
>
</b-dropdown>
</td>
<td v-if="levelChanged">
<b-button
size="sm"
variant="secondary "
#click.prevent="updateLevel(selectedLevelText)"
>Update</b-button
>
</td>
</tr>
</tbody>
</table>
with above code my dropdown looks like :
I want to display it like this :
How do I traverse my data inside the vue template to get only the data of "allAvailableLevel"?
You should iterate over that nested array as follows :
<b-dropdown-item-button
v-for="level in logger.allAvailableLevel"
:key="level"
#click.prevent="changeLevel(level)"
>{{ level }}</b-dropdown-item-button
>
Do this:
<tr v-for="(logger, index) in loggers" :key="logger">
<td>{{ index + 1 }}</td>
...
<td>
<b-dropdown
boundary="viewport"
id="dropdown-dropup"
size="sm"
:text="selectedLevelText"
split
class="m-2"
>
<b-dropdown-item-button
v-for="level in logger.allAvailableLevel"
:key="level"
#click.stop="changeLevel(level)"
>{{ logger }}</b-dropdown-item-button
>
</b-dropdown>
</td>
</tr>
I have a table like this that displays data including several navigation properties :
<table class="table afcstandings">
<thead>
<tr>
<th>team</th>
<th>coach</th>
<th>w</th>
<th>l</th>
<th>t</th>
<th>fa</th>
<th>agst</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let standing of standingsAFCEast">
<!-- property binding rather than interpolation-->
<td>{{ standing.team.teamName }}</td>
<td>{{ standing.team.coach.coachName }}</td>
<td>{{ standing.won }}</td>
<td>{{ standing.lost }}</td>
<td>{{ standing.tied }}</td>
<td>{{ standing.pointsFor }}</td>
<td>{{ standing.pointsAgainst }}</td>
<td>{{ standing.pointsDifference }}</td>
</tr>
</tbody>
</table>
Here is the data structure that is being read :
[{"team":{"teamId":22,"teamName":"Carolina Panthers","coach":{"coachId":61,"coachName":"J Smith"},"division":{"divisionId":2,"divisionName":"NFC West"},"headerImage":"","logoImage":"","hex":"","r":null,"g":null,"b":null},"won":2,"lost":1,"tied":0,"pointsFor":82,"pointsAgainst":62,"pointsDifference":20}]
My question is, how do I display this data using ngx-datatable? I have tested with 3 fields, teamName, coachName and won, and am able to display the won field, but not the others, as I am not sure how to drill down into the team object or the coach object.
<ngx-datatable class="ngx-datatable" [rows]="standingsAFCEast">
<ngx-datatable-column name="team.teamName" [width]="300"></ngx-datatable-column>
<ngx-datatable-column name="team.coach.coachName"></ngx-datatable-column>
<ngx-datatable-column name="won"></ngx-datatable-column>
</ngx-datatable>
Any advice would be really appreciated!
After looking at the basic examples, I made this work (Plunker here):
#Component({
selector: 'my-app',
template: `
<div>
<ngx-datatable
[rows]="rows"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[reorderable]="reorderable">
</ngx-datatable>
</div>
`
})
export class AppComponent {
standingsAFCEast = [{
"team":{
"teamId":22,
"teamName":"Carolina Panthers",
"coach":{
"coachId":61,
"coachName":"J Smith"
},
"division":{
"divisionId":2,
"divisionName":"NFC West"
},
"headerImage":"",
"logoImage":"",
"hex":"",
"r":null,
"g":null,
"b":null
},
"won":2,
"lost":1,
"tied":0,
"pointsFor":82,
"pointsAgainst":62,
"pointsDifference":20
}]
get rows () {
return this.standingsAFCEast.map(standing => ({
team: standing.team.teamName,
coach: standing.team.coach.coachName,
w: standing.won,
l: standing.lost,
t: standing.tied,
fa: standing.pointsFor,
agst: standing.pointsAgainst,
diff: standing.pointsDifference
}))
}
// columns = [{name:'team'}, {name:'coach'}, {name:'w'}, {name:'l'}, {name:'t'}, {name:'fa'}, {name:'agst'}, {name:'diff'}]
columns = Object.keys(this.rows[0]).map(val => ({name: val}))
}
Let me know if this helps!
I'm new to AngularJS, I'm using the version 1.6 and I'm getting my info from my database, it is working but when I want to access to the JSON info is not displaying data.
This is my code
<div class="row m-t-50">
{{ autos |json }}
<div class="col-md-12">
<table class="table table-striped">
<thead>
<tr>
<th>Marca</th>
<th>Modelo</th>
<th>Color</th>
<th>Año</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="auto in autos">
<td>{{ auto.marca }}</td>
<td>{{ auto.modelo }}</td>
<td>{{ auto.color }}</td>
<td>{{ auto.anio }}</td>
<td>{{ auto.precio }}</td>
</tr>
</tbody>
</table>
</div>
</div>
{{ autos | json }} shows this:
{
"data": [{
"id": "1",
"marca": "TOYOTA",
"modelo": "VC2017",
"color": "Verde",
"anio": "2017",
"precio": "250345"
}, {
"id": "2",
"marca": "NISSAN",
"modelo": "NS2017",
"color": "Azul",
"anio": "2016",
"precio": "540000"
}],
"status": 200,
"config": {
"method": "GET",
"transformRequest": [null],
"transformResponse": [null],
"jsonpCallbackParam": "callback",
"url": "php/obtener-autos.php",
"headers": {
"Accept": "application/json, text/plain, */*"
}
},
"statusText": "OK"
}
But the table is just blank, what I am doing wrong?
The ng-repeat is used on <tr ng-repeat="auto in autos">. From the given data, the repeat should be applied on autos.data array.
Use
<tr ng-repeat="auto in autos.data">
OR
In controller, assign the data from response to the autos variable.
$scope.autos = response.data;
And use this in view as it is
<tr ng-repeat="auto in autos">
The autos is the response of an $http request. The response contains data property to access the actual response sent from the server. To access response data use response.data.
Other properties are status – status, headers, config and statusText.
You should use autos.data,
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.autos ={"data": [ { "id": "1", "marca": "TOYOTA", "modelo": "VC2017", "color": "Verde", "anio": "2017", "precio": "250345" }, { "id": "2", "marca": "NISSAN", "modelo": "NS2017", "color": "Azul", "anio": "2016", "precio": "540000" } ], "status": 200, "config": { "method": "GET", "transformRequest": [ null ], "transformResponse": [ null ], "jsonpCallbackParam": "callback", "url": "php/obtener-autos.php", "headers": { "Accept": "application/json, text/plain, */*" } }, "statusText": "OK" };
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<div class="row m-t-50">
{{ autos |json }}
<div class="col-md-12">
<table class="table table-striped">
<thead>
<tr>
<th>Marca</th>
<th>Modelo</th>
<th>Color</th>
<th>Año</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="auto in autos.data">
<td>{{ auto.marca }}</td>
<td>{{ auto.modelo }}</td>
<td>{{ auto.color }}</td>
<td>{{ auto.anio }}</td>
<td>{{ auto.precio }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<body ng-controller="MyCtrl">
<div>
<div ng-repeat="d in data"> {{ d.marca }}</div>
</div>
</body>
Working plnkr here Plunker
in Angular version 1.6.1 use this example
your html
<table class="table table-striped">
<thead>
<tr>
<th>Marca</th>
<th>Modelo</th>
<th>Color</th>
<th>Año</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="auto in autos">
<td>{{ auto.marca }}</td>
<td>{{ auto.modelo }}</td>
<td>{{ auto.color }}</td>
<td>{{ auto.anio }}</td>
<td>{{ auto.precio }}</td>
</tr>
</tbody>
</table>
your code
$http.get("your url").then(function (response) {
$scope.cars= JSON.parse(response.data);
});
Do not forget to insert this line JSON.parse(response.data)
the version 1.6.1 require.
I have select dropdown:
<select class="chooseWatchlist" [(ngModel)]="selectedWatchlist">
<option *ngFor="let item of items" value="">{{ item.name }}</option>
</select>
It looks like:
items is just a json file:
[
{
"id": 2,
"xid": "WL_621542",
"userId": 1,
"name": "pierwsza",
"pointList": [],
"watchListUsers": []
},
{
"id": 3,
"xid": "WL_616873",
"userId": 1,
"name": "druga",
"pointList": [],
"watchListUsers": []
}
]
I just want the data to change when u click on different options in select.
The data table:
<table>
<tr [selectedWatchlist]>
<td>{{ item.name }}</td>
<td>{{ item.xid }}</td>
<td>{{ item.userId }}</td>
</tr>
</table>
Any help highly appreciated.
Did you try to use ngModel?
Try
<select class="chooseWatchlist" [(ngModel)]="selectedWatchlist">
And then
<table> <tr> <td>{{ selectedWatchList.name }}</td> <td>{{ selectedWatchList.xid }}</td> <td>{{ selectedWatchList.userId }}</td> </tr> </table>