$http in Angular JS – Sibeesh Passion https://sibeeshpassion.com My passion towards life Mon, 10 Jun 2019 17:22:04 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png $http in Angular JS – Sibeesh Passion https://sibeeshpassion.com 32 32 Load XML And Show As li In Angular JS https://sibeeshpassion.com/load-xml-and-show-as-li-in-angular-js/ https://sibeeshpassion.com/load-xml-and-show-as-li-in-angular-js/#disqus_thread Wed, 04 Nov 2015 05:02:24 +0000 http://sibeecst_passion.com/?p=10907 In this post we will see how we can load an XML file and show as li using ng-repeat in Angular JS. As you all know Angular JS is a JavaScript framework for developing applications. So basically Angular JS expects the response in the form of JSON. Hence it is recommended to return the data in JSON format before you start to work on the data. Here in this post we will load a local XML file using Angular JS $http service, and we will convert the same XML file to JSON. Once it is converted, we will loop through the JSON and show it as li using ng-repeat. If you are new to Angular JS, please read here: Angular JS. I hope you will like this article.

Background

I have already posted an article related to $http service in Angular JS, you can see here: $http Service In Angular JS

To convert your XML file to JSON, I recommend you to read here: XML to JSON In Angular JS

Source Code

Please download the source code here: XML to Li Source Code

Using the code

Create an html page first.

[html]
<!DOCTYPE html>
<html>
<head>
<title>Load XML And Show As li In Angular JS – sibeeshpassion </title>
</head>
<body>
</body>
</html>
[/html]

Now add the needed reference as follows.

[js]
<script src="jquery-2.1.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="xml2json.js"></script>
[/js]

Have you noticed that I have added xml2json.js file? This is the file which is doing the conversion part. You can always download the file from https://code.google.com/p/x2js/

So if you read and implement as explained in my article on converting XML file to JSON in Angular JS, Your page will be looking as follows.

[html]
<!DOCTYPE html>
<html>
<head>
<title>Convert XML to JSON In Angular JS – sibeeshpassion </title>
<script src="jquery-2.1.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="xml2json.js"></script>
</head>
<body>
<div ng-app="httpApp" ng-controller="httpController">
</div>
<script>
var app = angular.module(‘httpApp’, []);
app.controller(‘httpController’, function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.success(function (response) {
console.log(response);
});
});
</script>
</body>
</html>
[/html]

So we have loaded our XML and converted the it to the JSON. Now we need to show this JSON response as li using ng-repeat in Angular JS. Are you ready?

For that please change your ng-app directive as follows.

[html]
<div ng-app="httpApp" ng-controller="httpController">
<ul>
<li ng-repeat="det in details"><a href="{{det.loc }}">{{det.loc }}</a>
</li>
</ul>
</div>
[/html]

And we can change our Angular script implementation as below.

[js]
<script>
var app = angular.module(‘httpApp’, []);
app.controller(‘httpController’, function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.success(function (response) {
$scope.details = response.urlset.url;
console.log(response);
});
});
</script>
[/js]

So we are assigning response.urlset.url to the $scope.details so that we can simply loop through using ng-repeat as
det in details.

If you download the sitemap.xml file from the source code given you can get to know the XML structure of the data. Depends on the data structure we need to assign the response to the $scope.

I guess everything is done, now we can see the output.

Output

Load XML And Show As li In Angular JS

Load XML And Show As li In Angular JS

That’s all we have done everything. Happy coding!.

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>Load XML And Show As li In Angular JS – sibeeshpassion </title>
<script src="jquery-2.1.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="xml2json.js"></script>
</head>
<body>
<div ng-app="httpApp" ng-controller="httpController">
<ul>
<li ng-repeat="det in details"><a href="{{det.loc }}">{{det.loc }}</a>
</li>
</ul>
</div>
<script>
var app = angular.module(‘httpApp’, []);
app.controller(‘httpController’, function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.success(function (response) {
$scope.details = response.urlset.url;
console.log(response);
});
});
</script>
</body>
</html>
[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

]]> https://sibeeshpassion.com/load-xml-and-show-as-li-in-angular-js/feed/ 4 Convert XML to JSON In Angular JS https://sibeeshpassion.com/convert-xml-to-json-in-angular-js/ https://sibeeshpassion.com/convert-xml-to-json-in-angular-js/#disqus_thread Tue, 03 Nov 2015 11:41:16 +0000 http://sibeecst_passion.com/?p=10903 [toc]

Introduction

In this post we will see how we can convert an XML file to JSON in Angular JS. As you all know Angular JS is a JavaScript framework for developing applications. So basically Angular JS expects the response in the form of JSON. Hence it is recommended to return the data in JSON format before you start to work on the data. Here in this post we will load a local XML file using Angular JS $http service, and we will convert the same XML file to JSON. If you are new to Angular JS, please read here: Angular JS. I hope you will like this article.

Background

I have already posted an article related to $http service in Angular JS, you can see here: $http Service In Angular JS

Source Code

Please download the source code here: XML to JSON Source Code

You can also fork this repository from GitHub. 

Using the code

Create an html page first.

Now add the needed reference as follows.

Have you noticed that I have added xml2json.js file? This is the file which is doing the conversion part. You can always download the file from https://code.google.com/p/x2js/

Now create a controller and app directive as follows.

Next thing we need to do is adding the service. You can add the $http service as follows.

Here httpApp is our app and httpController is our controller. And we are transforming our response using the function transformResponse.

Transforming Request and Response

In Angular JS, requests can be transformed using a function called transformRequest and if it is a response we can transform by function transformResponse. These functions returns the transformed values.

Here in our example we are using the transformResponse function as follows.

The x2js.xml_str2json(cnv) will return the json object and we return aftCnv from the function transformResponse. Sounds good? Once we are done everything, we are just write the JSON object in the browser console, so that we can see the object.

Output

Convert XML To JSON In Angular JS
Convert XML To JSON In Angular JS

That’s all we have done everything. Happy coding!.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

]]> https://sibeeshpassion.com/convert-xml-to-json-in-angular-js/feed/ 18 Learning AngularJS: $http https://sibeeshpassion.com/learning-angularjs-http/ https://sibeeshpassion.com/learning-angularjs-http/#disqus_thread Sun, 29 Mar 2015 20:18:58 +0000 https://sibeeshpassion.com/?p=1561 Hi all, I hope you are fine. Today we will learn about AngularJS Basic $http. If you are new to AngularJS then I suggest you read the Basics of AngularJS.

Now with the assumption that you have read my previous article, we are starting.

This article explains $http in Angular JS.

Using the code

$http is a service for reading data from web services. It uses the get (service URL) method for the process. We will see that with an example.
[html]
<div ng-app="httpApp" ng-controller="httpController">
<ul>
<li ng-repeat="det in details">{{ det.name + ‘, ‘ + det.countrycode }}
</li>
</ul>
</div>
[/html]

In the preceding code, we have an Angular app httpApp and a controller httpController. Now we need to create our controller part, right?
[js]
< script >
var app = angular.module(‘httpApp’, []);
app.controller(‘httpController’, function($scope, $http) {
$http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=- 22.4&west=55.2&lang=de&username=demo")
.success(function(response) {
$scope.details = response.geonames;
});
}); < /script>
[/js]

In the preceding code we are using the $http.get() method of Angular. In the URL part we have given a sample web service URL of geo data. You can get these free web services here.

So in the success part we are returning the response of the web service.

Now if you write the response.geonames in the success in the browser console as follows, you will get the array as shown below.

console.log(response.geonames);

Learning AngularJS http

Learning AngularJS http


Once it is returned we are showing the response data to the UI using the repeat directive.

So that is all.

Output

Learning AngularJS http

Learning AngularJS http

Now apply the CSS

Add the following CSS to your page.
[css]
< style > li {
border: 1px solid#ccc;
border – right: none;
border – left: none;
padding: 2px;
text – align: center;
list – style: none;
} < /style>
[/css]

Once you add the CSS you will get output as follows.

Learning AngularJS http

Learning AngularJS http

Cool. We did it.

Complete HTML
[html]
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular $http – sibeeshpassion </title>
<style>
li {
border: 1px solid #ccc;
border-right: none;
border-left: none;
padding: 2px;
text-align: center;
list-style:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="httpApp" ng-controller="httpController">
<ul>
<li ng-repeat="det in details">{{ det.name + ‘, ‘ + det.countrycode }} </li>
</ul>
</div>
<script>
var app = angular.module(‘httpApp’, []);
app.controller(‘httpController’, function ($scope, $http) {
$http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=sibeeshvenu")
.success(function (response) {
$scope.details = response.geonames;
console.log(response.geonames);
});
});
</script>
</body>
</html>
[/html]

Conclusion

Now that is all for the day, I will return with another set of items in Angular JS soon. I hope you liked this article. Please provide your valuable suggestions.

Kindest Regards
Sibeesh venu

]]> https://sibeeshpassion.com/learning-angularjs-http/feed/ 1