I have a JSON which has the property prizes which in some cases is like this:
"prize" : {
"Firstyear" : {
"first" : 3000,
"second" : 2000,
"total" : 5000
},
"Secondyear" : {
"first" : 3000,
"second" : 2000,
"total" : 5000
},
"Thirdyear" : {
"first" : 3000,
"second" : 2000,
"total" : 5000
},
"total" : 15000
},
but in some cases, it's like this:
"prize" : {
"first" : 4000,
"second" : 3000,
"third" : 2000,
"total" : 9000
},
How do I ng-repeat over these?
You cannot do ng-repeat over Object unless you want to get the key and value of an object. I guess you need the following.
DEMO
var uniqcApp = angular.module('uniqueApp',[]);
uniqcApp.controller('testController', function ($scope){
$scope.data = {"prize" : {
"first" : 4000,
"second" : 3000,
"third" : 2000,
"total" : 9000
}};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="uniqueApp">
<div class="row" ng-controller="testController">
<table>
<tr ng-repeat="(key, value) in data.prize">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
</table>
</div>
</body>
Related
I have been searching for hours how I can translate the values of an object array with the module ngx-translate,
Here is an extract of my code but I don’t know how to implement the json file
Template HTML :
<div class="sort-header-container">
<table matSort class="mat-sort">
<tr *ngFor="let item of items" class="row">
<td class="row">{{item.critere}}</td>
<td>{{item.res}}</td>
</tr>
</table>
</div>
The object array in the service :
items: any[] = [
{ critere: "Code-modèle", res: "Mizuno Shadow 4" },
{ critere: "Code Libellé", res: "KR32" },
{ critere: "Stock", res: 10 },
{ critere: "Prix TTC", res: "Bleu" },
{ critere: "Couleur", res: 42 },
{ critere: "Matière", res: 125 },
{ critere: "Zone", res: 100 },
];
I need to translate only the critere column
Thank you
You need to use the TranslatePipe from ngx-translate.
<div class="sort-header-container">
<table matSort class="mat-sort">
<tr *ngFor="let item of items" class="row">
<td class="row">{{item.critere | translate}}</td>
<td>{{item.res}}</td>
</tr>
</table>
</div>
Make sure your critere field have the corresponding translations in the json translation files
example for en english translation:
{
"Prix TTC": "Price",
"Couleur": "Color",
}
As taken from the example in ngx-translate github
You can use the translate pipe in your code, like this:
<td class="row">{{ item.critere | translate }}</td>
For this to work, your critere would need to be keys in your language file, for example:
{
'Stock': 'Stock english translation',
'Couleur': 'Is this color?'
}
Thank you very much for your answers
Finally here's what I did :
<tr *ngFor="let item_translate of ('PRODUCT.PRODUCT' | translate); let i = index " class="row"
[ngStyle]="item_translate.critere == 'Stock' && stock<0 ?{color:'red'}:{color:'#474646'}">
<td class="row">{{item_translate.critere}}</td>
<td>{{items[i].res}}</td>
</tr>
In my json example fr :
"PRODUCT": {
"PRODUCT": [
{
"critere": "Code-modèle"
},
{
"critere": "Code Libellé"
},
{
"critere": "Stock"
},
{
"critere": "Prix TTC"
},
{
"critere": "Couleur"
},
{
"critere": "Matière"
},
{
"critere": "Zone"
}
]
}
I want to get my ng-repeat to be ordered by rank, how would I write the expression?
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="(key, value) in cars | orderBy: cars[key].rank ">
{{cars[key].longName}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
$scope.cars = {
"BTC" : {
"longName" : "Bitcoin",
"rank" : 1
},
"BCH" : {
"longName" : "Bitcoin Cash",
"rank" : 3
},
"ETH" : {
"longName" : "Ethereum",
"rank" : 2
},
"ETC" : {
"longName" : "Ethereum Classic",
"rank" : 15
},
"IOTA" : {
"longName" : "IOTA",
"rank" : 4
},
"XRP" : {
"longName" : "Ripple",
"rank" : 6
},
"XVG" : {
"longName" : "Verge",
"rank" : 5
}
};
});
</script>
Order by can only be applied to arrays and not objects. You must convert your object to an array or create your own filter : https://justinklemm.com/angularjs-filter-ordering-objects-ngrepeat/
I have a problem whit my filter
I want filter using my input text and dropdown , I try explain my problem and
I hope you can help me.. I want to search about my selection in my dropdown and my input text for example i want to search nota=20
thank you.
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/
angular.min.js"></script>
<script type="text/javascript" src="appangular.js"></script>
<title>HOME</title>
</head>
<body>
<h1>Alumnos</h1>
<input type="text" ng-model="buscaralumno" >
<select name="seleccion" id="seleccion" ng-model="parametro">
<option id="Nota" value="Nota">Nota</option>
<option id="Codigo" value="Codigo">Codigo</option>
</select>
<table ng-controller="datoscontroller">
<thead>
<tr>
<th>ID</th>
<th>CODIGO</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Nota</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Alumno in lsalumnos.ALUMNOS | filter:{Nota:buscaralumno}">
<td>{{Alumno.Id}}</td>
<td>{{Alumno.Codigo}}</td>
<td>{{Alumno.Nombre}}</td>
<td>{{Alumno.Apellido}}</td>
<td>{{Alumno.Nota}}</td>
</tr>
</tbody>
</table>
</body>
</html>
var app = angular.module("myapp",[]);
app.controller("datoscontroller",function($scope,$http){
$scope.importar = function(){
$http.get('Datos.json').success(function(Datos){
$scope.lsalumnos = Datos;
}
);
}
$scope.importar();
}
);
{
"ALUMNOS":
[
{
"Id" : "101",
"Codigo" : "1292920",
"Nombre" : "Marco ",
"Apellido" : "Lopez",
"Nota" : "20"
},
{
"Id" : "102",
"Codigo" : "1293231",
"Nombre" : "Renzo",
"Apellido" : "Chumpitaz",
"Nota" : "20"
},
{
"Id" : "103",
"Codigo" : "1029193",
"Nombre" : "Cristiano",
"Apellido" : "Ronaldo",
"Nota" : "19"
},
{
"Id" : "104",
"Codigo" : "1231232",
"Nombre" : "Paolo",
"Apellido" : "Guerrero",
"Nota" : "15"
},
{
"Id" : "105",
"Codigo" : "1111232",
"Nombre" : "Roberto",
"Apellido" : "Palacios",
"Nota" : "10"
},
{
"Id" : "106",
"Codigo" : "1123255",
"Nombre" : "Adriano",
"Apellido" : "kaka",
"Nota" : "19"
},
{
"Id" : "107",
"Codigo" : "1244232",
"Nombre" : "Manuel",
"Apellido" : "miranda",
"Nota" : "20"
},
{
"Id" : "108",
"Codigo" : "10120201",
"Nombre" : "Tania ",
"Apellido" : "renlo",
"Nota" : "14"
},
{
"Id" : "109",
"Codigo" : "1123920",
"Nombre" : "Mario ",
"Apellido" : "Lorez",
"Nota" : "14"
},
{
"Id" : "110",
"Codigo" : "13939239",
"Nombre" : "Luis ",
"Apellido" : "Perez",
"Nota" : "12"
}
]
}
If I understand that you want the dropdown to select which property to filter (Nota or Codigo), you will need to use a custom filtering function.
Something like:
$scope.parametroFilter = function(input){
return (input[$scope.parametro].indexOf($scope.buscaralumno) != -1);
};
and use like:
<tr ng-repeat="Alumno in lsalumnos.ALUMNOS | filter:parametroFilter">
Alternatively, you could use a function to return a dynamic filter object:
$scope.getParametroFilter = function(){
var filter = {};
filter[$scope.parametro] = $scope.buscaralumno;
return filter;
};
and use like:
<tr ng-repeat="Alumno in lsalumnos.ALUMNOS | filter:getParametroFilter()">
The BSON data list contains very unneeded values as shown below. The problem am I having is returning an array subset from Mongo so that I could display it in a template using Meteor.
Mongo stores the data as such:
meteor:PRIMARY> db.ga_spreadsheet.find().pretty()
{
"_id" : "7YLifh9C6Gp8HPCTm",
"spreadsheet" : "NBATEST",
"header" : null,
"cells" : {
"1" : {
"1" : {
"row" : "1",
"col" : "1",
"value" : "name"
},
"2" : {
"row" : "1",
"col" : "2",
"value" : "position"
},
"3" : {
"row" : "1",
"col" : "3",
"value" : "salary"
& client/view.js does the pull request
GASpreadsheet = new Mongo.Collection('GASpreadsheet');
if (Meteor.isClient) {
Meteor.call("spreadsheet/fetch","1kdRtyhrvXN1aEf35NwtA8pzHfjc9-lNwV76CE_Zr_g");
spreadsheetData = GASpreadsheet.findOne({spreadsheet: 'NBATEST'})
Template.nba.helpers({
'player': function(){
var currentUserId = Meteor.userId();
return GASpreadsheet.find({ createdBy: currentUserId },
{ sort: {score: -1, name: 1} });
},
cellState: function(x, y) {
if(screenArray[x][y] === 1){
return 'live';
}
else {
return 'dead';
}
},
'selectedClass': function(){
var playerId = this._id;
var selectedPlayer = Session.get('selectedPlayer');
if(playerId == selectedPlayer){
return "selected"
}
},
'selectedPlayer': function(){
var selectedPlayer = Session.get('selectedPlayer');
return GASpreadsheet.findOne({ _id: selectedPlayer });
}
});
}
view/main.html
<template name="nba">
<div class="gridWrapper">
{{#each row in rows}}
<div class="row">
{{#let rowIndex=#index}}
{{#each cell in row}}
<div class="cell {{cellState rowIndex #index}}">{{this}}</div>
{{/each}}
{{/let}}
</div>
{{/each}}
</div>
</template>
I have just started using Angular for my project. The task at hand, is I need to generate a table from JSON. I was able to do this by hardcoding everything, but the project changed in a way that now I am required to use JSON. I would like to use ng-repeat. My data structure is an array of objects with nested objects that represent the business and the hours. I am getting weird behavior and I'm wondering if it is my data structure causing it.
I created a fiddle. Any advice would be greatly appreciated.
My data structure looks like this:
var dept = {
sales : { startTime : "", endTime : "" },
service : { startTime : "", endTime : "" },
accounting : { startTime : "", endTime : "" },
parts : { startTime : "", endTime : "" },
bodyShop : { startTime : "", endTime : "" },
other : { startTime : "", endTime : "" },
};
The objects are nested inside an array and each index represents a day of the week. For example, index 1 would be Monday.
<tr ng-repeat="hours in businessHours">
<td>Monday</td>
<td>{{hours[0].startTime}}</td>
<td>{{hours[0].endTime}}</td>
<td>{{hours[0].startTime}}</td>
<td>{{hours[0].endTime}}</td>
<td>{{hours[0].startTime}}</td>
<td>{{hours[0].endTime}}</td>
</tr>
I created a fiddle to give a better picture
`http://jsfiddle.net/yu216x5w/4/`
You can try something like this:
var hours = [
{
"name" : "Monday",
"hours": {
"sales" : { startTime : "5", endTime : "6" },
"service" : { startTime : "2", endTime : "3" },
"accounting" : { startTime : "4", endTime : "6" },
"parts" : { startTime : "10", endTime : "11" },
"bodyShop" : { startTime : "3", endTime : "8" },
"other" : { startTime : "a", endTime : "b" }
}
},
{
"name" : "Tuesday",
"hours": {
"sales" : { startTime : "5", endTime : "6" },
"service" : { startTime : "2", endTime : "3" },
"accounting" : { startTime : "4", endTime : "6" },
"parts" : { startTime : "10", endTime : "11"},
"bodyShop" : { startTime : "3", endTime : "8" },
"other" : { startTime : "a", endTime : "b" }
}
}
];
var mockDataForThisTest = "json=" + encodeURI(JSON.stringify(hours));
var app = angular.module('myApp', []);
function businessHours($scope, $http) {
$scope.schedule = [];
$scope.loadHours = function() {
var httpRequest = $http({
method: 'POST',
url: '/echo/json/',
data: mockDataForThisTest
}).success(function(data, status) {
console.log(data);
$scope.schedule = data;
});
};
}
with:
<div ng-app="myApp">
<div ng-controller="businessHours">
<p> Click <a ng-click="loadHours()">here</a> to load data.</p>
<table>
<tr>
<th></th>
<th style="vertical-align:top" scope="col" colspan="2">Sales</th>
<th style="vertical-align:top" scope="col" colspan="2" >Service</th>
<th style="vertical-align:top" scope="col" colspan="2">Parts</th>
<th style="vertical-align:top" scope="col" colspan="2">Accounting</th>
<th style="vertical-align:top" scope="col" colspan="2">Body Shop</th>
<th style="vertical-align:top" scope="col" colspan="2" >Other</th>
</tr>
<tr ng-repeat="day in schedule">
<td>{{day.name}}</td>
<td>{{day.hours.sales.startTime}} - {{day.hours.sales.endTime}}</td>
<td>{{day.hours.service.startTime}} - {{day.hours.service.endTime}}</td>
<td>{{day.hours.accounting.startTime}} - {{day.hours.accounting.endTime}}</td>
<td>{{day.hours.parts.startTime}} - {{day.hours.parts.endTime}}</td>
<td>{{day.hours.bodyShop.startTime}} - {{day.hours.bodyShop.endTime}}</td>
<td>{{day.hours.other.startTime}} - {{day.hours.other.endTime}}</td>
</tr>
</table>
</div>
http://jsfiddle.net/yu216x5w/7/