I am closing this issue because the issue has been resolved, 1 problem was I was using $scope.data = data (instead of $scope.data = data.data). The other reason is because of the answer I selected.
What I am trying to do, is get data (an object) from a json file and assign it to another variable (or $scope property I suppose?).
But when I do this, the object I've initialized gets assigned to my alternate variable before the $http.get() call happens?
<!DOCTYPE html>
<html>
<head>
<title>Playing with Angular</title>
<script src="angular.min.js"></script>
</head>
<body data-ng-app="myApp" ng-controller="myCtrl" ng-init="">
<p>{{ element1 }}</p>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$scope.data = {};
$http.get("data.json").then(function(data) {
$scope.data = data.data;
});
$scope.element1 = $scope.data.element1;
});
</script>
</div>
</body>
</html>
data.json is very simple:
{
"element1": {
"sub1":1,
"sub2":2
}
}
Am I trying to do something that isn't possible in Angular?
And if this question has been answered elsewhere please point me to it.
Edit
One step closer
I changed the above $scope.data = data; to $scope.data = data.data;. Which was what my biggest problem was (in my opinion anyways, supported by the fact that no one else saw this).
Now my problem is that I am looking for a better solution than Narain Mittal suggested below. I can place $scope.element1 = $scope.data.element1; inside of $http.get("data.json").then(function(data) {});, and it will work. This in not what I want.
But Im going to consolidate what exactly I want, then go over to Code Review. Thanks for all the help!
You need to have the statement $scope.element1 = $scope.data.element1; inside .thenfunction callback, something like this:
$http.get("data.json").then(function(data) {
$scope.data = data;
$scope.element1 = $scope.data.element1;
});
The reason it doesn't work for you is javascript execution doesn't wait for the $http call to complete before proceeding with the assignment unless you put it in the callback.
You need to parse JSON data like this
$http.get("data.json").then(function(data) {
var data = JSON.parse(data)
$scope.element1 = data.element1
});
It is likely that data is a string that needs to be parsed as json.
$scope.data = {}
$http.get("data.json").then(function(data) {
$scope.data = angular.fromJson(data);
});
I have edited this, since i think a better option would be to do the above and to have your template drill into data
<p>{{ data.element1 }}</p>
EDIT
Sorry, it's fromJson
Related
I have a testing db which works and when I am using console.log I can see the objects but when I try to render in html. It shows empty why?
my angular codes
var app = angular.module('startBet',['firebase']);
var ref = new Firebase("https://vsw.firebaseio.com");
app.controller("ibet", function($scope, $firebaseObject) {
$scope.todos = [{act: 'complete', test: 'abc'},
{act: 'not', test: 'bdb'}];
$scope.bets = [];
var ref2 = new Firebase("https://vsw.firebaseio.com/bets");
ref2.once("value", function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key();
var childData = childSnapshot.val();
$scope.bets.push(childData);
$scope.todos.push(childData);
});
});
console.log($scope.todos);
console.log($scope.bets);
my html
<div class="bot-container" ng-app='startBet'>
<div class="in-play" ng-controller='ibet'>
<header><p>{{todos.length}}</p></header>
<div class="bets-list">
<div class="bet-title">
{{bets.length}}
</div>
sorry for any closing tags. didn't bother to copy others
I can see what I hard codes has the length of 2 which rendered in html and for the other one it's 0.
But in console.log I can see both showing all objects instead nothing or just those two hard coded though.
What am I missing here?
Thanks in advance.
You need to use ng-repeat to iterate the list:
<ul>
<li ng-repeat="td in todos">{{td.act}}</li>
</ul>
The callback of the request to Firebase is probably not triggering the digest cycle to be run, so your DOM is not updating. Try wrapping the code in $timeout, which will trigger a digest cycle. (See this for a more detailed explanation.)
app.controller("ibet", function($scope, $firebaseObject, $timeout) {
...
var ref2 = new Firebase("https://vsw.firebaseio.com/bets");
ref2.once("value", function(snapshot) {
$timeout(function() {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key();
var childData = childSnapshot.val();
$scope.bets.push(childData);
$scope.todos.push(childData);
});
});
});
You may want to use AngularFire instead of the regular Firebase JavaScript API.
Angular Translate works great as a filter in the view.
I am using angular-translate-loader-static-files with external files like locale-en.json etc.
The problem is when I try to do something like this:
var placeholder = $translate('placeholder.NAME')
.then(function (translatedValue) {
return translatedValue;
});
I always get a promise back, and in the UI it shows as {} instead of the word NAME for english etc.
What is the correct way to translate in JS using angular-translate?
EDIT:
Tried this and got the following result (still not solved)
var placeholder = '';
$translate('placeholder.NAME').then(function (translatedValue) {
console.log(translatedValue);
placeholder = translatedValue;
}, function(err){
console.log(err); // returns placeholder.NAME
});
console.log(placeholder); // returns empty string
var placeholder = '';
$translate('placeholder.NAME').then(function (translatedValue) {
placeholder = translatedValue;
});
I'd recommend to keep your controller free from translation logic and translate your strings directly inside your view like this:
<h1>{{ 'TITLE.HELLO_WORLD' | translate }}</h1>
You can use instant function to get the value without the promise:
var translation = $translate.instant('placeholder.NAME');
However, this does not wait for the translation files to get loaded. You should make sure you are calling this after translation files are loaded.
From the website http://angular-translate.github.io/docs/#/guide/03_using-translate-service635
app.controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {
$translate(['HEADLINE', 'PARAGRAPH', 'NAMESPACE.PARAGRAPH']).then(function (translations) {
$scope.headline = translations.HEADLINE;
$scope.paragraph = translations.PARAGRAPH;
$scope.namespaced_paragraph = translations['NAMESPACE.PARAGRAPH'];
});
}]);
I am new in AngularJS and I'm with a doubt about the controller attributes. I created an attribute called anuncio, this attribute has an array of objects as showed in the image bellow:
var anuncioModule = angular.module('anuncioModule',[]);
anuncioModule.controller('RegistrationController',['$http',function ($http){
this.anuncios;
this.loadAnuncios = function loadAnuncios(){
$http.get('http://localhost:8080/pederofer/anuncios/get.action').then(function(result){
this.anuncios.push.apply(this.anuncios, result.data);
});
}
}]);
When I call my webservice with the function loadAnuncios and try to set the values directly using "this.anuncios" i get the message "this.anuncios is undefined". but if i create a var called anuncs and set "this.anuncios = anucs", and instead of set my AJAX call directly into this.anuncios I set to anucs as the image bellow, It works.
var anuncioModule = angular.module('anuncioModule',[]);
var anuncs =[];
anuncioModule.controller('RegistrationController',['$http',function ($http){
this.anuncios = anuncs ;
this.loadAnuncios = function loadAnuncios(){
$http.get('http://localhost:8080/pederofer/anuncios/get.action').then(function(result){
anuncs.push.apply(anuncs, result.data);
});
}
}
My question is, why it works?
I might suggest going about what you're doing in a different way.
var anuncioModule = angular.module('anuncioModule',[]);
anuncioModule.controller('RegistrationController', ['$scope', '$http', function ($scope, $http) {
$scope.anuncios = [];
$scope.loadAnuncios = function() {
$http.get('http://localhost:8080/pederofer/anuncios/get.action').then(function(result) {
$scope.anuncios = result.data;
});
};
}
I don't know if that's exactly what you're after but maybe that will make a lightbulb go off for you.
I have a rather simple question. I have a simple controller and its $scope.coords = []; renders JSON in HTML:
[24.43359375, 54.6611237221]
[25.2905273438, 54.6738309659]
[25.3344726562, 54.6102549816]
[25.2685546875, 54.6801830971]
[25.2960205078, 54.6611237221]
How can I render that JSON not in html, but in my controller itself ? The code looks like that. Please see the comment in code:
propertyModule.controller('propertyController', ['$scope', 'Property', function ($scope, Property) {
// Query returns an array of objects, MyModel.objects.all() by default
$scope.properties = Property.query();
// Getting a single object
$scope.property = Property.get({pk: 1});
$scope.coords = [];
$scope.properties = Property.query({}, function(data){
console.log(data);
angular.forEach(data , function(value){
$scope.coords.push(value.coordinates);
});
});
$scope.positions = //$Resource('realestate.property').items();
[
[54.6833, 25.2833], [54.67833, 25.3033] // those coordinates are hardcoded now, I want them to be rendered here by $scope.coords
];
}]);
First off, you're showing us a bunch of arrays, not a JSON document. But since your code seems to be working, I'll assume you do have a valid JSON to work with.
You need to consider the fact that you are making an asynchronous request here :
$scope.properties = Property.query({}, function(data) {
console.log(data);
angular.forEach(data , function(value){
$scope.coords.push(value.coordinates);
});
});
This means you won't be able to fetch data from $scope.coords before anything has arrived.
There are several ways to solve that :
You could simply fetch data while you're still in the loop :
angular.forEach(data , function(value) {
$scope.coords.push(value.coordinates);
if('your condition') {
$scope.positions.push(value.coordinates);
}
});
You could use a promise, see the angular doc.
Or you could watch over $scope.coords with $scope.$watch.
I am making a backend call using AngularJS using AJAX. My call returns the JSON successfully. This code is written in a JavaScript file.
I have a html file in the same code base which is unable to iterate through this JSON.
My JavaScript snippet is as below:
angular.module('kmapp').controller("FieldCodesCtrl", ['$scope', function($scope){
var model = {};
console.log("FieldCodesCtrl");
$http.get("/my/rest/URL").success(function (data) {
model.items = data;
console.log("data set on items");
$scope.fieldCodes = model;
console.log($scope.fieldCodes.items.length);
});
// $scope.fieldCodes = model;
}]);
My html is as below:
<tr ng-repeat="item in fieldCodes.items">
<td>{{item.id}}</td>
<td>{{item.comment}}</td>
</tr>
My issue is that the "fieldCodes.items" has nothing in the html. So it does not display the ID and Comment that I get from my JSON.
Can someone please help. I am new to AngularJS. So please excuse me if it is something obvious.
Instead of using model.items = data; , Use model = data; Otherwise it will not defined properly. As you are using in your view (model bind) item.id looks ok. so try with this (model = data) Hope this will work. I can Answer you more specify, If you can sent the sample JSON.
Thanks
\Riyadh
$http needs to be injected into your controller.
.controller("FieldCodesCtrl", ['$scope', '$http', function($scope, $http){
Make sure you have your module registered to the HTML tag in the document. I think it is something like "ng-app."
Maybe I'm looking at this wrong, but it seems that you are assigning this object to model.items
{ fieldCodes: {
items: [
{ id: XXX name: CCC value: DD comment: AA },
{ id: aaaa name: aaaaadd value: ddf comment: ee }]
}
}
Wouldn't you instead want model = data.fieldCodes; to be able to use fieldCodes.items?