Related
This question already has answers here:
not able to access $scope object outside a http response callback function in angularjs
(3 answers)
Closed 5 years ago.
I'm trying to get a json file within a a controller with $http.get. All well until I try to access the property which holds the response. If I try console.log(property) inside the $http.get() it outputs the returned object, outside $http.get() accessing the very same property and it outputs undefined!
I even try to attache it to the $scope and it's the same result?!
angular.module('todayfmApp')
.controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
var self = this;
$http.get('data/form-data.json').then(function(response) {
self.formdata = response.data;
console.log(self.formdata);
});
console.log(self.formdata);
}]);
{
"settings": {
"version": "",
"Step": "",
"filterBreak": "",
"pid": ""
},
"category": [
{ "name": "Select All", "selected": true },
{ "name": "Carlow", "value": "Carlow" },
{ "name": "Cavan", "value": "Cavan" },
{ "name": "Clare", "value": "Clare" },
{ "name": "Cork", "value": "Cork" },
{ "name": "Derry", "value": "Derry" },
{ "name": "Donegal", "value": "Donegal" },
{ "name": "Down", "value": "Down" },
{ "name": "Dublin", "value": "Dublin" },
{ "name": "Galway", "value": "Galway" },
{ "name": "Kerry", "value": "Kerry" },
{ "name": "Kildare", "value": "Kildare" },
{ "name": "Kilkenny", "value": "Kilkenny" },
{ "name": "Laois", "value": "Laois" },
{ "name": "Leitrim", "value": "Leitrim" },
{ "name": "Limerick", "value": "Limerick" },
{ "name": "Louth", "value": "Louth" },
{ "name": "Mayo", "value": "Mayo" },
{ "name": "Meath", "value": "Meath" },
{ "name": "Monaghan", "value": "Monaghan" },
{ "name": "Offaly", "value": "Offaly" },
{ "name": "Roscommon", "value": "Roscommon" },
{ "name": "Sligo", "value": "Sligo" },
{ "name": "Tipperary", "value": "Tipperary" },
{ "name": "Waterford", "value": "Waterford" },
{ "name": "Westmeath", "value": "Westmeath" },
{ "name": "Wexford", "value": "Wexford" },
{ "name": "Wicklow", "value": "Wicklow" }
],
"num_nights": [
{ "name": "1 Night", "value": 1, "selected": true},
{ "name": "2 Nights", "value": 2 },
{ "name": "3 Nights", "value": 3 },
{ "name": "4 Nights", "value": 4 },
{ "name": "5 Nights", "value": 5 },
{ "name": "6 Nights", "value": 6 },
{ "name": "7 Nights", "value": 7 }
],
"num_rooms": [
{ "name": "1 Room", "value": 1, "selected": true },
{ "name": "2 Rooms", "value": 2 },
{ "name": "3 Rooms", "value": 3 },
{ "name": "4 Rooms", "value": 4 }
],
"num_adults": [
{ "name": "1 Adult", "value": 1 },
{ "name": "2 Adult", "value": 2, "selected": true }
],
"num_child": [
{ "name": "0 Kids", "value": 0, "selected": true },
{ "name": "1 Kids", "value": 1 },
{ "name": "2 Kids", "value": 2 }
]
}
In your case the problem is that $http.get response data is a late binding method. The response of this method will be available only after the service call is finished. This is an asynchronous method so that this will not be accessible inside scope as you expect. For that you need to bind your response inside a $scope variable and use it later inside a function call.
You will need to call the self.getResponseData method at first, say at the time of controller initialization. There after call a method self.logResponseData to log the response data.
You may need to change your calls something like this.
angular.module('todayfmApp')
.controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
var self = this;
// Get the response data with service call
self.getResponseData = function(){
$http.get('data/form-data.json').then(function(response) {
self.formdata = response.data;
console.log(self.formdata);
});
}
//Method to read the response data later
self.logResponseData = function() {
console.log(self.formdata);
}
//Call the method at the time controller loaded to initialize the `self` variable
self.getResponseData();
}]);
self.formdata = response.data.jsondatavariablename;
// Use the JSON data name
$http.get() is asynchronous which roughly means that when you call this it sends request and doesn't stop code on here to wait until it responded, next statements execution is continued though response is still hasn't come and you have no data from it. That's why you need callback function in .then() method, it is being called when you get your response, where you can use your response data. For example, you can assign it to some $scope property and it will update this value everywhere you use this property.
$http uses so called Promises to achieve this. I tried to make it simple but if you want know more detailed how it works, guess that's what will help you: Promise
I'm assigned a task to get data using underscore js.
This is my JSON :
$scope.myData= {
"buslist":
{
"code":"1",
"message":"Success",
"fromStationCode":"71",
"searchResult": [
{
"arrivalTime": "17:00:00",
"availableSeats": "42",
"boardingPointDetails": [
{
"code": "1631",
"name": "Koyambedu",
"time": "09:30:00"
},
{
"code": "961296",
"name": "Nerkundram",
"time": "09:45:00"
}
]
},
{
"arrivalTime": "18:00:00",
"availableSeats": "32",
"boardingPointDetails": [
{
"code": "2084",
"name": "Adyar",
"time": "09:30:00"
},
{
"code": "961296",
"name": "Madurai",
"time": "09:45:00"
}
]
}
]
}
}
From this I want only "name" field. By doing this :
$scope.bdata = _.pluck($scope.myTest.buslist.searchResult, 'boardingPointDetails');
I got all "boardingPointDetails". The result looks like:
[ [
{
"code": "2084",
"name": "Adyar",
"time": "09:30:00"
},
{
"code": "961296",
"name": "Madurai",
"time": "09:45:00"
}
],[
{
"code": "1631",
"name": "Koyambedu",
"time": "09:30:00"
},
{
"code": "961296",
"name": "Nerkundram",
"time": "09:45:00"
}
],[
{
...
}
]
...
]
Help me to retrieve only "name" from this.
If you just want array of names like ['Koyambedu', 'Madurai'] then below code would work.
$scope.bdata = _.pluck($scope.myTest.buslist.searchResult, 'boardingPointDetails');
// Flatten the data.
$scope.flatbdata = _.flatten($scope.bdata, true);
$scope.flatbdata = $scope.flatbdata.filter(function(d){
return d != undefined && d.hasOwnProperty('name')
})
// map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results
$scope.names = $scope.flatbdata.map(function(d){
return d.name;
});
Refer below links :
http://underscorejs.org/#flatten
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
If you just want the array of names, here it is:
$scope.bdata = _.pluck($scope.myTest.buslist.searchResult, 'boardingPointDetails');
var res= _.flatten($scope.bdata);
res=_.pluck(res,'name');
console.log(res);
var temp = _.pluck(_.flatten($scope.bdata),'name')
temp will have ["Koyambedu", "Nerkundram", "Adyar", "Madurai"]
Try this.
$scope = {}; // in real project you don't need this. it's just for snippet.
$scope.myData = {
"buslist": {
"code": "1",
"message": "Success",
"fromStationCode": "71",
"searchResult": [{
"arrivalTime": "17:00:00",
"availableSeats": "42",
"boardingPointDetails": [{
"code": "1631",
"name": "Koyambedu",
"time": "09:30:00"
}, {
"code": "961296",
"name": "Nerkundram",
"time": "09:45:00"
}]
}, {
"arrivalTime": "18:00:00",
"availableSeats": "32",
"boardingPointDetails": [{
"code": "2084",
"name": "Adyar",
"time": "09:30:00"
}, {
"code": "961296",
"name": "Madurai",
"time": "09:45:00"
}]
}]
}
};
$scope.names = _.chain($scope.myData.buslist.searchResult).pluck("boardingPointDetails").flatten(true).map(function(item) {
return item.name;
}).value();
console.log($scope.names);
<script src="http://underscorejs.ru/underscore-min.js"></script>
I have the following collection:
"items": [{
"id": 1,
"title": "Montrachet",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [
{"description" : "Kırmızı Şaraplar Desc"},
{"region" :"Bordeaux"},
{"age": "16"},
{"producer" :"Kayra"},
{"grapeType":"Espadeiro"}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999"
},
{
"id": 2,
"title": "Montrachet2",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [
{"description" : "Kırmızı Şaraplar Desc"},
{"region" :"Bordeaux"},
{"age": "16"},
{"producer" :"Kayra"},
{"grapeType":"Chardonnay"}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999",
}
]
I want to grab unique grapeTypes from that collection. The returning array shold be ["Chardonnay","Espadeiro"]
What is the best way to do it with lodash?
I think this combination of pluck, map and filter should do it:
var result = _.chain(obj.items).pluck('properties').map(function(obj) {
return _.filter(obj, function(prop) {
return prop.grapeType;
})[0].grapeType;
}).uniq().value();
console.log(result);
Check the demo run below.
// Code goes here
var obj = {
items: [{
"id": 1,
"title": "Montrachet",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [{
"description": "Kırmızı Şaraplar Desc"
}, {
"region": "Bordeaux"
}, {
"age": "16"
}, {
"producer": "Kayra"
}, {
"grapeType": "Espadeiro"
}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999"
},
{
"id": 2,
"title": "Montrachet2",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [{
"description": "Kırmızı Şaraplar Desc"
}, {
"region": "Bordeaux"
}, {
"age": "16"
}, {
"producer": "Kayra"
}, {
"grapeType": "Chardonnay"
}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999",
}
]
};
var result = _.chain(obj.items).pluck('properties').map(function(obj) {
return _.filter(obj, function(prop) {
return prop.grapeType;
})[0].grapeType;
}).uniq().value();
document.write(JSON.stringify(result));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
UPD. If grapeType can be missing from properties then the script should be
var result = _.chain(obj.items).pluck('properties').map(function(obj) {
return (_.filter(obj, function(prop) {
return prop.grapeType;
})[0] || {}).grapeType;
}).compact().uniq().value();
Here's one way to do it with lodash:
_(items)
.pluck('properties')
.map(function(item) {
return _.find(item, _.ary(_.partialRight(_.has, 'grapeType'), 1));
})
.pluck('grapeType')
.uniq()
.value();
First, you get the properties arrays using pluck(). Next, you use find() to get the first object in this array that has a grapeType property. This is done using has(), and partially-applying the argument to build the callback function.
Next, you use pluck() again to get the actual property values. Finally, uniq() ensures there are no duplicates.
I have the following object in my AngularJS Controller:
{"team":"1","name":"abc","age":"20"},
{"team":"1","name2":"def","age2":"21"},
{"team":"2","name":"ghi","age":"22"},
{"team":"2","name2":"jkl","age2":"23"},
I need to group the items into one array object, by the team key.
{
"team": [
{"name1":"abc","age1":"20", "name2":"def", "age2":"21"},
{"name1":"ghi","age1":"22", "name2":"jkl", "age2":"23"}
]
}
So I can later use the information like $scope.data.team[1].name2
EDIT: One Team always consists of 4 players by the way.
How would I do this?
edit: working plunkr for your needs: http://plnkr.co/edit/zxoOYV?p=preview
you should rearrange your structure. i.e. you could go for something like this:
{"team": [
{"players": [
{"name" : "abc", "age": 20},
{"name" : "def", "age": 34},
]},
{"players": [
{"name" : "abc", "age": 20},
{"name" : "def", "age": 34},
]}
]}
if you use this structure in your controller:
$scope.team = {...}
and use it in your html like:
<div ng-controller="TeamController">
<div ng-repeat="players in team">
<div ng-repeat="player in players">
<div>Name: {{player.name}}</div>
<div>Name: {{player.age}}</div>
</div>
</div>
</div>
so, for your example, i got the angular-schema-form working.
with the above structure the schema looks like this:
[
{
"type": "help",
"helpvalue": "<h4>Tabbed Array Example</h4><p>Tab arrays can have tabs to the left, top or right.</p>"
},
{
"key": "team",
"type": "tabarray",
"add": "New",
"remove": "Delete",
"style": {
"remove": "btn-danger"
},
"title": "value.name || 'Team '+$index",
"items": [
{
"key": "team[].players",
"title": "Players",
"items": [
{
"key": "team[].players[].name",
"title": "Name"
},
{
"key": "team[].players[].age",
"title": "Age"
}
]
}
]
},
{
"type": "submit",
"style": "btn-default",
"title": "OK"
}
]
and the corresponding schema:
{
"type": "object",
"title": "Team",
"properties": {
"team": {
"type": "array",
"items": {
"type": "object",
"properties": {
"players": {
"type": "array",
"maxItems": 4,
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "integer"
}
},
"required": [
"name",
"age"
]
}
}
},
"required": [
"players"
]
}
}
}
}
I am getting json data from server for make the navigation menu (has the sublinks ) - for that, i am making my model as follow. is this correct..? any one help me please?
Here is the json i am getting from server:
[
{
"label": "General",
"link": "#/general",
"subLinks": [
{
"label": "Dashboard",
"link": "#/dashboard"
},
{
"label": "My Task",
"link": "#/mytask"
},
{
"label": "My Documents",
"link": "#/mydocuments"
},
{
"label": "My Templates",
"link": "#/mytemplates"
},
{
"label": "Search",
"link": "#/search"
}
]
},
{
"label": "Repositories",
"link": "#/reposotories",
"subLinks": []
},
{
"label": "SavedSearches",
"link": "#/savedSearches",
"subLinks": []
},
{
"label": "Favourites",
"link": "#/favourites",
"subLinks": []
},
{
"label": "Reports",
"link": "#/reports",
"subLinks": []
},
{
"label": "Preferences",
"link": "#/preferences",
"subLinks": []
}
]
after i receive my json i use the parse method to manipulate the models:
define(["backbone","models/model","collection/baseCollection"], function (Backbone,model,baseCollection) {
var mainLinkModel = model.extend({
defaults:{
label:"mainLink",
link:"#",
subLinks:[
label:"mainLink",
link:"#"
]
}
})
var headerCollection = baseCollection.extend({
url:function(){
return this.path + "edms/navigationLinksTest"
},
model:model,
initialize:function(){
},
parse:function(response){
var mainNavi = [];
_.each(response.navList, function(m){
// i am making new models.. but how to handle the sublinks?
mainNavi.push(new mainLinkModel(m));
})
}
});
return new headerCollection;
})
how to handle this kind of models.. any one help me in this please..?