Utilizing AngularJS to Extract JSON Data from Gzipped Files Stored Locally via Ajax

Currently, I am attempting to retrieve and read a JSON file that is stored in data.gz using AngularJS's $http service. However, when I make the request, all I get back are strange symbols and characters as the response. My application is being run locally on a Node.js server. Is there something I am overlooking in this process?

$http({ 
  url: 'systemRes.10.gz',
  method: 'GET'
})
.then(function successCallback(response) {
  console.log(response.data); //displays unexpected characters
});

Click here to see the bizarre characters.

Given that the file is located in a local directory, if I try to set headers like below, it generates an error message: Refused to set unsafe header "Accept-Encoding"

headers: { 'Accept-Encoding': 'gzip' }

Answer №1

When attempting to access a local gz file, it is important to note that the Content-Encoding header is not provided. This header is necessary for the browser to unzip the file.

For further confirmation, you can refer to this similar issue discussed in a previous post -> Angular gunzip json file automatically : Refused to set unsafe header "Accept-Encoding"

If you plan to use your js file in production, it is recommended to serve the file using a proper file server like nginx or apache. However, if it is only for a one-time script, consider utilizing http-server. This tool offers the -g option, allowing you to serve the gzipped version of the file. For instance, if your file is named systemRes.10.json.gz, you can run http-server with the following commands:

$ npm i http-server
$ node_modules/.bin/http-server -g

To fetch the file using a JavaScript script (using fetch, but $http behavior should be similar), you can use the following code snippet:

fetch('http://localhost:8080/systemRes.10.json')
  .then(resp => resp.json())
  .then(json => console.log(json))
  .catch(e => console.error(e))

I have tested this approach and confirmed that it provides the necessary Content-Encoding header, ensuring success for your tests.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for incorporating "are you sure you want to delete" into Reactjs

I am currently working with Reactjs and Nextjs. I have a list of blogs and the functionality to delete any blog. However, I would like to display a confirmation message before deleting each item that says "Are you sure you want to delete this item?" How ...

When utilizing the React onclick function, it generates an increase in state values rather than modifying

I'm currently working on a function that changes the state property, "changedMarkup", when a button is clicked. Initialization constructor() { super(); this.state = { value: 0, changedMarkup: 0 }; } Render Function render() ...

Displaying a certain div when clicked within a loop using Vue.js and Laravel

I am currently facing an issue with displaying a hidden div upon click. The problem arises when using a loop to dynamically generate all the divs. Whenever I click the button, it shows all the divs instead of just one specific div on each click. I attempte ...

What rules should be followed in Python when it comes to using nested parentheses in functions?

Currently in the process of deleting my account from this platform, I am intentionally adding unnecessary content to this post. Please refrain from restoring the previous content. - Original Poster ...

Firefox has various problems, but it functions flawlessly in Chrome without any problems

I seem to be encountering various issues in Firefox that do not occur in Chrome. 1) I am facing a TypeError: response.body is null. 2) Another issue arises when uploading images, resulting in a TypeError: Argument 1 of FormData.constructor does not imple ...

Changing the variable within a promise in Angular 1

There seems to be an issue with updating a variable within the callback function of a promise, as shown in the code snippet below: $scope.showSelected= function (node){ var promise = $http.get("http://127.0.0.1:5000/getResource?ldpr="+nod ...

The ball refuses to fall into the designated boxes

I designed a basic webpage featuring 3 boxes that, when clicked on, trigger the dropping of a ball into them. Below is the code I used: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function popup (n) { ...

What is the process of transferring JavaScript code to an HTML file using webpack?

I am looking to display an HTML file with embedded CSS, fonts, and JS (not linked but the content is inside). I have the CSS and fonts sorted out, but I am struggling to find a solution for the JavaScript. My project is based on Node.js. ...

Tips for utilizing the npm jQuery module effectively

What is the best way to import jquery into multiple modules in node? Should I make it a global variable, or should I use require('jquery') in each module that needs it? I encountered an error while attempting to utilize the package. TypeError: ...

Executing a PHP script to initiate a ping transmission

I have a project to complete for my university involving the development of a simple application. However, I lack experience in this area and am unsure how to proceed. The objective is straightforward: I want to send ping requests to 50 IP addresses at t ...

Tips for implementing an ajax request in SharePoint 2013

Currently, I am working on developing a custom web part within SharePoint 2013 that requires an ajax call. Here is how I am attempting to achieve this: Within my CafeteriaWebPart.ascx, I have included the following code snippet: <%@ Assembly Name="$S ...

How can I add navigation dots to my slider?

I've been experimenting with my slider and I managed to make it slide automatically. However, the issue is that there is no option to manually navigate through the slides. I am looking to add navigation dots at the bottom so users can easily switch be ...

What is the process for integrating Firebase into $asyncValidators?

I am looking to implement a feature in my Firebase app that ensures usernames are unique. I want the user to be promptly informed if a username is already taken or not. I have been exploring AngularJS's ngModel as it offers an asyncValidator in its co ...

Troubleshooting MongoDB and Node.js: Issue with updating variables when inserting documents in a loop

As a newcomer to MongoDB, I'm facing a puzzling issue that has left me confused. In my dataset, I have an array of Employee objects structured like this: { "Name" : "Jack Jackson", "Title" : "Senior Derp Engineer", "Specialties" : [ "Kicki ...

Utilizing JQuery to Extract Data from a Nested JSON Array

My API is returning a JSON string with various values that I need to extract using JQuery. "[ ["West Baton Rouge test hello world", "1"], ["LSU Parking \u0026 Transportation Services", "2"], ["demokljafsk", "3"], ["latest", "19"], ...

What is the best way to set up the upcoming AJAX call?

When I hit the start button, it seems to be sending the request multiple times. How can I resolve this issue? Check out this GIF The request should only be sent once. Here is a jsfiddle link for reference $(document).ready(function () { $("#json ...

The JSON.stringify method in TypeScript/JavaScript does not align with the json-String parameter or request body in a Java controller

Currently, I am utilizing jdk 1.8 and have a rest endpoint in my Java controller: @PostMapping("/filters") public ResponseEntity<StatsDTO> listWithFilter( @RequestBody(required = false) String filter ) { try { ............... } } A test sn ...

Converting image bytes to base64 in React Native: A step-by-step guide

When requesting the product image from the backend, I want to show it to the user. The issue is: the API response contains a PNG image if the product has an image, but returns a (204 NO Content) if the product does not have an image. So, I need to display ...

Is it feasible to access reference images contained within a zip/tar file using html/javascript with the help of a library?

Although this question may appear similar to others, there is a key distinction that sets it apart. In search of request efficiency rather than space efficiency, lazy loading could be the solution. However, in situations where content needs to be quickly ...

Encountered an issue during deployment with Vercel: The command "npm run build" terminated with exit code 1 while deploying a Next.js web application

I've been working on a local Next.js app, but encountered an error when deploying it. Vercel Deployment Error: Command "npm run build" exited with 1 Here is the log from the build process: [08:26:17.892] Cloning github.com/Bossman556/TechM ...