Download json using Angularjs

Question

I have webapi returning me data and that data i need to download in a txt file. I have done it using below code and i am getting result as desired. I am somehow looking for a better approach .Is there any angular way to do this ?

$scope.downloadResponseAsInfoFile = function (response) {
    var link = document.createElement("a");
    link.download = "info.txt";
    var data = "text/json;charset=utf-8," + encodeURIComponent(response);
    link.href = "data:" + data;
    link.click();
};

how can i handle exception in case i dont get response from server.

What calls your function? Where does response come from? Presumably you'd handle HTTP errors there — Phil
– Phil, Commented Dec 5, 2016 at 4:37
@Phil its like this var response = myService.downloaInfo(id, name); if (response != null && response != "") { $scope.downloadResponseAsInfoFile (response) } — pankaj
– pankaj, Commented Dec 5, 2016 at 6:16

eigenharsha · Accepted Answer · 2016-12-05 05:52:42Z

5

In downloadResponseAsInfoFile, if response is coming through http call than you need to handle exception according to response.

$scope.downloadResponseAsInfoFile = function (response) {
    // if this response is coming through http call than make condition according to http response.statusCode
    //check response is undefined, null or empty
    if(typeof response == 'undefined' || response == null || response == "")
        return ;

    var link = document.createElement("a");
    link.download = "info.txt";
    var data = "text/json;charset=utf-8," + encodeURIComponent(response);
    link.href = "data:" + data;
    link.click();
};

Angular Way: article

edited Dec 5, 2016 at 5:52

answered Dec 5, 2016 at 5:20

eigenharsha

2,2411 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vibhu · Accepted Answer · 2016-12-05 08:48:27Z

1

You can use angular's $http provider for fetching data from the web api See documentation here : - https://docs.angularjs.org/api/ng/service/$http

$http.get(url).then(function (response) {
var link = document.createElement("a");
link.download = "info.txt";
var data = "text/json;charset=utf-8," + encodeURIComponent(response);
link.href = "data:" + data;
link.click();
};

edited Dec 5, 2016 at 8:48

answered Dec 5, 2016 at 6:07

Vibhu

5461 gold badge4 silver badges11 bronze badges

3 Comments

Vibhu Over a year ago

slight addition to the above code:- $http.get(url).then(function successCallback(response) { //yourcode }, function errorCallback(response) { //errmsg });

Bhavesh Odedra Over a year ago

Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others

Vibhu Over a year ago

@Odera thanks for the tip , I have appropriately provided additional info to make the answer helpful.

Gautham · Accepted Answer · 2017-09-06 09:37:00Z

0

You could try using native JavaScript API - Blob and FileSaver.js saveAs No need to deal with any HTML elements at all -

var data = {
    key: 'value'
};
var fileName = 'myData.json';

// Create a blob of the data
var fileToSave = new Blob([JSON.stringify(data)], {
    type: 'application/json',
    name: fileName
});

// Save the file
saveAs(fileToSave, fileName);

Just paste the above code in your controller's callback.

edited Sep 6, 2017 at 9:37

answered Aug 9, 2017 at 15:25

Gautham

8869 silver badges16 bronze badges

Collectives™ on Stack Overflow

Download json using Angularjs

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related