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.
Related
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;
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 select box, that I am filtering table. I want that when I select "All" I will see all the data without filter.
This is the select:
<select ng-options="o.id as o.name for o in cities"
class="form-control"
name="cities"
ng-model="citiesFilter">
<option value="">All</option>
</select>
Here is the full example: JsFiddle
You can use the method shown in the other answer.Or you can achieve the same using ng-options.Add the first option also in the $scope.cities .The set the default model value.
A sample demo
app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.citiesFilter = '';
$scope.cities = [{
"id": '',
"name": "All"
},
{
"id": 1,
"name": "Tel-Aviv"
},
{
"id": 2,
"name": "Haifa"
},
{
"id": 3,
"name": "Eilat"
},
];
$scope.labels = ["fullname",
"id_number",
"phone",
"email",
"city"
];
$scope.customers = [{
"fullname": "Freddie Mercury",
"id_number": "123456789",
"phone": "054874874",
"email": "fred#gmail.com",
"city": "3"
},
{
"fullname": "Jim Morrison",
"id_number": "123456789",
"phone": "054874874",
"email": "jim#gmail.com",
"city": "2"
},
{
"fullname": "David Bowie",
"id_number": "123456789",
"phone": "054874874",
"email": "dave#gmail.com",
"city": "1"
},
{
"fullname": "Prince",
"id_number": "123456789",
"phone": "054874874",
"email": "prince#gmail.com",
"city": "1"
}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<select ng-options="o.id as o.name for o in cities" class="form-control" name="cities" ng-model="citiesFilter">
</select>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th ng-repeat="(key,label) in labels" sortable="key">
{{ label }}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cust in customers | filter : {city:citiesFilter}">
<td>{{ $index +1 }}</td>
<td>{{ cust.fullname }}</td>
<td>{{ cust.id_number }}</td>
<td>{{ cust.phone }}</td>
<td>{{ cust.email }}</td>
<td>{{( cities | filter: {id:cust.city})[0].name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
working code https://jsfiddle.net/dineshu07/uLavay1c/
Use filter : {city:citiesFilter|| undefined} to show all
<tr ng-repeat="cust in customers | filter : {city:citiesFilter|| undefined}" >
<td>{{ $index +1 }}</td>
<td>{{ cust.fullname }}</td>
<td>{{ cust.id_number }}</td>
<td>{{ cust.phone }}</td>
<td>{{ cust.email }}</td>
</tr>
You can write a custom filter function for special handling. This way you have more control and you can add any condition that is required.
JSFiddle
$scope.myFilter = function(city) {
return function(cust) {
return !city || +cust.city === +city
}
}
<tr ng-repeat="cust in customers | filter: myFilter(citiesFilter)">
I have just modified your filter condition to
"ng-repeat="cust in customers | filter :(!!citiesFilter || undefined) && {city:citiesFilter}""
Because,if the filter expression returned undefined, then the filter would not apply
app = angular.module("myApp",[]);
app.controller("myCtrl", function($scope){
$scope.cities = [
{"id":1, "name": "Tel-Aviv"},
{"id":2, "name": "Haifa"},
{"id":3, "name": "Eilat"},
];
$scope.labels = ["fullname",
"id_number",
"phone",
"email",
"city"];
$scope.customers = [
{
"fullname" : "Freddie Mercury",
"id_number" : "123456789",
"phone" : "054874874",
"email" : "fred#gmail.com",
"city" : "3"
},
{
"fullname" : "Jim Morrison",
"id_number" : "123456789",
"phone" : "054874874",
"email" : "jim#gmail.com",
"city" : "2"
},
{
"fullname" : "David Bowie",
"id_number" : "123456789",
"phone" : "054874874",
"email" : "dave#gmail.com",
"city" : "1"
},
{
"fullname" : "Prince",
"id_number" : "123456789",
"phone" : "054874874",
"email" : "prince#gmail.com",
"city" : "1"
}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<select ng-options="o.id as o.name for o in cities"
class="form-control"
name="cities"
ng-model="citiesFilter">
<option value="">All</option>
</select>
<table class="table table-striped table-bordered table-hover" >
<thead>
<tr>
<th>#</th>
<th ng-repeat="(key,label) in labels" sortable="key">
{{ label }}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cust in customers | filter :(!!citiesFilter || undefined) && {city:citiesFilter}" >
<td>{{ $index +1 }}</td>
<td>{{ cust.fullname }}</td>
<td>{{ cust.id_number }}</td>
<td>{{ cust.phone }}</td>
<td>{{ cust.email }}</td>
<td>{{( cities | filter: {id:cust.city})[0].name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
Hope this helps
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>
I've got a json file contains few different dictionaries. It looks like this:
{
"variable_1": {
"1357840800": 74,
"1360519200": 71,
"1362938400": 83,
"1365616800": 74,
"1368208800": 78
},
"name": "TITLE",
"variable_2": {
"1357840800": 25817,
"1360519200": 28585,
"1362938400": 26946,
"1365616800": 30034,
"1368208800": 23316
},
"link": "title.html",
"variable_3": {
"1357840800": 1910483,
"1360519200": 2029593,
"1362938400": 2236587,
"1365616800": 2222556,
"1368208800": 1818661
}
}
I want to put the data from variable_1, variable_2 and variable_3 in different columns of a table. Any variable has the same number of items and the number of them is unknown (it could be 1,2,3,5,8...). The keys are the same in all dictionaries. So new <td> should contains only value from another dictionary.
I wrote the code to iterate through one dictionary but I can't find approach to multiple dictionaries.
That's my code for only one dictionary. How should I modify it to handle a few?
<table class="table ng-cloak" ng-if='isActive' ng-repeat="item in data | filter:isActive">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='(key, val) in item.variable_1'>
<td>{{ $index }}</td>
<td>{{ 1000*key + 1 | date:'MM.yyyy'}}</td>
<td>{{ val | splitdivisions }}</td>
</tr>
</tbody>
</table>
If keys in each directory are related to each other, you can simply
<tr ng-repeat='(key, val) in item.variable_1'>
<td>{{ $index }}</td>
<td>{{ 1000*key + 1 | date:'MM.yyyy'}}</td>
<td>{{ val | splitdivisions }}</td>
<td>{{ item.variable_2[key] }}</td>
<td>{{ item.variable_3[key] }}</td>
You might want to share your filters (I did remove them here):
function MyCtrl($scope) {
$scope.data = {
"variable_1": {
"1357840800": 74,
"1360519200": 71,
"1362938400": 83,
"1365616800": 74,
"1368208800": 78
},
//"name": "TITLE",
"variable_2": {
"1357840800": 25817,
"1360519200": 28585,
"1362938400": 26946,
"1365616800": 30034,
"1368208800": 23316
},
//"link": "title.html",
"variable_3": {
"1357840800": 1910483,
"1360519200": 2029593,
"1362938400": 2236587,
"1365616800": 2222556,
"1368208800": 1818661
}
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="MyCtrl">
<table class="table" ng-repeat="(key, value) in data">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='(k, val) in value'>
<td>{{ $index }}</td>
<td>{{ 1000*k + 1 | date:'MM.yyyy'}}</td>
<td>{{ val }}</td>
</tr>
</tbody>
</table>
</div>
</div>
I did play around a little with that data... and added a custom filter, see jsFiddle