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

Uncovering design elements from Material UI components

The AppBar component applies certain styles to children of specific types, but only works on direct children. <AppBar title="first" iconElementRight={ <FlatButton label="first" /> }/> <AppBar title="second" iconElementRight={ <di ...

What is the best way to find the maximum and minimum values within a JSON object that is populated from user inputs using only JavaScript?

Here is a simple form that stores data at the following link: https://jsfiddle.net/andresmcio/vLp84acv/ var _newStudent = { "code": code, "names": names, "grade": grades, }; I'm struggling to retrieve the highest and lowe ...

Issues with vue-moment.js in Vue

I'm struggling with incorporating vue-moment or moment.js into a .vue file to work with dates. I want to be able to manipulate a date in the Vue method to calculate the timespan between a past and current time, updating it dynamically. After searching ...

Prevent Repeated Data Input in an Array using JavaScript

I am facing an issue where I need to ensure that the values being inserted are not repeated when performing a push operation. Below is the snippet of code in question: addAddress: function() { this.insertAddresses.Address = this.address_addres ...

The performance of the Ajax Jquery remove function leaves something to be desired

My table has items with a delete button for each row. To achieve this, I created the following Ajax function: $(document).ready(function() { $(".destroy-device").click(function(e) { e.preventDefault(); var id = $(this).attr("data-id"); $.aj ...

Display the initial JSON data object without the need to choose a link with the help of AngularJS

I have successfully built a webpage that displays JSON data based on the selected link. However, I am facing an issue where I need to show the first JSON data object before selecting any link (initially). Check out the Plunker demo here: http://embed.plnk ...

Generating parameters on the fly from an array using jQuery

After implementing a successful plugin on my website, I am now looking to enhance it further by defining state-specific styles dynamically. The current setup allows for passing parameters for specific states, as shown below: $('#map').usmap({ ...

jsp fullcalendar select not functioning properly

The code snippet for the select: function within fullcalendar is as follows: select: function(start, end, jsEvent, view) { if (start.isBefore(moment())) { $('#calendar').fullCalendar('unselect'); return false; } else { //ajax Cal ...

Regularly save PHP+MySQL data every few minutes

My website (built with PHP) includes a text editor that I would like to automatically save every few minutes in my MySQL database. I am seeking feedback from you on how to accomplish this task. (This feature is commonly seen on the Google Docs platform.) ...

Uncovering the Secrets of Retrieving Nested Objects with MongoDB and Mongoose

I have a collection of documents stored in my mongodb database, each structured like this: { "current" : { "aksd" : "5555", "BullevardBoh" : "123" }, "history" : { "1" : { "deleted" : false, ...

What is the best approach to managing a 204 status in Typescript in conjunction with the Fetch API

Struggling to handle a 204 status response in my post request using fetch and typescript. I've attempted to return a promise with a null value, but it's not working as expected. postRequest = async <T>(url: string, body: any): Promise ...

Retrieving the AJAX response to dynamically refresh the table with updated data

I'm a bit confused about how the server response is handled when making an AJAX request. I want to update a table by clearing it and inserting new data. The code snippet below shows how the controller responds to an AJAX request when 'triples&ap ...

When a user clicks on an anchor tag, the corresponding value of the checked item is then returned

I have 3 sets of radio buttons. When a specific anchor with the "round" class is clicked, two actions should occur: The associated set of radio buttons needs to become visible The value of the checked input for that element should be returned. I am ...

Struggling with React Js and need some assistance?

I'm completely new to React Js and encountering issues with my code. Here's what I have: Here is the content of my script file named Main.jsx. This file gets compiled by React, and the output is stored in main.js under the 'dist' folde ...

Mastering the art of tab scrolling in VueJS using Bootstrap-vue

Currently, I am working on a VueJS project that utilizes bootstrap-vue. The issue I am facing is that when rendering a list of tabs, it exceeds the width of its parent container. To address this problem, I aim to implement a solution involving a set of but ...

jQuery Droppable not refreshing with new changes

Hey there, Stackoverflow! I'm currently working on a website that requires drag and drop functionality after an AJAX request returns valid data. The code snippet below handles this task seamlessly: var allowDrop = ($json[0][0]); if(allowDrop === "tr ...

Vue 3 gracefully handles errors by displaying an alternative component

I am currently developing a rendering library for my Vue 3 + Vite project. Essentially, I have a JSON array of products which I pass to a special <Render :products /> component. This Render component reads all the JSON products and converts them in ...

Using Geolocation in HTML5 and JavaScript

Currently, I am working on my debut mobile web application and have successfully integrated Google Maps into it using Geolocation JavaScript API version 3. Now, I am looking to add a button that, when clicked by the user, centers the map on my location o ...

Troubleshooting the issue of new values not being posted in jqGrid

Currently, I am facing an issue while implementing jqgrid using the struts2-jqgrid-plugin. The problem arises when I update the value of a hidden field within the form element. Despite changing the values, they do not seem to reflect when I submit these hi ...

Adjust the Pivot Point of a GLTF Model in ThreeJS Manually

Hey there, I have a GLTF model that I successfully loaded into my ThreeJS scene by using the code snippet below: gltfLoader.load('assets/models/coin/scene.gltf', (gltf) => { const root = gltf.scene; gltf.scene.traverse(functio ...