Spring MVC with AngularJS get data - angularjs

I have an object I can access in the .jsp file using the syntax ${items} which is actually just a JSTL JSON object from a GET mapped to a page called items. Is there a way to get and parse this data using AngularJS and have it ng-repeat?

You could render the object as a JavaScript variable assignment in a script block on the page. Then access it via said variable in JavaScript. Assuming ${items} renders as JSON:
<script>
var myGlobalData = ${items};
</script>

Related

Drupal Services JSON response format processing with Angularjs

I have a Drupal web service that returns a JSON response in the following format. I can easily access top level notes e.g. title. However, I also need to access the value under body. I can get body.und but not body.und.value. How do I do that? Also the HTML tags are showing as text and I can see all the slashes getting printing in my Angular View.
Update: I have been able to get the the value of the body by using $scope.body
= myresponse.data.body.und[0].value;
Now the only problem is how to process HTML in the body. My Angular framework which is Ionic is showing all the HTML tags e.g. p li etc instead of formatting them.
{"vid":"37","uid":"1","title":"Terms of Use","log":"","status":"1","comment":"1","promote":"0","sticky":"0","nid":"37","type":"page","language":"und","created":"1395878580","changed":"1501982359","tnid":"0","translate":"0","revision_timestamp":"1501982359","revision_uid":"1","body":{"und":[{"value":"THESE TERMS OF USE (\"TOU\") ARE A LEGAL CONTRACT BETWEEN YOU (\"USER\") AND
$scope.body = myresponse.data.body.und[0].value; helped me get access to the value of the body of the node.
ng-bind-html="body" helped me get access to the body of the HTML.

Getting [Object,Object] in angular JS when reading List of Objects

I am trying to read the data from list of Objects where in backend call I am getting proper JSON format but when calling from angular js using response.data getting [Object,Object] as a list. I am getting the data as response.data[0].id but I need to use the data to a $scope variable with data to use further.
[{id : '1',name:'Test'},{id:'2',name'Test1'}]
I need to get the same JSON object in angular as same as backend. I am new to AngularJS. Please let me know how I can proceed with this without pushing to any other variable.

not able to dynamically update the view when data is changing

I have a set of files in a server which I am looping though and constructing a JSOn and saving it as a separate file. I am using python for this. Works quite well. Now the scope is the number of files in the directory will increase/ change throughout the day..and I am running the script every 10 min to rewrite the json...the file name stays same and i am calling it in a single page html document using angular.js..Again fairly simple...But now I am having problem when the JSON is changing I am not seeing any change on the page unless I reload the page. Could I do something about this?
With angular I am using
$http('something.json').success(callback function with some argument data)
and in the markup something like
<ul>
<li ng-repeat="x in data">{{x.id}}</li>
</ul>
Your call to $http is one-time operation which happens after page load like this:
$http('something.json').success(function(data){
$scope.data = data;
});
angular is kickstarted
ng-controller containing $http request is evaluated and request for 'something.json' is sent
...
when your json arrives, your success function is called with data from json
view (html template) is updated with new data
Angular keeps your model (eg $scope.data) and UI (expressions in template) up to date, but it doesn't update external resources.
If you want to periodically poll for changes in 'something.json'
you can use $timeout service as suggested in JaKXz's comment.

Web app attempting to retrieve data before AngularJS is loaded

I am adding images to divs with ng-repeat which works fine. The image location data is nested in an array. The images show up as expected. My partial looks like:
<div class="image-wrapper">
<img src={{item.user.img_src}}>
</div>
However, it appears the page is to attempting to retrieve the string before AngularJS is loaded. I get the following console warning:
GET http://localhost:3000/%7B%7Bitem.user.img_src%7D%7D 404 (Not Found)
How do I prevent this?
The src attribute is buggy when Angular markup is used. Use ngSrc instead of src.
Thus, <img ng-src="{{item.user.img_src}}">
When the browser first loads the page it sees your src exactly as you wrote it. It's not until Angular loads and processes the page that it updates your dynamic source. Neither of these is what you want to have happen (especially since you could accidentally create the bad empty src attribute). Instead, use ngSrc directive so that no src will be set until Angular has evaluated your expression:
http://docs.angularjs.org/api/ng/directive/ngSrc

Load external page elements into an array using jquery

How can I load a collection of page elements (EG. <div class="myClass">) from an external page into an array please?
Your question is very vague, but assuming you are using jQuery.get to fire an AJAX request to a remote page:
$.get("somePage.html", function(data) {
var elems = $(data).filter(".myClass").get();
});
filter is used to reduce the elements of data to those matching the selector. get returns a normal array (rather than a jQuery object).
You cannot load elements from an external page in you script because that would be against the same origin policy. What you could do is using JSONP where I relate to this question: can jquery ajax call external webservice?

Resources