I have the following json data saved in json column in postgres database
{
"runway": [
{"number":"13R/13L", "length":"14511", "lengthuom":"ft"},
{"number":"10R/15L", "length":"98641", "lengthuom":"ft"},
{"number":"16R/22L", "length":"65410", "lengthuom":"ft"}
]
}
I'm tryig to get it by ng-repeat but I don't know how.
I try with the following code
<tr ng-repeat="ass in assetb track by $index">
<td>{{ass.runway.number}}</td>
</tr>
Can anyone help me please to display this data in table?
Check out this may help you :--
function MyController($scope){
var data = {"runway":[ {"number":"13R/13L", "length":"14511", "lengthuom":"ft"},
{"number":"10R/15L", "length":"98641", "lengthuom":"ft"},
{"number":"16R/22L", "length":"65410", "lengthuom":"ft"} ]}
$scope.list = data.runway;
}
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<p ng-repeat="l in list track by $index">{{l.number}}</p>
</div>
</body>
</html>
Remove the line track by $index and use like
<tr ng-repeat="ass in assetb.runway">
<td>{{ass.number}}</td>
</tr>
Fiddle
Get your data from database and store it in $scope variable. Something like:
$scope.assetb = {
"runway": [
{"number":"13R/13L", "length":"14511", "lengthuom":"ft"},
{"number":"10R/15L", "length":"98641", "lengthuom":"ft"},
{"number":"16R/22L", "length":"65410", "lengthuom":"ft"}
]
};
And since ng-repeat requires an array, modify your HTML something like this:
<tr ng-repeat="ass in assetb.runway track by $index">
<td>{{ass.number}}</td>
</tr>
Related
I have two json file I want to generate a dynamic table using anything like angularjs/jquery. I tried angularjs ng-repeat but not succeed.
first JSON
$scope.myHospital = [
{"name":"hos1"},
{"name":"hos2"},
{"name":"hos3"},
{"name":"hos4"},
{"name":"hos5"}
];
Second JSON
$scope.data = [{
"category":"first category",
"procedure":[{
"name":"pro1",
"hospital": [
{"price":"344"},
{"price":"467"},
{"price":"423"},
{"price":"674"},
{"price":"313"}
]
}, {
"name":"pro2",
"hospital": [
{"price":"234"},
{"price":"568"},
{"price":"136"},
{"price":"567"},
{"price":"666"}
]
}, {
"name":"pro3",
"hospital": [
{"price":"349"},
{"price":"469"},
{"price":"429"},
{"price":"679"},
{"price":"319"}
]
}]
}];
And I want a table like this. Is it possible then please provide me a solution or if not then what changes required in my JSON to achieve this.Thanks
You can have nested ng-repeat in order to achieve this. Assuming first hospital price maps to hos1, you can do something like this,
<table>
<tr ng-repeat="(hosIndex, hos) in myHospital">
<td width="100px" ng-bind="hos.name"></td>
<td width="100px" ng-repeat="pro in data[0].procedure"
ng-bind="pro.hospital[hosIndex].price">
</td>
</tr>
</table>
DEMO
I have json data in controller as response. I have to print that data in html.
for that I have done as below:
In my controller
.controller('DataImportControl', ['$scope','$http', '$location', '$rootScope' , function($scope, $http, $location, $rootScope) {
console.log(" In dataimportCtrl");
$scope.readCustomer = function(){
console.log("in read customer");
$http.post('/custimport').success(function(response) {
console.log("in controller");
console.log("controller:"+response);
$scope.data=response;
}).error(function(response) {
console.error("error in posting");
});
};
}])
My html code:
<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="DataImportControl">
<form ng-submit="readCustomer()">
<button type="submit" >Submit</button>
</form>
<table class="table">
<thead>
<tr>
<th>Code exists in customer master</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cust in data ">
<td>{{cust.customer_code}}</td>
</tr>
</tbody>
</table>
</div>
<div >
</div>
</body>
</html>
My json data as response in controller :
{"jarray":[{"customer_name":["Ankita"],"customer_code":["c501"]}]}
My question is how to print json data in html using ng-repeat in my case?
Thanks in advance...
I'm assuming you want to print out the actual object, in that case just do
{{cust | json}}
Wrap it in pre tags to have it prettified.
The data being returned from your service is strangely formatted. I would assume you have multiple records being returned, but you are only showing one in this example.
The record you are showing here is an object, with an array as one of the properties. It is not clear if your object has multiple arrays, or if this array has multiple customer objects embedded in it. However, I worked up a quick plunker showing how to iterate through in both situations.
first, if you intend to iterate through data directly, and data will hold multiple arrays, you would use the (key, value) syntax, since data itself is an object and not an array.
<div ng-repeat="(key, value) in data">
key: {{key}}
<br/>value: {{value}}
<div ng-repeat="customer in value">
Customer name: {{customer.customer_name}}
<br/>Customer code: {{customer.customer_code}}
</div>
</div>
However, if your data is only returning a single object property, jarray, and you will always be iterating through this same property, the outer ng-repeat is unnecessary:
<div ng-repeat="customer in data.jarray">
Customer name: {{customer.customer_name}}
<br/>Customer code: {{customer.customer_code}}
</div>
you may want to clean up your service, either in angular or on your server, and remove jarray all together, if it doesn't hold a specific significance to the data.
http://plnkr.co/edit/Nq5Bo18Pdj4yLQ13hnrJ?p=preview
I need to get nested products from JSON to my html in <div ng-repeat="order in orders"></div> I tried many versions of getting products values(name, description etc.) but none of them works. How to do this ?
JSON:
[
{
"id":3,
"date":"00:00:00",
"user":{
"id":1,
},
"orderState":{
"id":1,
},
"products":[
{
"id":1,
"name":"Bosch POF 1200",
"description":"1200W",
"enabled":true,
"price":459,
},
{
"id":9,
"name":"Graphite 58G782",
"description":"a",
"enabled":true,
"price":429,
}
]
}
]
Controller
OrdersService.retrieveAllByCurrentUser().then(function(response) {
$scope.orders = response.data;
console.log(response.data);
}, function(error) {
registerError(error, 'retrieving all orders');
});
The ng-repeat directive creates a new scope, which means that you should be able to loop through the products within it like this:
<div ng-repeat="order in orders">
<div ng-repeat="product in order.products"> e.g. {{product.name}} </div>
</div>
I would also advise to write a directive for dealing with that kind of stuff, because your code can get unreadable really fast. Don't take my word for it though as I am no Angular expert.
Create a nested ng-repeat like this to access the products information:
<div ng-repeat="order in orders">
<div ng-repeat="product in order.products">
<h1 ng-bind="product.name"></h1>
<p ng-bind="product.description"></p>
</div>
</div>
For each order it will go into order.products and loop out the information as product, then you can access the information in product via dot notation, like product.name for example.
You can do nested ng-repeat in html
<div ng-repeat="order in orders">
<div ng-repeat "product in order.products">
<span>{product.name}}</span>
<span>{{product.description}}</span>
</div>
</div>
I have the following contoller in my app :
angular.module('myApp.controllers', []).
controller('ClientesController', [ '$scope', '$rootScope', 'Clientes',
function($scope, $rootScope, Clientes) {
$rootScope.clientes;
Clientes.query(function(response) {
$rootScope.clientes = response;
})
}]);
Which returns a JSON object with the following format :
[{"idCliente":1,
"nomeFantasia":"Flores",
"razaoSocial":"Transportes Flores Ltda.",
"contatosClientes":
[
{"idContatoCliente":1,
"dddCelular":21,
"email":"ljames#cavaliers.com"},
{"idContatoCliente":2,
"dddCelular":21,
"email":"test#cavaliers.com"}
]
}]
And a template which tries to parse the JSON with ng-repeat :
<tr ng-repeat="cliente in clientes | filter:searchText">
<td>{{cliente.idCliente}}</td>
<td>{{cliente.razaoSocial}}</td>
<td>{{cliente.nomeFantasia}}</td>
<td>{{cliente.contatosClientes.email}}</td>
<td>
<div class="right floated ui green icon buttons">
<div class="ui button">Editar</i></div>
</div>
</td>
</tr>
The problem is that I can access the outer keys (idCliente,razaoSocial, etc) with the object.key sintaxe, but I can't access the inner keys (contatosClientes.email, for example) in the nested array.
I've tried many approaches and I am starting to think that is something wrong with my REST API, but before change all my backend code I would like to know if someone can help me with this issue.
Best regards,
Antonio Belloni
contatosClientes is an array, you'll have to do ng-repeat for that too, for example:
<tr ng-repeat="cliente in clientes | filter:searchText">
<td>{{cliente.idCliente}}</td>
<td>{{cliente.razaoSocial}}</td>
<td>{{cliente.nomeFantasia}}</td>
<td ng-repeat="contato in cliente.contatosClientes>{{contato.email}}</td>
<td>
<div class="right floated ui green icon buttons">
<div class="ui button">Editar</i></div>
</div>
</td>
</tr>
I searching and I found out that this code is what I need right now. But there is something wrong about it. When I clicked the alertme button it's alert is -1 which is wrong. When I click 1 Brick med it's alert -1 it should be 0 because the no and name is in sectionA. When I want t click 3 Frank Joemar Timbang it should alert 1 because he is in sectionB? Aney help? suggestions? TIA
var stud = angular.module("stud", []);
stud.controller("StudentsController", function ($scope) {
'use strict';
$scope.alertMe = function (studentGroup) {
alert($scope.students.indexOf(studentGroup));
};
$scope.sectionA = [
{
no:1,
name:'Brick Med',
},
{
no:2,
name: 'Colin Christopher',
},
];
$scope.sectionB = [
{
no:3,
name: 'Frank Joemar Timbang',
},
{
no:4,
name: 'Curtis Zaymond',
}
];
$scope.students = [
$scope.sectionA,
$scope.sectionB
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="stud">
<head lang="en">
<meta charset="utf-8">
<title>Students</title>
</head>
<body data-ng-controller="StudentsController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>Students</td>
<td>Alert</td>
</tr>
</thead>
<tbody ng-repeat="studentGroup in students">
<tr ng-repeat="student in studentGroup">
<td>{{student.no}} {{student.name}}</td>
<td><button ng-click="alertMe($parent.$index)">Alert me!</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Okay so your problem is that you are using indexOf() when you want to just be using studentGroup as the index.
$scope.alertMe = function (studentGroup) {
alert($scope.students[studentGroup]); // returns object object in your array
alert($scope.students[studentGroup][0]); /// returns sectionA object1
alert($scope.students[studentGroup][0].name); /// returns sectionA object1 name
};
And I fixed up your html so it is easier to read but your original stuff should still work.
<tbody ng-repeat="studentGroup in students" ng-init="studentsIndex = $index">
<tr ng-repeat="student in studentGroup">
<td>{{student.no}} {{student.name}}</td>
<td><button ng-click="alertMe(studentsIndex)">Alert me!</button></td>
</tr>
</tbody>
If this isn't what you want and you really want to alert the index, let me explain how indexOf works. That method will take a search parameter, and that is used to search an array for that element data. It is returning -1 right now because you give it the index and it searches for that index as the element data in index 0 and 1. Steps: Does whatever index = $scope.sectionA , Nope move on, Does whatever index = $scope.sectionB, nope move on. Done, did not find search parameter return -1.
The problem is with the indexOf. studentGroup is set correctly to 0 for the first 2 rows and 1 for the next 2. If you want the section array you should use
$scope.alertMe = function (studentGroup) {
alert($scope.students[studentGroup]);
};