I have a controller where I declare the model like this:
$scope.Model =[];
after I make a rest call and the result I push it to the model:
$scope.Model.push(results.data);
The data returned can be in different length and size:
Name
Email
Items
Item 1
Item 2
Item n
Roles
Role 1
Role 2
Role n
What is the best practice of handling this with arrays in AngularJS and using ng-repeat in view in order to show the data?
Should I declare my array like this:
$scope.Model =[];
and push the results:
$scope.Model.push(results.data);
or like this:
$scope.Model =[{
Name: '',
Email: '',
Items: [{
Id: '',
Name: '',
Price: ''
}],
Roles: [{
Id: '',
Name: ''
}],
}];
and asign the results:
$scope.Model = results.data;
It is based on your response and scenarios. but ng-repeat expects Array or Array list.
1) Array
Example 1 (plain array response)
$scope.names= ["Apple", "Banana", "Orange"];
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
Example 2 (Object response that has array)
$scope.names= {
"fruits": ["Apple", "Banana", "Orange"]
};
<ul>
<li ng-repeat="x in names.fruits">
{{ x }}
</li>
</ul>
2) Array List
Example 1 (plain array list response)
$scope.names = [{
"id": "1",
"name": "Asik"
},
{
"id": "1",
"name": "John"
},
{
"id": "1",
"name": "Smith"
}];
<ul>
<li ng-repeat="x in names">
id:{{ x.id }}, name:{{ x.name }}
</li>
</ul>
Example 2 (Object response that has array list)
$scope.names = {
"success": "true",
"items": [{
"id": "1",
"name": "Asik"
},
{
"id": "1",
"name": "John"
},
{
"id": "1",
"name": "Smith"
}]
};
<ul>
<li ng-repeat="x in names.items">
id:{{ x.id }}, name:{{ x.name }}
</li>
</ul>
Basically, service/ajax response comes as Array or Array list. So you don't need to do the following steps.
$scope.Model =[];
$scope.Model.push(results.data);
But the above case comes in some situation (for eg: merging 2 service/ajax responses )
I have used the following:
angular.copy(results.data, $scope.Model)
This will actually copy the results from the rest servicve into my model without having to declare each property of the model.
Related
how can I get the information from this json to paint them in angular 10
{
"countries": [
{
"id": 1,
"name": "United States"
},
{
"id": 2,
"name": "India"
}
],
"states": [
{
"id": 1,
"countryId": 1,
"name": "Alabama"
},
{
"id": 2,
"countryId": 1,
"name": "Alaska"
}
]
}
for normal jsons I used this one, but that jeson has 2 arrays and it won't let me
return this.http.get<Country[]>("./assets/data.json");
Error trying to diff '[object Object]'. Only arrays and iterables are allowed
<!-- html -->
<div *ngFor="let item of countri">
{{item.id}}
</div>
model
export interface Country {
id: number;
name: string;
}
and my subscribe
countri: Country[] = [];
this.countriesService.getCountries().subscribe(
countri => {
this.countri = countri;
console.log(countri);
},
err => console.log(err)
);
Use any.
1st way:
return this.http.get<any>("./assets/data.json");
2nd way define an proper interface for your data.
export interface IRequest {
countries: ICourtry[],
states: IState[]
}
export interface ICourtry{
id:number;
name: string;
}
export interface IState{
id:number;
name: string;
countryId: number;
}
return this.http.get<IRequest>("./assets/data.json");
This mentioned error(Error trying to diff '[object Object]') are because you are using this json somewhere in your template but it has no values. Hope it will fix it or provide the template code also.
Error trying to diff '[object Object]'. Only arrays and iterables are allowed , this error usually comes when you try to iterate through ngFor with an Object instead of an Array.
If you are using ngFor,
list.component.ts
data={
"countries": [
{
"id": 1,
"name": "United States"
},
{
"id": 2,
"name": "India"
}
],
"states": [
{
"id": 1,
"countryId": 1,
"name": "Alabama"
},
{
"id": 2,
"countryId": 1,
"name": "Alaska"
}
]
}
list.component.html
<ul>
<li *ngFor="let item of data.countries">
{{item.name}}
</li>
</ul>
or
<ul>
<li *ngFor="let item of data.states">
{{item.name}}
</li>
As the error suggests, you are most likely trying to iterate over an object rather than an array. Also, since the data you fetch is asynchronous you may make use of the following code to avoid any errors. It makes use of the async pipe along with the safe(?) operator.
.ts
jsonData;
ngOnInit() {
this.jsonData = this.http.get('./assets/data.json');
}
template
<div *ngFor="let country of (jsonData | async)?.countries">
{{ country | json}}
</div>
<div *ngFor="let state of (jsonData | async)?.states">
{{ state | json}}
</div>
I am new to angular. I have a json object:
[
{
"id": 1,
"name": "name1",
"speciality": "speciality1",
"address": "address1",
"phoneNumber": 9999999999
},
{
"id": 2,
"name": "name2",
"speciality": "speciality2",
"address": "address2",
"phoneNumber": 9999999999
},
...
]
and I want to filter based on two properties: name and speciality. This search is matching insensitive substring. How to do this? The way I am doing this is as follows, which doesn't work:
$filter('filter')(doctor.details, { $: query }, false, [name, speciality]);
$filter('filter')(doctor.details, { name: query } || {speciality : query }, false);
doctor.details is the json object array, query is the (sub)string to be matched with name or speciality.
You can write a AngularJS filter to filter out the list based on query matching name and speciality properties.
app.filter('filterDetails', function() {
return function(details, query) {
var filteredDetails = [];
filteredDetails = details.filter(function(obj) {
// look whether query is substring of name or speciality
if (~obj.name.indexOf(query) || ~obj.speciality.indexOf(query)) {
return obj;
}
})
// finally return filtered array
return filteredDetails;
};
});
HTML
Query :
<input type="text" ng-model="query" />
<ul>
<li ng-repeat="detail in doctor.details | filterDetails:query">
{{ detail }}
</li>
</ul>
Plunker
Did it using lodash as this was the easiest I could think of:
_.union($filter('filter')(doctor.details, { name: query }), $filter('filter')(doctor.details, { speciality: query }));
Hi friend I'm beginner in angular and getting stuck by using angular.forEach() function. I just want to call data from a nested array in data.json file. Please check my code below... ****I want to call data from --users-- key****
HTML
<div class="user-container" ng-controller="users">
<ul class="list">
<li ng-repeat="(key, value) in items">
{{key}} <p> {{value}}
</li>
</ul>
</div>
Problems with current code
When run my code in browser Its giving me only 2 <li> in ng-repeat then in {{Key}} I'm getting 0 in first <li> and 1 in second <li>
and in {{value}} I'm getting whole user list in first <li> and in second <li> their is no data
data.json
{
"data": {
"new": true,
"show_page": false,
"status": "signedin",
"users": [{
"Michele": {
"logo": "xyz.jpg",
"status": "active",
"active_since": 2015,
"order": 1
},
"Gerry": {
"logo": "xyz.jpg",
"status": "active",
"active_since": 2015,
"order": 1
}
}]
},
"success": true
}
Controller.js
var myApp = angular.module('app', []);
myApp.service('userData', ['$http', function($http){
return{
userslist : function(){
return $http({'url' : 'data.json', 'method' : 'GET'}).then(function(response){
return response.data;
}, function(data){
console.log(data)
})
}
}
}]);
myApp.controller('users', ['$scope', '$http', 'userData', function($scope, $http, userData){
userData.userslist().then(function(data){
//var provideDataKey = Object.keys(data.users)[0];
$scope.items = [];
angular.forEach(data, function(item){
//console.log(item.users);
$scope.items.push(item.users)
})
console.log($scope.items)
})
}]);
response is the HTTP response, with its body (data), headers, etc.
So response.data is the body, which looks like this:
{
"data": {
"new": true,
"show_page": false,
"status": "signedin",
"users": [{
"Michele": {
"logo": "xyz.jpg",
"status": "active",
"active_since": 2015,
"order": 1
},
"Gerry": {
"logo": "xyz.jpg",
"status": "active",
"active_since": 2015,
"order": 1
}
}]
},
"success": true
}
What you want is to access the users field of the data field of this body. So what you want is
userData.userslist().then(function(data){
$scope.items = data.data.users;
console.log($scope.items)
})
$scope. items is an array, not an object. You want to display the elements of this array. So the syntax is:
{{ user }}
Your JSON is awful, because each user is an object with a single field, and you have no way of knowing the name of that field. You'd better change it to
"users": [
{
"name": "Michele",
"logo": "xyz.jpg",
"status": "active",
"active_since": 2015,
"order": 1
},
{
"name": "Gerry",
"logo": "xyz.jpg",
"status": "active",
"active_since": 2015,
"order": 1
}
]
That way you could just do:
<li ng-repeat="user in items">
{{ user.name }}, active since {{ user.active_since }}.
use this
myApp.controller('users', ['$scope', '$http', 'userData', function($scope, $http, userData){
userData.userslist().then(function(data){
//var provideDataKey = Object.keys(data.users)[0];
$scope.items = [];
angular.forEach(data.users[0], function(item){
$scope.items.push(item);
})
console.log($scope.items)
})
}]);
you were iterating over data and not on users.
I'm trying to display a list of data in a hierarchical view.
My data looks something like this:
items:[
{
"model_id": "1",
"model_type_id": "1",
"name": "Parent 1",
"model_parent_id": ""
},
{
"model_id": "2",
"model_type_id": "1",
"name": "Parent 2",
"model_parent_id": ""
},
{
"model_id": "3",
"model_type_id": "2",
"name": "Child 1",
"model_parent_id": "1"
},
{
"model_id": "4",
"model_type_id": "2",
"name": "Child 2",
"model_parent_id": "2"
}
]
My controller looks like:
myApp.controller('ModelController', ['$scope', 'ModelFactory',
function ($scope, ModelFactory) {
$scope.init = function (id) {
$scope.brandId = id;
getModels($scope.brandId);
};
function getModels(brandId) {
ModelFactory.GetModels(brandId)
.success(function (mdls) {
$scope.models = mdls;
console.log($scope.mdls);
})
.error(function (error) {
$scope.status = 'Unable to load model data: ' + error.message;
console.log($scope.status);
});
};
}
]);
My HTML looks like:
<div ng-controller="ModelController" ng-init="init(brand.ID)">
<ul ng-sortable class="block__list block__list_words">
<li ng-repeat="model in models | filter: {model_type_id:1} ">{{model.model_name}} - {{model.model_id}}
<div ng-controller="ModelController" ng-init="init(brand.ID)">
<ul ng-sortable class="block__list block__list_words">
<li ng-repeat="m in models | filter: {model_type_id:2} | filter:{model_parent_id:model.model_id}">
{{m.model_name}} - {{m.model_parent_id}}
</li>
</ul>
</div>
</li>
</ul>
</div>
The filter isn't working where I'm trying to filter on the inner controller with the outer controller. I'm getting both children displayed below each parent. How can I get it so the parent is displayed, and only the children are displayed where the childs model_parent_id equals the model_id of the parent?
While I'm not sure whether there is a way to achieve this using filter, the normal way to display nested data is to reorganize the data structure to reflect what you want to display.
items:[
{
"model_id": "1",
"model_type_id": "1",
"name": "Parent 1",
"children": [{
"model_id": "3",
"model_type_id": "2",
"name": "Child 1"
}]
},
{
"model_id": "2",
"model_type_id": "1",
"name": "Parent 2",
"children": [{
"model_id": "3",
"model_type_id": "2",
"name": "Child 2"
}]
}
]
And then display them using nested ng-repeat
<ul>
<li ng-repeat="parent in items">
{{parent.name}} - {{parent.model_id}}
<ul>
<li ng-repeat="child in parent.children">
{{child.name}} - {{child.model_id}}
</li>
</ul>
</li>
</ul>
Note: There is no need to use nested controllers, just one on the top layer should be enough. If you need to use some shared logic recursively, use a custom directive to replace the li.
To reorganize the data you can do either on the server side or client side.
The following shows how to do in client side as we might not have the permission to change the server side API.
$scope.data = [];
angular.forEach(items, function(item) {
if (item.model_parent_id == "") {
$scope.data.push(item);
}
});
// add all parents first in case some children comes before parent
angular.forEach(items, function(item) {
if (item.model_parent_id == "") continue;
// search for parent
angular.forEach($scope.data, function(parent) {
if (parent.model_id == item.model_parent_id) {
if (!parent.children) parent.children = [];
parent.children.push(item);
}
}
});
How to make a single Search to filter multiple objects value ??
For e.g: if i search '1' OR 'one' then the result should come........
I've tried it so far:
HTML:
<input type="text" ng-model="model_search">
<ul>
<li ng-repeat="obj_data in data | filter:{id:model_search, text:model_search}">{{obj_data.id}}-->{{obj_data.text}}</li>
</ul>
JS:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.data = [{
"id": 1,
"text": 'one'
}, {
"id": 2,
"text": 'two'
}, {
"id": 3,
"text": 'three'
}, {
"id": 4,
"text": 'four'
}, {
"id": 5,
"text": 'five'
}];
});
DEMO PLUNKR
You were close, just change the filter to look like this:
<li ng-repeat="obj_data in data | filter:model_search">{{obj_data.id}}-->{{obj_data.text}}</li>
Working plunkr below
http://plnkr.co/edit/0jeA0u8oaz16cYnsZjfw?p=preview