Download fails for large json string -Angular JS

Question

I've written an application in angular for file download, the application is working fine only for small json string, but comes to large string the download fails. Can anyone please tell me some solution for this.

I'm using REST webservice

 var json = _.getJson(); // here json value object be received from a script function 
 var myURL = 'rest/myMethod?jsonValue=' + JSON.stringify(json);
  _.downloadFile(myURL);

The downloadFile method :

downloadFile: function(URL)
{
    $.fileDownload(URL).done(function(e, response)
    {
      console.log('download success');
    }).fail(function(e, response)
    {
      console.log('fail');
    });
}

Are you attaching the JSON to the URL? URL's only work up to about 2000 characters (give or take, depends on browser). — Jorg
– Jorg, Commented Mar 14, 2014 at 5:05
@Jorg so what will i do to send such big json string to the server — Alex Man
– Alex Man, Commented Mar 14, 2014 at 5:08
Send it as POST data generally. Angular's $http injector has something for that, too — Jorg
– Jorg, Commented Mar 14, 2014 at 5:09

Jorg · Accepted Answer · 2014-03-14 05:15:18Z

1

As per the comments, here's how to POST using Angular. I can only give you an example here. Header might depend on the angular version etc etc.

function TestController($scope, $http) {
    $http({
        url: 'yourwebsite',
        method: "POST",
        data: json, //this is your json data string
        headers: {
           'Content-type': 'application/json'
        }
    }).success(function (data, status, headers, config) {
        //upload succesfull. maybe update scope with a message?
    }).error(function (data, status, headers, config) {
        //upload failed
    });

}

answered Mar 14, 2014 at 5:15

Jorg

7,2704 gold badges48 silver badges68 bronze badges

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

6 Comments

Alex Man Over a year ago

then how do i download the file using $.fileDownload

Jorg Over a year ago

You can't download a url. your comments mention "sending to the server" so that's what I showed. I'm not entirely sure what your xhr request is trying to achieve. Are you sending it to a server in order to generate a file?

Alex Man Over a year ago

actually i'm sending the json to the server and the server will generate an excel based on the json data and i will download it through $.fileDownload

Jorg Over a year ago

You could send a URL back containing the location of the excel file, and use $http again in the success function or maybe send the whole excel back as binary, but that's a separate question alltogether. You might find an answer in here: stackoverflow.com/questions/3599670/…. The accepted answer looks to be demo'ing an excel file.

Jorg Over a year ago

which server side language?

|

Community · Accepted Answer · 2017-05-23 10:26:49Z

1

I see two potential problems:

The request URL might be too long (see: this discussion)
The stringified JSON contains characters not valid in a URL

If the URL is too long, you'd have to move the jsonValue into the body of your request rather than passing it as a URL parameter.

To address the second problem, you need to URI encode the stringified value:

var myURL = 'rest/myMethod?jsonValue=' + encodeURIComponent( JSON.stringify(json) );

BTW, looking at tha fail parameters should indicate why the request failed in the first place.

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Mar 14, 2014 at 5:14

Stepan Riha

1,72414 silver badges12 bronze badges

1 Comment

maryoush Over a year ago

This unfortunately doesn't work for bigger JSON files

superxp1412 · Accepted Answer · 2015-07-31 10:18:39Z

Here is an example for using $http of Angular for sending a post request and download a XML file from the server.

$http({
            url: '$your_URL_here$', // you should replace $your_URL_here$ by your own url
            method: 'POST',
            responseType: 'arraybuffer',
            data: postJson, //***this is the request json data for post***
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            }
        }).success(function(data){
                var blob = new Blob([data], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                });                
                saveAs(blob, $fileName$);// you should replace $fileName$ by your own fileName
            }
        }).error(function(data){
            //Some error handling method here
        });

Please note that you should import the FileSaver.js to save the file from 'arraybuffer' responseType.

Collectives™ on Stack Overflow

Download fails for large json string -Angular JS

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related