JavaScript: Responding to the fetch response based on certain conditions

I am currently working with a fetch() request that can either return a zip file (blob) or a JSON object in case of an error. The existing code successfully handles the zip file by sending it to the user's Downloads folder. However, when a JSON response is returned, it unintentionally creates an empty or corrupt zip file.

Is there a way to conditionally process the Response object to prevent downloading a file if it's a JSON? Additionally, I want to save the Response.json() into a variable. How should I modify the code to achieve this?

await fetch(params)
.then(res => res.blob())
.then(blob => {
   let url = window.URL.createObjectURL(blob);
   let a = document.createElement('a');
   a.href = url;
   a.download = name + ".zip";
   document.body.appendChild(a); 
   a.click();
   a.remove();  //afterwards we remove the element
}).catch(err => console.error(err));
javascriptjsonconditional-statementsfetcharrow-functions

Answer №1

Big thanks to everyone for the helpful suggestions. With the guidance from @Barmer and @Bergi, I was able to revamp the API to neatly tuck away my error content within a header. Here's the solution that worked wonders for me:

fetch(params)
.then(function(response) {
   if (response.headers.get('X-Error') == 'False') {
      return response.blob()
         .then(blob => {
            let url = window.URL.createObjectURL(blob);
            let a = document.createElement('a');
            a.href = url;
            a.download = name + ".zip";
            document.body.appendChild(a);
            a.click();
            a.remove();
         }).catch(err => console.error(err))
   }
   //dealing with errors from backend
   console.log(response.headers.get('X-Error'))
})

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

Functionality issue with Datatables within JQuery-UI Tabs

I'm experiencing an issue with the compatibility of jQuery-UI tabs and Datatables. My goal is to create a scrollable table that displays information fetched from a database. Upon initially loading the page, the table appears like this. It looks like ...

javascriptjqueryjquery-uidatatables

Learn the process of seamlessly playing multiple video files in an HTML format

I am working with multiple video files and I need them to play continuously. The goal is to seamlessly transition from one video to the next without any interruptions on the screen. Below is my current code snippet: -HTML <button onclick="playVi ...

javascripthtml

Retrieving JavaScript return values in a C# WebBrowser control within a WPF application

I utilized JavaScript injection into WebBrowser control in C# (System.Windows.Controls.WebBrowser) to achieve, <C#> IHTMLDocument2 webdoc = (IHTMLDocument2)webBrowser1.Document; string var = File.ReadAllText("C:/.../Resources/script.txt"); object re ...

c#javascriptwpfwebbrowser-controlihtmldocument2

Error: VueJS mixins do not include the property definition

I've been trying to incorporate Mixins into my Vue.js code, but I've run into a few issues :/ Here's the current code for two test modules : ErrorBaseMixin.vue <script> import ErrorAlert from './ErrorAlert'; expor ...

javascriptvue.jsvuejs2

Error encountered: The zend_json library could not be located, resulting in a fatal

As I explore zend2, I am currently working on the zend skeleton. Within the Controller, I have added the following code: // Decode JSON objects as PHP objects $data = $request->getPost('album'); $result = Zend\Json\Json::decode($da ...

phpjsonzend-frameworkwamp

Access the value of a submitted form using jQuery, when there are multiple forms with identical class names

I've looked for a solution here but couldn't find one that meets my needs. I have multiple forms with the class name .sbt-form: <form class='sbt-form'> <input name='kord' val=1/> </form> <form class= ...

javascriptphpjquery

Determining the scrollWidth of a div with an absolutely positioned child div

Having some trouble determining the width of a div's content instead of the div itself. The typical solution would involve using Javascript's scrollWidth property. However, there is a complication in this case. Inside the div, another div is ab ...

javascriptjquery

When Vue.js is compiled, it removes a script tag

I'm currently learning Vue.js and encountering an issue that I can't seem to resolve. My project is utilizing Vue CLI 3, and within my code I am inserting a custom tag (not a component) in my template with a script tag inside it. <ra type="ou ...

javascriptvue.jsvue-clivue-cli-3

Passing a Typescript object as a parameter in a function call

modifications: { babelSetup?: TransformationModifier<babel.Configuration>, } = {} While examining some code in a React project, I came across the above snippet that is passed as an argument to a function. As far as I can tell, the modifications p ...

javascriptangulartypescriptobjectarguments

How can I modify the parent form element to only evaluate the expression at the text node, without affecting Angular interpolation?

Currently, I am in the process of developing an eCommerce platform and utilizing angular to construct a widget on product detail pages. Unfortunately, my control over the initial HTML rendered for the browser is quite limited. While most tasks related to m ...

javascripthtmlformstemplatesangularjs

Initiate a click on a radio button while also retaining the selected option when the page is

This is a unique question. In my scenario, there are two radio buttons: "radio1" and "radio2." I have successfully implemented the following actions individually: Automatically triggering a click on "radio1" upon page load. This ensures that the button ...

javascriptphpjqueryhtmlradio-button

What is causing my Fabric.js canvas to malfunction?

Here is the link to my JSFiddle project: http://jsfiddle.net/UTf87/ I am facing an issue where the rectangle I intended to display on my canvas is not showing up. Can anyone help me figure out why? HTML: <div id="CanvasContainer"> <canvas id ...

javascriptjquerycsscanvasfabricjs

Raspberry Pi encountering a TypeError with Node.js async parallel: "task is not a function" error

I am new to nodejs, so I kindly ask for your understanding if my questions seem simple. I am attempting to use nodejs on a Raspberry Pi 3 to control two motors, and I keep encountering the error message "async task is not a function." Despite searching fo ...

javascriptnode.jsraspberry-piraspberry-pi3

Executing a PHP function with an onclick event on an `<li>` tag via AJAX: What's the best approach?

Can you assist me in using AJAX to call a PHP function that communicates with an external server when the onclick event is triggered? <div class="container"> <h3 style=color:blue;>DETAILS </h3> <ul class="nav nav-pills" style="backgro ...

javascriptphpjqueryajax

How can I transform JSON data into PHP objects when using the POST method?

I have been working on setting up automatic email handling. To achieve this, I am utilizing an external service called Email2JSON which converts emails into JSON/text format. This conversion process is triggered via a webhook URL on my website. My main ch ...

phpjsonemailpostsmtp

Utilizing AJAX for XML data parsing

I need help with formatting XML data into a table. The code I've written isn't working as expected. The XML data is structured in branches, causing it to not display correctly. Can someone assist me in fixing this issue? <!DOCTYPE html> &l ...

javascripthtmlajaxxmlxml-parsing

When using React, the event.target method may unexpectedly return the innerText of a previously clicked element instead of the intended element that was

I have implemented a drop-down menu that triggers an event handler to return the selected option when it is clicked. Upon clicking on an option, I retrieve the inner text of that option using the event. The code snippet looks like this: event.target.inner ...

javascriptreactjs

Tips for repositioning a node element as the first child within its parent element

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='parent'> <div>B</div> <div>C</div> <div onload='this.parentNode.prependChild();'>A&l ...

javascriptjquery

Pull in content or data from a separate page by leveraging AJAX

Hello, I'm just starting out in programming and I could really use some help with this issue. index.html <button id="press">Click here</button> <div id="show_image"> </div> <br> <div id="appended_area"></div&g ...

javascriptjqueryhtmlajax

Fetching a Django view using an AJAX call and extracting the task_id from a Celery task

I have been facing a challenge trying to display data from a celery task in a separate window. My expertise in JavaScript and AJAX is limited, which is where I am encountering issues. Once a view is executed, the celery task commences and the subsequent HT ...

javascriptajaxdjangocelerydjango-urls