Develop Reference

Angularjs $http get json data, but won't display

I am new to angularjs, and I try to async load data by using angularjs.
Json Sample
[{"id":153,"name":"Computer Parts->Cooling Device->CPU Fan"},{"id":30,"name":"Computer Parts->CPU"}]
HTML Code
var homeApp = angular.module('managementApp',[]);
homeApp.controller('categoryMgmt',function($scope,$http){
$scope.categoryFilter = '';
$scope.categorys = '';
$scope.categoryLoad = function(){
var key = $scope.categoryFilter;
$http({
method : 'get',
url : 'hugo.dev/api/categorys/'+key,
}).then(function mySuccess(response){
$scope.categorys = angular.fromJson(response.data);
console.log($scope.categorys[0].name);
});
};
});
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<div class="panel-body" ng-app="managementApp" ng-controller="categoryMgmt">
<div class="form-group col-md-6">
<label for="category">Category</label>
<input name="categoryName" class="form-control" ng-model="categoryFilter">
<div class="list-group" ng-show="categoryFilter" >
<a ng-repeat="item in categorys" href="#" class="list-group-item">{{ item.name }}</a>
</div>
</div>
<button type="button" ng-click="categoryLoad()">asd</button>
</div>
Console Output
Computer Parts->Cooling Device->CPU Fan
The question is, ng-repeat work fine, there are two tags appead in the list,but {{ item.name }} can not read any data. I don't know why.The result #SnapShot, Please Help!

There isn't anything wrong with the code you posted. As Alexander pointed out, you probably don't need fromJson(), but that shouldn't be a problem either.
Here is a working plunker using your same code: https://plnkr.co/edit/GrYZZLjYc9mwCj7dAs5Z?p=preview
The only thing I changed was to pull the data from file since I don't have your service:
// url : 'hugo.dev/api/categorys/'+key,
url: 'data.json'
I guess this isn't necessarily an answer to your problem, but it proves that the code you posted works... your issue must be elsewhere.

scope.categorys must be initialize to array and remove fromJson
homeApp.controller('categoryMgmt',function($scope,$http){
$scope.categoryFilter = '';
// Default to array
$scope.categorys = [];
$scope.categoryLoad = function(){
var key = $scope.categoryFilter;
$http({
method : 'get',
url : 'hugo.dev/api/categorys/'+key,
}).then(function mySuccess(response){
// remove fromJson
$scope.categorys = response.data;
console.log($scope.categorys[0].name);
});
};

I think you should use $scope.category in the html code instead of {{item.category}}.

Angular $scope property gets overwritten when passed into function as an argument

I have an odd situation that I can't seem to figure out.
In Angular 1.4, I have a variable on the scope object used as a model to collect form data, $scope.videoModel. When a form is submitted, the model gets passed into a function, ng-submit="createVideo(videoModel), where a bunch of processing and regex happens. For example, extract a YouTube id.
Everything works as intended, but even though I am passing in the scope object as an argument (payload) to a function , certain attributes that are updated on the argument, also get updated on the $scope.
For eample, if I pass in $scope.videoModel.youtube into createVideo as payload, then extract the Youtube ID and assign it as payload.youtube = payload.youtube.match(regEx);, the $scope.videoModel.youtube property also gets updated. I can see this since the form value gets changed from a complete url to just the id.
It seems that passing in videoModel as an argument to a function does not create a copy to the variable, but instead references it. I can't seem to find anything about it. I believe I could simply create a new variable like this var tempVar = payload, but that seems wacky and I wonder if I'm doing something fundamentally incorrect.
Does videoModel get passed in a reference and not a copy?
Here is a sampling of the code clipped for brevity.
HTML
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">YouTube Url</label>
<div class="col-sm-10">
<input class="form-control" ng-class="{ 'has-error' : newvideo.youtube.$invalid && newvideo.youtube.$touched, 'is-valid': newvideo.youtube.$valid }" placeholder="Youtube Url" ng-model="videoModel.youtube" name="youtube" ng-pattern="youtubeValidateRegex" required>
<div class="help-block" ng-messages="newvideo.youtube.$error" ng-show="newvideo.youtube.$touched">
<p ng-message="required">YouTube Url is required.</p>
<p ng-message="pattern">Please input a valid YouTube Url.</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10" ng-if="!success">
<button class="btn btn-default" ng-click="newVideo(videoModel)" ng-disabled="newvideo.$invalid"> Publish</button>
</div>
</div>
JS
$scope.videoModel = {
youtube: 'https://www.youtube.com/watch?v=VkzVgiYUEIM',
vimeo: 'https://vimeo.com/193391290'
};
$scope.newVideo = function(payload) {
$scope.processing = true;
payload.user = $scope.user._id;
payload.filename = $scope.filename;
console.log(payload);
if(payload.type === 'vimeo') {
var matchVM = payload.vimeo.match($scope.vimeoExtractRegex);
console.log(matchVM);
if(matchVM) { //todo: helpers
payload.vimeo = matchVM[5];
} else {
return toastr.error('Unable to extract Vimeo ID');
}
}
if(payload.type === 'youtube') {
var matchYT = payload.youtube.match($scope.youtubeExtractRegex);
if (matchYT && matchYT[1].length === 11) { //todo: helpers
payload.youtube = matchYT[1];
} else {
return toastr.error('Unable to extract YouTube ID');
}
}
Videos.newVideo(payload)
.then(function(result) {
toastr.success('New video created.');
$scope.processing = false;
$scope.success = true;
$scope.result = result.data.result;
$scope.payload = result.data.payload; //I do assign part of the result to $scope.payload... but that still doesn't explain videoModel.youtube getting overwritten.
})
.catch(function(response) {
$scope.error = true;
toastr.error(response.data.message, response.data.status);
});
return $scope.success;
};

In JavaScript, object references are values.
Because of this, objects will behave like they are passed by reference:
If a function changes an object property, it changes the original value.
Changes to object properties are visible (reflected) outside the function.
http://www.w3schools.com/js/js_function_parameters.asp

I guess by now you might have understood what is pass by value and reference.
Here is a quick solution for you without changing much,you can use angular.copy() which will create new copy of your model into the payload variable and further you can do your rest of processing.
$scope.newVideo = function(videoModel) {
var payload = angular.copy(videoModel)
//do some processing here...
}
Hope this helps you !

Send ID over to angularjs - so the true content appears

I am storing an Id in a hidden field; it can also be another number such as 2, 3, 4 or 59. It must take the Id coming from the hidden field and must send it over to my opgaver.js file. where it will then download the content.
I'm stuck on how to send the Id to the opgaver.js file.
index.html
<div class="col-md-12" ng-app="Opgaver" ng-controller="OpgaverCheck">
<input type="hidden" value="1" ng-model="Id" />
<div ng-repeat="Value in Newslist">
</div>
</div>
Opgaver.js
var app = angular.module('Opgaver', []);
app.controller('OpgaverCheck', function ($scope, $http) {
//GET
var url = "/opgaver/kategori/"; //Id HERE//
$http.get(url).success( function(response) {
$scope.Newslist = response;
});
});
The problem is: How to get my Id over to opgaver.js so content can appear there.

Your HTML should be like
<input type="text" ng-init="Id='1'" ng-model="Id" />
And inside your controller:
$scope.$watch("Id", function() {
var url = "/opgaver/kategori/" + $scope.Id;
$http.get(url).success( function(response) {
$scope.Newslist = response;
});
});

I think you are missing the whole concept of angular and it's magic. Double binding you declare something in view in ng-module and you have access in the JavaScript withing $scope or the other hand you declare something in JavaScript within $scope and have in view in ng-module
From JS
$scope.myVariable = "I will meat you in view";
In Html
ng-module="myVariable" or {{myVariable}}
When you set ng-model="Id" in your field you had the access of that variable on scope.
In JS
var url = "/opgaver/kategori/" + $scope.Id;

AngularJS Push New Data into Specific JSON

I've got a JSON output that looks like this:
[{"id":"121","title":"Blog Title","content":"Blog content"}, "comments":[{"id":"12","content":"This is the comment."}]]
I'm retrieving the array through a controller in Angular:
app.controller('BlogController', function($scope, $http) {
var blog = this;
blog.posts = [];
$http.get('/process/getPost.php').success(function (data) {
blog.posts=data;
});
$scope.submitComment = function() {
blog.posts.concat($scope.formData);
$http({
method : 'POST',
url : '/process/insertComment.php',
data : $.param($scope.formData), // pass in data as strings
headers: {'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'}
})
.success(function(data) {
console.log(data);
$scope.formData.comment="";
});
};
})
Then displaying the information in my index.html file:
<div ng-controller="BlogController as blog" ng-cloak class='ng-cloak'>
<div ng-repeat="post in posts">
<div>{{post.title}}</div>
<div>{{post.content}}</div>
</div>
<div ng-repeat="comment in post.comments">
{{comment.content}}
</div>
<form name="commentform" ng-init="formData.id=post.id" novalidate>
<textarea ng-model="formData.comment" name="comment" required></textarea><br>
<input type="submit" ng-disabled="commentform.$invalid" value="Submit" ng-click="submitComment()">
</form>
</div>
Everything works as it should but I've been trying to have the submitComment() update comment.content inside JSON array where the blog id equals post.id and where the comment id equals comment.id.
I've tried doing blog.post.comment.push($scope.formData) but that didn't work. Any idea why it doesn't work and how to fix it?

That might help you http://jsbin.com/fatote/2/edit?html,js,output
$scope.submitComment = function(post) {
$http.post('/process/insertComment.php', post.formData)
.then(function(data) {
console.log(data);
$scope.formData.comment="";
}, function(){
alert("Can't post");
}).then(function(){
//finally as we know that post would work in that case
//find last comment id
var newCommentId = post.comments[post.comments.length-1].id +1;
//create new comment obj
var newComment = {
id:newCommentId,
content:post.formData.comment
};
//push comment in comments array
post.comments.push(newComment);
//clean form
post.formData.comment="";
});
};

Your line blog.posts.concat($scope.formData); isn't being assigned anywhere. Note that .concat is different from .sort in that you're creating a new array.
From MDN: "The concat() method returns a new array comprised of this array joined with other array(s) and/or value(s)."
Try changing your line to blog.posts = blog.posts.concat($scope.formData);
edit:
I'm guessing at your data format, more likely the change needed is:
var post = blog.posts[blogPostId]; // you'll need to determine blogPostId
post.comments = post.comments.concat($scope.formData);

Sending POST with hidden <input> value does't work in AngularJs

In my web app, There are many form on a page. I want to submit it with AngularJS for specific form.
In each of form, it need unique ID with Hidden Value to submit. But value="UNIQUE_ID" seen doesn't work in hidden input box in AngularJS.
My HTML
<div ng-app>
<div ng-controller="SearchCtrl">
<form class="well form-search">
<input type="text" ng-model="keywords" name="qaq_id" value="UNIQUE_ID">
<pre ng-model="result">
{{result}}
</pre>
<form>
</div>
</div>
This is js script
function SearchCtrl($scope, $http) {
$scope.url = 'qa/vote_up'; // The url of our search
// The function that will be executed on button click (ng-click="search()")
$scope.search = function() {
// Create the http post request
// the data holds the keywords
// The request is a JSON request.
$http.post($scope.url, { "data" : $scope.keywords}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
$scope.result = data; // Show result from server in our <pre></pre> element
})
.
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
}

It may be that the only reason your code is not working is that $scope.keywords is a simple variable (with a text value) instead of an Object, which is required - see http://docs.angularjs.org/api/ng.$http#Usage
As angularJS works with variables within its own scope - its models, a form becomes just a way to interact with those models, wich can be sent via whatever method you want.
You can have a hidden field, yes, but in angularJS it isn't even necessary. You only need that information to be defined in the controller itself - randomly generated for each instance, or received from some other source.. Or you can define it yourself, upon the loading of the controller, for instance.
So (and only for sake of clarity) if you define a formData variable within your formCtrl:
Your HTML:
<div ng-app>
<div ng-controller="SearchCtrl">
<form class="well form-search">
<input type="text" ng-model="formData.title">
<input type="textarea" ng-model="formData.body">
<button ng-click="sendData()">Send!</button>
</form>
<pre ng-model="result">
{{result}}
</pre>
</div>
</div>
And your controller:
function SearchCtrl($scope, $http) {
$scope.url = 'qa/vote_up'; // The url of our search
// there is a formData object for each instance of
// SearchCtrl, with an id defined randomly
// Code from http://stackoverflow.com/a/1349426/1794563
function makeid()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 5; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
$scope.formData = {
title: "",
text: ""
};
$scope.formData.id = makeid();
// The function that will be executed on button click (ng-click="sendData()")
$scope.sendData = function() {
// Create the http post request
// the data holds the keywords
// The request is a JSON request.
$http.post($scope.url, { "data" : $scope.formData}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
$scope.result = data; // Show result from server in our <pre></pre> element
})
.
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
}
Also: If you wanted to set the unique id on the html itself, you could add an input type="hidden" and set it's ng-model attribute to formData.id, and whichever value you set it to, the model would have it binded. using a hidden input won't work, as the value attribute doesn't update the angularJS Model assigned via ng-model. Use ng-init instead, to set up the value:
HTML with 2 forms:
<div ng-controller="SearchCtrl" ng-init="formData.id='FORM1'">
<form class="well form-search">
<input type="text" ng-model="formData.title">
<input type="textarea" ng-model="formData.body">
<button ng-click="sendData()">Send!</button>
</form>
</div>
<div ng-controller="SearchCtrl" ng-init="formData.id='FORM2'">
<form class="well form-search">
<input type="text" ng-model="formData.title">
<input type="textarea" ng-model="formData.body">
<button ng-click="sendData()">Send!</button>
</form>
</div>
You can add a hidden field, but it accomplishes nothing - the ng-init attribute does everything you need.