I try to get data from 2 jsons and list it in table :
1st 'names.json':
[
{
"name": "AAAAAA",
"down": "False"
},
{
"name": "BBBBBB",
"down": "45%"
},
{
"name": "CCCCC",
"down": "12%"
}
]
Second 'data.json'
[
{
"data": "25-12-2014"
}
]
Javascript:
app.service('service', function($http, $q){
this.getNames = function () {
var datas = $http.get('data,json', { cache: false});
var names = $http.get('names.json', { cache: false});
return $q.all([datas, names]);
};
});
app.controller('FirstCtrl', function($scope, service) {
var promise = service.getNames();
promise.then(function (data) {
$scope.names = data.names.data;
$scope.datas = data.datas.data;
});
Now i must show it in table HTML :
div ng-controller="FirstCtrl"
<table>
<tbody>
<tr ng-repeat="name in names.concat(datas)">
<td>{{name.name}}</td>
<td>{{name.data}}</td>
</tr>
</tbody>
</table>
</div>
I try concat() but it dont work, is there any method to show in table datas from 2 arrays by ng-repeat?
Thanks for answers in advance!
Related
Here's my code:
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl', ['$scope', MyCtrl]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.names = [
{
"name": "AAAAAA",
"down": "False"
},
{
"name": "BBBBBB",
"down": "45%"
},
{
"name": "CCCCC",
"down": "12%"
}
];
$scope.datas = [
{
"data": "AAAAAA/45%"
}
];
$scope.getTheRightData = data => $scope.datas.map(d=>d.data.split('/')[0]).find(d=>d===data);
}
HTML
<div ng-controller="MyCtrl">
<table>
<tbody>
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.down}}</td>
<td ng-bind="getTheRightData(name.name)"></td>
</tr>
</tbody>
</table>
What i do : one element from $scope.datas will match an element in $scope.names, but it only shows when name.name is the same. I need when name.name and name.down is the same, something like this : <td ng-bind="getTheRightData(name.name,name.down)"></td>, and in controller
$scope.getTheRightData = data => $scope.datas.map(d=>d.data.split('/')[0][1]).find(d=>d===data);
}
, but it dont work.
Thanks for answers and ideas for advance!
I created a sample answer check the below code.
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl', ['$scope', MyCtrl]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.names = [{
"name": "AAAAAA",
"down": "False"
}, {
"name": "BBBBBB",
"down": "45%"
}, {
"name": "CCCCC",
"down": "12%"
}, {
"name": "AAAAAA",
"down": "45%"
}];
$scope.datas = [{
"data": "AAAAAA/45%"
}, {
"data": "CCCCC/12%"
}];
$scope.getTheRightData = data => $scope.datas.map(param => {
return {
name: param.data.split('/')[0],
down: param.data.split('/')[1]
}
}).find(param => param.name == data.name && param.down == data.down);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-controller="MyCtrl">
<table>
<tbody>
<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.down}}</td>
<td>{{getTheRightData(name)}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
When I click "Evan" I get:
{"id":1,"name":"Evan"}
When I click "Robert" I get:
{"id":2,"name":"Robert"}
How can I modify this code to follow the above steps and get an object like this (not an array):
{"id":1,"name":"Evan"},
{"id":2,"name":"Robert"}
Here's my Plunker:
http://plnkr.co/edit/EkKlx7cJG8L0IkRTY6dU?p=preview
Here's my view:
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in items" ng-click="select(item)">
{{item.name}}
</li>
</ul>
<p ng-show="selected">{{selected}}</p>
</body>
Here's my controller:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = {
"1": {
"id": 1,
"name": "Evan"
},
"2": {
"id": 2,
"name": "Robert"
},
"3": {
"id": 3,
"name": "Justin"
}
}
$scope.selected = {};
$scope.select = function (item) {
$scope.selected = item;
}
});
You need to supply a key for the intended value inside your selected object.
If you're opposed to an array, I'd suggest you modify the select function as such:
$scope.select = function (item) {
$scope.selected[item.id] = item;
};
plunker
I have tried using different examples with the watch function, but I am not able to make it work. I am watching a service that contains a array of objects, each object contains a array of arrays. I need to watch the array of arrays for changes.
JSON
[{
"name": "Chantal Hamlet - Green Castle Homes",
"subId": "10223",
"bldId": "13551",
"data": [
[179900, 1386],
[214900, 1440],
[194500, 1496],
[217900, 1504],
[189900, 1542],
[184900, 1546],
[192500, 1570],
[189900, 1576],
[191900, 1598],
[204900, 1626],
[219900, 1651],
[212900, 1704],
[214900, 1787],
[219900, 1837],
[224900, 1857]
]
}, {
"name": "Ella Sea Condos - Sahnow Construction",
"subId": "9761",
"bldId": "27380",
"data": [
[199900, 1500]
]
}]
Watch function
$scope.$watchCollection(function () {
return chartService.series
},
function (rawData) {
$scope.seriesData = rawData;
});
Service
chart.factory('chartService', function () {
return {
getSeries: function () {
return this.series;
},
setSeries: function (series) {
this.series = series;
},
The problem is that your setSeries function is changing the object that's being watched.
Think of it like
chartService.series = ObjectA
Watch ObjectA
chartService.series = ObjectB
ObjectA has not changed.
To fix this you need to wrap it in a larger object that doesn't change.
angular.module('chartModule', [])
.controller("chartController", ['$scope', 'chartService',
function($scope, chartService) {
$scope.seriesData = chartService.seriesContainer;
$scope.changeData = function() {
chartService.seriesContainer.series = [{
"name": "New Name",
}];
}
}
]).factory('chartService', function() {
return {
getSeries: function() {
return this.series;
},
setSeries: function(series) {
this.series = series;
},
seriesContainer: {
series: [{
"name": "Chantal Hamlet - Green Castle Homes",
}]
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="chartModule">
<div ng-controller="chartController">
{{seriesData.series[0].name}}
<button ng-click="changeData()">Change Data</button>
</div>
</body>
If you use a wrapper you actually don't even need a watch, it will happen automatically
I am trying to generate a dynamic table from Angular JS by receiving a response from Spring Rest Service.
This is my code:
// JavaScript Document
var app = angular.module("SDLC", []);
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.headers.common = 'Content-Type: application/json';
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
var urlBase = "http://localhost:8080";
app.controller('projecttable_controller', function($scope, $http) {
$scope.ordered_columns = [];
$scope.all_columns = [{
"title": "Project Name",
"type": "string"
}, {
"title": "Project Description",
"type": "string"
}, {
"title": "Owner",
"type": "string"
}, {
"title": "Start Date",
"type": "string"
}, {
"title": "End Date",
"type": "string"
},{
"title": "Record ID",
"type": "string"
}];
$http.get(urlBase+'/hello?input=raina').
success(function(data) {
//alert(data);
$scope.data=data;
alert($scope.data);
});
$scope.$watch('all_columns', function() {
update_columns();
}, true);
var update_columns = function() {
$scope.ordered_columns = [];
for (var i = 0; i < $scope.all_columns.length; i++) {
var column = $scope.all_columns[i];
$scope.ordered_columns.push(column);
}
};
});
<div class="btn-box-row row-fluid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="c in ordered_columns">{{ c.title }}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ds in data">
<td ng-repeat="c in ordered_columns">{{ d[c.title] }}</td>
</tr>
</tbody>
</table>
</div>
There are no errors in the console. The table headers are displayed correctly. However, the data does not get populated in the table. If I hardcode the json in $scope.data, the table gets populated properly. Any help would be appreciated.
When you fetch your GET response, you write $scope.data = data; and you do nothing with $scope.data
change:
$http.get(urlBase+'/hello?input=raina').
success(function(data) {
//alert(data);
$scope.data=data;
alert($scope.data);
});
to:
$http.get(urlBase+'/hello?input=raina').
success(function(data) {
//alert(data);
$scope.all_columns=data;
alert($scope.data);
});
Because I see you populate your table from $scope.all_columns
Imagine the following JSON API:
[
{
"id": "1",
"name": "Super Cateogry",
"products": [
{
"id": "20",
"name": "Teste Product 1"
},
{
"id": "21",
"name": "Teste Product 2"
},
{
"id": "22",
"name": "Teste Product 3"
}
]
}
]
Is there anyway for me to only return the products array with Angularjs?
I have a simple service calling the JSON:
services.factory("ProductService", function($http) {
return {
"getProducts": function() {
return $http.get("/product/index");
}
};
});
That is being called in the controller like so:
components.success(function(data) {
$scope.products = data;
});
But it returns the whole JSON as expected, I need it to return only the "products" array so I can iterate through it.
PS: This is merely a simple example to illustrate the problem, I realize that I could change the API to fit my needs in this case, but that's not the point.
You would just assign the products array to your scope property...
components.success(function(data) {
$scope.products = data[0].products;
});
You could customize it via a promise, and do it yourself.
"getProducts": function() {
var promise = $q.defer();
$http.get("/product/index").success(function(data){
promise.resolve(data && data.products);
}).error(function(msg){
promise.reject(msg);
})
return promise.promise;
}
How to use:
getProducts().then(
function(data) {
$scope.products = data;
},
function(msg){
alert('error')
}
);