Related
How to fetch array of array data in angular 2.
My json data is as follows,
[[{
"pk_emp_id":5,
"tenant_id":"Zone1",
"location_id":1,
"emp_number":"sk44",
"prefix":"",
"first_name":"qqqqq",
"middle_name":"www",
"last_name":"eeee",
"display_name":"qqqq",
"full_name":"qqq qqqq",
"email":"qqqq#gmail.com",
"gender":"Female",
"emp_type_id":2,
"date_of_hire":191000,
"date_of_birth":null,
"manager_id":7,
"phone_number":"9877654",
"position":"SE",
"responsibility":"",
"notes":"",
"contracted":"0",
"street":"vidyanagar",
"state":"Karnataka",
"city":"hubli",
"zip_code":"9898",
"dob":-19800000,
"ssn":"",
"deleted":0
},{
"pk_empt_id":2,
"empt_tenant_id":"2",
"***empt_name***":"temporary",
"deleted":0
}]]
How can I fetch empt_name in datatable(row data)?
let dummyArr = [
[{
"pk_emp_id": 5,
"tenant_id": "Zone1",
"location_id": 1,
"emp_number": "sk44",
"prefix": "",
"first_name": "qqqqq",
"middle_name": "www",
"last_name": "eeee",
"display_name": "qqqq",
"full_name": "qqq qqqq",
"email": "qqqq#gmail.com",
"gender": "Female",
"emp_type_id": 2,
"date_of_hire": 191000,
"date_of_birth": null,
"manager_id": 7,
"phone_number": "9877654",
"position": "SE",
"responsibility": "",
"notes": "",
"contracted": "0",
"street": "vidyanagar",
"state": "Karnataka",
"city": "hubli",
"zip_code": "9898",
"dob": -19800000,
"ssn": "",
"deleted": 0
}, {
"pk_empt_id": 2,
"empt_tenant_id": "2",
"***empt_name***": "temporary",
"deleted": 0
}]
];
dummyArr.forEach(element =>{
element.forEach(element2=>{
console.log(element2)
})
});
I believe you have exposed a GET method in your web api
In Angular using HTTP service
this.http.get("").subscribe(result => {
conosle.log(result[1].empt_name) });
You can take it in an array and read it like this:
x = [
[{
"pk_emp_id": 5,
"tenant_id": "Zone1",
"location_id": 1,
"emp_number": "sk44",
"prefix": "",
"first_name": "qqqqq",
"middle_name": "www",
"last_name": "eeee",
"display_name": "qqqq",
"full_name": "qqq qqqq",
"email": "qqqq#gmail.com",
"gender": "Female",
"emp_type_id": 2,
"date_of_hire": 191000,
"date_of_birth": null,
"manager_id": 7,
"phone_number": "9877654",
"position": "SE",
"responsibility": "",
"notes": "",
"contracted": "0",
"street": "vidyanagar",
"state": "Karnataka",
"city": "hubli",
"zip_code": "9898",
"dob": -19800000,
"ssn": "",
"deleted": 0
}, {
"pk_empt_id": 2,
"empt_tenant_id": "2",
"***empt_name***": "temporary",
"deleted": 0
}]
]
$('#a').text(x[0][1]['***empt_name***'])
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<span id='a'>sadsad </span>
This is just Javascript object manipulation.
You can do something like :
outerArray.forEach(innerArray =>{
if(innerArray.length){
innerArray.forEach(element =>{
//do somthing here with element.empt_name
console.log(element.empt_name);
});
}
})
I have a json like this -
[{
"id": "152",
"name": "Accounting",
"parent_id": "0",
"created_at": "2016-12-20 18:10:57",
"updated_at": "2016-12-20 18:10:57"
}, {
"id": "292",
"name": "Administration",
"parent_id": "0",
"created_at": "2016-12-20 18:37:29",
"updated_at": "2016-12-20 18:37:29"
}, {
"id": "422",
"name": "Banquet",
"parent_id": "0",
"created_at": "2016-12-20 18:43:26",
"updated_at": "2016-12-20 18:43:26"
}, {
"id": "502",
"name": "Engineering & Maintenance",
"parent_id": "0",
"created_at": "2016-12-20 18:47:12",
"updated_at": "2016-12-20 18:47:12"
}, {
"id": "622",
"name": "Food & Beverage Admin",
"parent_id": "0",
"created_at": "2016-12-20 18:51:00",
"updated_at": "2016-12-20 18:51:00"
}, {
"id": "782",
"name": "Food & Beverage Service",
"parent_id": "0",
"created_at": "2016-12-20 18:56:38",
"updated_at": "2016-12-20 18:56:38"
}, {
"id": "982",
"name": "Front Office",
"parent_id": "0",
"created_at": "2016-12-20 19:05:04",
"updated_at": "2016-12-20 19:05:04"
}, {
"id": "1212",
"name": "Housekeeping & Laundry",
"parent_id": "0",
"created_at": "2016-12-20 19:15:48",
"updated_at": "2016-12-20 19:15:48"
}, {
"id": "1352",
"name": "HR",
"parent_id": "0",
"created_at": "2016-12-21 10:12:38",
"updated_at": "2016-12-21 10:12:38"
}, {
"id": "1462",
"name": "IT",
"parent_id": "0",
"created_at": "2016-12-21 10:16:14",
"updated_at": "2016-12-21 10:16:14"
}, {
"id": "1492",
"name": "Kitchen / Food Preparation",
"parent_id": "0",
"created_at": "2016-12-21 10:17:29",
"updated_at": "2016-12-21 10:17:29"
}, {
"id": "1712",
"name": "Purchase",
"parent_id": "0",
"created_at": "2016-12-21 10:26:09",
"updated_at": "2016-12-21 10:26:09"
}]
Which I am iterating in list with ng-repeat.
Now I have another array like
[152,292,422,1712].
Now how do I match the second array with the id of first array and change the style of those matching id's object in the view.
Please suggest.
You can use the ngClass directive.
The code would look something like this, assuming the Json is saved as foodList:
<div ng-repeat="food in foodList">
<div ng-class="{'classNameToWantedStyle': isIDInList(food.id)}">
{{food.name}}
</div>
</div>
and in your controller you would make a corresponding function that returns true if the id is in the list. Here you could use javascripts indextOf method to determine that.
Assuming 'items' is the name of the array, then you have your ng-repeat:
<div ng-repeat="item in items">
You can use ng-switch (or here) to look at each item then separate that out into sections that you can style differently:
<div ng-switch="item.id">
<div ng-switch-when="152" class="152-class"></div>
<div ng-switch-when="292" class="292-class"></div>
<div ng-switch-default class="default-class"></div>
</div>
You get the idea, but take a look at the documentation I linked, they might explain it better.
Here is mij code but data is hardcoded and working perfect. When I try my data dynamicly calling data responsed good. My question is look this script with hardcoded data. If i will selected item viewing in detailpage working nice.
Shortly this hardcoded data must from webmethod. How can I do it?
This is my html code for view menu as list;
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb">
<li class="active">
<i class="fa fa-dashboard"></i> Menu
</li>
</ol>
<div class="row" ng-controller="DesktopController">
<div class="col-lg-10">
<h2>Menu Lijst</h2>
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>State</th>
<th>ParentID</th>
<th>Parent</th>
<th>MenuItem ID</th>
<th>Index</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="menu in List" style="width:auto;">
<td>{{menu.Description}}</td>
<td>{{menu.State}}</td>
<td>{{menu.ParentID}}</td>
<td>{{menu.Parent}}
</td>
<td>{{menu.MenuItemID}}</td>
<td>{{$index}}</td>
<td>
View Detail
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Here is my detail menu view page...
<h1>View DetailMenu Page</h1>
<br />
<!--<h1>{{menu.Description}}</h1>-->
<div class="row" ng-controller="viewDetailMenuController">
<div class="col-lg-10">
<h2>{{menu.Description}}</h2>
</div>
</div>
App.factory('menuService', function ($http) {
var obj = {
getAllMenus: [{ "ID": "1", "Description": "MOTOR", "State": "1", "ParentID": "0", "Parent": "", "MenuItemID": "0" }, { "ID": "2", "Description": "FILTERS", "State": "0", "ParentID": "1", "Parent": "MOTOR", "MenuItemID": "1" }, { "ID": "3", "Description": "BRANDSTOF/TANKDOPPEN", "State": "0", "ParentID": "1", "Parent": "MOTOR", "MenuItemID": "2" }, { "ID": "4", "Description": "ONSTEKING", "State": "0", "ParentID": "1", "Parent": "MOTOR", "MenuItemID": "3" }, { "ID": "5", "Description": "ACCU/STARTEN", "State": "0", "ParentID": "1", "Parent": "MOTOR", "MenuItemID": "4" }, { "ID": "6", "Description": "BOUGIES/BOUGIEKABELS", "State": "0", "ParentID": "1", "Parent": "MOTOR", "MenuItemID": "5" }, { "ID": "7", "Description": "D-RIEMEN/V-REIM-SETS", "State": "0", "ParentID": "1", "Parent": "MOTOR", "MenuItemID": "6" }, { "ID": "8", "Description": "PAKKINGEN", "State": "0", "ParentID": "1", "Parent": "MOTOR", "MenuItemID": "7" }, { "ID": "9", "Description": "MOTORBLOK", "State": "0", "ParentID": "1", "Parent": "MOTOR", "MenuItemID": "8" }, { "ID": "10", "Description": "CYLINDERKOP", "State": "0", "ParentID": "1", "Parent": "MOTOR", "MenuItemID": "9" }, { "ID": "11", "Description": "MOTORMANAGEMENT", "State": "0", "ParentID": "1", "Parent": "MOTOR", "MenuItemID": "10" }, { "ID": "12", "Description": "UITLATEN", "State": "0", "ParentID": "1", "Parent": "MOTOR", "MenuItemID": "11" }, { "ID": "13", "Description": "KOELING", "State": "2", "ParentID": "0", "Parent": "", "MenuItemID": "12" }, { "ID": "14", "Description": "AIRCO", "State": "0", "ParentID": "13", "Parent": "KOELING", "MenuItemID": "13" }, { "ID": "15", "Description": "KOELSYSTEEM/WATERPOMP", "State": "0", "ParentID": "13", "Parent": "KOELING", "MenuItemID": "14" }, { "ID": "16", "Description": "SCHAKELAARS/SENSOREN", "State": "0", "ParentID": "13", "Parent": "KOELING", "MenuItemID": "15" }, { "ID": "17", "Description": "SLANGEN/LEIDINGEN", "State": "0", "ParentID": "13", "Parent": "KOELING", "MenuItemID": "16" }, { "ID": "18", "Description": "ONDERSTEL", "State": "1", "ParentID": "0", "Parent": "", "MenuItemID": "17" }, { "ID": "19", "Description": "STUURDELEN", "State": "0", "ParentID": "19", "Parent": "STUURDELEN", "MenuItemID": "18" }, { "ID": "20", "Description": "KABELS", "State": "0", "ParentID": "19", "Parent": "STUURDELEN", "MenuItemID": "19" }, { "ID": "21", "Description": "AANDRIJVING/HOEAEN", "State": "0", "ParentID": "19", "Parent": "STUURDELEN", "MenuItemID": "20" }, { "ID": "22", "Description": "KOPPELING", "State": "0", "ParentID": "19", "Parent": "STUURDELEN", "MenuItemID": "21" }, { "ID": "23", "Description": "WIELLAGERS", "State": "0", "ParentID": "19", "Parent": "STUURDELEN", "MenuItemID": "22" }, { "ID": "24", "Description": "SCHOKDEMPERS", "State": "0", "ParentID": "19", "Parent": "STUURDELEN", "MenuItemID": "23" }, { "ID": "25", "Description": "VEREN", "State": "0", "ParentID": "19", "Parent": "STUURDELEN", "MenuItemID": "24" }, { "ID": "26", "Description": "TREKHAAK", "State": "0", "ParentID": "19", "Parent": "STUURDELEN", "MenuItemID": "25" }, { "ID": "27", "Description": "BANDEN", "State": "0", "ParentID": "19", "Parent": "STUURDELEN", "MenuItemID": "26" }, { "ID": "28", "Description": "REMDELEN NAT/DROOG", "State": "2", "ParentID": "0", "Parent": "", "MenuItemID": "27" }, { "ID": "29", "Description": "REM-DELEN/SCHIJVEN", "State": "0", "ParentID": "28", "Parent": "REMDELEN NAT/DROOG", "MenuItemID": "28" }]
}
return obj;
});
Controllers:
var App = angular.module("app", ['ui.router']);
App.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'Pages/Home.html'
})
.state('menu', {
url: '/menu',
templateUrl: 'Pages/Menu.html'
})
.state('menuDetail', {
url: '/menuDetail/{id}',
templateUrl: 'Pages/MenuDetail.html',
controller: 'viewDetailMenuController'
});
});
App.run(function ($rootScope, $state) {
$rootScope.$state = $state;
});
App.controller("DesktopController", function ($scope, menuService) {
$scope.List = menuService.getAllMenus;
});
App.controller("viewDetailMenuController", function ($scope, menuService, $stateParams) {
$scope.menu = menuService.getAllMenus[$stateParams.id];
});
This work perfect. Only my question is how can I do that selected menu view in detail page using $http $stateParams (dynamic data calling from webservice or webmethod)?
Before this question I have shared calling data from webmethod you can see it.
Thanks...
write this code
.state('menuDetail', {
url: '/menuDetail/:id',
templateUrl: 'Pages/MenuDetail.html',
controller: 'viewDetailMenuController'
});
<a ui-sref="menuDetail({ id: dynamicId })">Click</a>
and when you click on 'Click' then open detail page
For more know https://github.com/angular-ui/ui-router/wiki/quick-reference
Let's say you want to get your menu items from server instead of hardcoding.
App.factory('menuService', function ($http) {
var service = {};
service.getAllMenus = function(){
return $http.get('url_or_your_webapi');//this returns a promise
};
return service;
});
then we need to get that menu data in controller:
App.controller("DesktopController", function ($scope, menuService) {
// here we set callback for promise we received from our menu service
menuService.getAllMenus().then(function(response){$scope.List = response.data;});
});
UPD menu service code fixed, now returns function
I am sure I am missing some small detail. I have a factory which reads data from the server and retrieves JSON results. Then, in my controller I do the following:
.controller('homeController', ['$scope','RecentItems', function($scope,RecentItems)
{
//scopes for the items
$scope.items={};
RecentItems.getRecentItems().done(function(data){
$scope.items = data;
console.log($scope.items);
});
}])
In the HTML template i have an ng-repeat directive > ng-repeat="item in items"
And the results don't appear in the view. console.log($scope.items) displays the data in the console however, in the view the items appears to be empty.
I know that it has to do with the variable scopes in JavaScript rather than being an AngularJS problem
THIS IS THE JSON RESULT:
[
{
"iid": "32",
"name": "Womens bag 2",
"brand": "Gucci",
"category": "Handtaschen",
"minprice": "20",
"retailprice": "400",
"duedate": "2015-06-10 21:25:00",
"description": "second bag",
"img": "images/items/1433274066696.jpg",
"current_price": "0"
},
{
"iid": "31",
"name": "Womens Bag",
"brand": "Gucci",
"category": "Handtaschen",
"minprice": "20",
"retailprice": "300",
"duedate": "2015-06-10 21:25:00",
"description": "Bag",
"img": "images/items/1433274042147.jpg",
"current_price": "0"
},
{
"iid": "30",
"name": "Watch2",
"brand": "Swiss",
"category": "Uhren",
"minprice": "20",
"retailprice": "200",
"duedate": "2015-06-10 21:25:00",
"description": "watch to test",
"img": "images/items/1433273997525.png",
"current_price": "0"
},
{
"iid": "29",
"name": "Watch",
"brand": "Swiss",
"category": "Uhren",
"minprice": "10",
"retailprice": "200",
"duedate": "2015-06-10 21:25:00",
"description": "Test",
"img": "images/items/1433273879811.png",
"current_price": "0"
}
]
Is the parsing way wrong? I'm trying to get weather data
function Hello($scope, $http) {
$http
.jsonp('http://api.worldweatheronline.com/free/v1/weather.ashx?q=London&format=json&num_of_days=5&key=MYKEY&callback=JSON_CALLBACK')
.success(function(data) {
var datais = JSON.stringify(data);
console.log("Datais::"+datais);
console.log("Weather::"+datais["weather"]);
})
.error(function(data){
alert("Error");
});
}
Output:
Datais::{
"data": {
"current_condition": [{
"cloudcover": "25",
"humidity": "76",
"observation_time": "09:13 AM",
"precipMM": "0.0",
"pressure": "992",
"temp_C": "9",
"temp_F": "48",
"visibility": "10",
"weatherCode": "113",
"weatherDesc": [{
"value": "Sunny"
}],
"weatherIconUrl": [{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0001_sunny.png"
}],
"winddir16Point": "SSW",
"winddirDegree": "200",
"windspeedKmph": "13",
"windspeedMiles": "8"
}],
"request": [{
"query": "London, United Kingdom",
"type": "City"
}],
"weather": [{
"date": "2014-01-16",
"precipMM": "1.6",
"tempMaxC": "11",
"tempMaxF": "52",
"tempMinC": "5",
"tempMinF": "41",
"weatherCode": "116",
"weatherDesc": [{
"value": "Partly Cloudy"
}],
"weatherIconUrl": [{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"
}],
"winddir16Point": "S",
"winddirDegree": "191",
"winddirection": "S",
"windspeedKmph": "30",
"windspeedMiles": "19"
}, {
"date": "2014-01-17",
"precipMM": "1.3",
"tempMaxC": "10",
"tempMaxF": "50",
"tempMinC": "5",
"tempMinF": "42",
"weatherCode": "116",
"weatherDesc": [{
"value": "Partly Cloudy"
}],
"weatherIconUrl": [{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"
}],
"winddir16Point": "SSW",
"winddirDegree": "202",
"winddirection": "SSW",
"windspeedKmph": "27",
"windspeedMiles": "17"
}, {
"date": "2014-01-18",
"precipMM": "2.7",
"tempMaxC": "10",
"tempMaxF": "49",
"tempMinC": "4",
"tempMinF": "39",
"weatherCode": "266",
"weatherDesc": [{
"value": "Light drizzle"
}],
"weatherIconUrl": [{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0017_cloudy_with_light_rain.png"
}],
"winddir16Point": "S",
"winddirDegree": "177",
"winddirection": "S",
"windspeedKmph": "23",
"windspeedMiles": "15"
}, {
"date": "2014-01-19",
"precipMM": "1.0",
"tempMaxC": "8",
"tempMaxF": "46",
"tempMinC": "5",
"tempMinF": "41",
"weatherCode": "122",
"weatherDesc": [{
"value": "Overcast"
}],
"weatherIconUrl": [{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"
}],
"winddir16Point": "ESE",
"winddirDegree": "110",
"winddirection": "ESE",
"windspeedKmph": "13",
"windspeedMiles": "8"
}, {
"date": "2014-01-20",
"precipMM": "0.4",
"tempMaxC": "8",
"tempMaxF": "47",
"tempMinC": "1",
"tempMinF": "34",
"weatherCode": "116",
"weatherDesc": [{
"value": "Partly Cloudy"
}],
"weatherIconUrl": [{
"value": "http://cdn.worldweatheronline.net/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"
}],
"winddir16Point": "NW",
"winddirDegree": "311",
"winddirection": "NW",
"windspeedKmph": "12",
"windspeedMiles": "7"
}]
}
}
Weather::undefined
Here your datais variable is assigned the data.
if you inspect properly the json data returned as you can see in your console.log(datais);
you will be able to access weather property in datais.data.weather.
try this
console.log("Weather::"+datais.data.weather);
You will be able to access weather property.
Further weather property is an array which has weather values from today up to 4 upcoming days. you can access them in a loop
for(i=0; i<datais.data.weather.length; i++){
console.log(datais.data.weather[i]);
}
Or for example access todays weather data:
console.log(datais.data.weather[0].date);
console.log(datais.data.weather[0].tempMaxC);
console.log(datais.data.weather[0].tempMinC);
i htink you need to access the weather this way:
console.log("Weather::"+datais.data.weather);
you may use an onlne json viewer to view the structure of your data: for example: http://jsonviewer.stack.hu/ or take at look at the browser console. firebug, for example, can show the json data as tree.
And you don't need JSON.stringify. Angular does this for you:
.success(function(data) {
console.log(data.data.weather);
})