Using JavaScript to pass several values to linked "then" methods

When I have a fetch call with multiple then functions, I encounter an issue. Specifically, in one of the then functions, I am trying to pass two returned variables to the next then function, but it does not seem to work as expected.

.then(text => { 
  let content = new DOMParser().parseFromString(text, "text/html"); 
  let main = content.querySelector('main').innerHTML; 
  let title = content.querySelector('title').innerHTML; 

  function retrieveHtml() { 
    return { 
      main, title 
    }
  } 
}) 
.then(retrieveHtml => { 
  let parsedHtml = retrieveHtml(); 
  document.querySelector('main').innerHTML = parsedHtml.main; 
  document.title = parsedHtml.title; 
})    

Encountering the error "is not a function error" when accessing the retrieveHtml() function within the last then(). Any tips would be greatly appreciated!

Answer №1

To access the elements "title" and "main" in another "then" method, you can adjust the code as shown below:

.then(text => { 
  let data = new DOMParser().parseFromString(text, "text/html"); 
  let mainContent = data.querySelector('main').innerHTML; 
  let pageTitle = data.querySelector('title').innerHTML; 

  return { 
    mainContent, pageTitle 
  }
}) 
.then(updatedHtml => { 
  document.querySelector('main').innerHTML = updatedHtml.mainContent; 
  document.title = updatedHtml.pageTitle; 
})

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

Error with hyperlinks preventing redirection when clicking on the menu

$(document).ready(function () { $('.mobile-nav-button').on('click', function() { $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(1)" ).toggleClass( "mobile-nav-button__line--1"); $( ".mobile-nav ...

Discover the elements with Protractor, cycle through the total number of located elements, and proceed to press the button

Trying to figure out how to click a button multiple times based on the number of elements found with a specific classname. If there are 3 elements found, the button should be clicked 3 times. The current approach: (Update at the bottom) The total count ...

invoking a JavaScript function within an if statement

i'm working with two javascript functions 1. function ValidateGVEducation() { var grid = document.getElementById('<%= gvEducation.ClientID %>'); var ddlQuali, ddlUni, ddlInsti, ddlAreaS, ddlStat; ...

Order of Loading WebResources in ScriptControl

As I work on integrating a new control into a project that already contains ASP.Net controls, I am faced with the challenge of managing multiple .Net classes and JavaScript files. Each control consists of a .NET class (inheriting ScriptControl) along with ...

Integrate a JSON file into d3.js using the d3.layout.partition function

I found this interesting resource at Instead of the usual method using d3.json("flare.json", function(root) { I'd like to know how to use the JSON data directly within the HTML file. For instance, if I have: var json = [{ "name": "flare", " ...

Convert a given string into an array to enable the manipulation of individual words

I am currently working on extracting an array from a given input string generated in //PROGRAM 1 for manipulation purposes. While I have found abundant resources on how to manipulate an existing array, my challenge lies in creating the array in the first p ...

Error encountered: The specified callback function is not recognized in Node.js

I've been diving into learning nodejs and encountered this issue: TypeError: callback is not a function Here is the snippet from my server.js file where the error occurs: var mongoose = require('mongoose'); mongoose.createConnection(' ...

Switching from a basic material to a complex multi-material in three.js during runtime

r65 Hello, I am trying to switch from using a simple material to multi-material at runtime, but I am facing some difficulties. Could it be that I am overlooking something obvious? Below is the test code I am working with (you can also view it on jsfiddl ...

Understanding the functionality of AngularJS UI-Router

I'm trying to wrap my head around the purpose of the parent attribute within the state directive in UI-Router. Let's consider this code snippet: $stateProvider .state('base', { abstract: true, url: '', templateU ...

Showcasing various images simultaneously within a table cell with the power of JavaScript

For my game project, I need to create an 8x8 table where multiple coins are displayed simultaneously for 3000 milliseconds at random positions. When the "Start" button is clicked, the coin display should continue for 1 minute. However, I am facing an issue ...

Is there a way to tally the checked mat-radio-buttons in Angular?

I am seeking a way to determine the number of radio buttons checked in a form so I can save that number and transfer it to a progress bar. <mat-radio-group name="clientID" [(ngModel)]="model.clientID"> <mat-radio-button *ngFor="let n of CONST ...

Encountering difficulties with properly storing an array in MongoDB using Node.js and Mongoose

Can you point me in the right direction on how to properly store an array of data in mongodb using node/mongoose? I'm currently facing an issue where all my data is being saved as the first value in the array. Here's a snippet of my code: const ...

New update in Next.js version 13.4 brings a modification to routing system

I'm currently working with Next.js 13.4 and an app directory. I'm trying to implement a centrally located loader that will show whenever there is a route change anywhere within the app. Since routes/navigation don't have event listeners, I&a ...

Tips for circumventing brackets in an ajax call?

My goal is to initiate a GET request with just one parameter from an input form using AJAX and jQuery.ajax(). In an attempt to simplify the process, instead of data: $("#the_form").serialize() I opted to explicitly pass the value of the input: function ...

Ways to update a specific div upon clicking an image

Is there a way to refresh a div using an image click? I have an image with the id 'sellhide' and another div with the id 'sellChart'. Below is the code: <div class="col-xs-12 col-lg-6 col-sm-6 col-md-6 index_table_three" id="sellCha ...

Transforming navigation bar icons to active using Django and JavaScript

I recently created a navbar using Bootstrap 4 and I'm looking for a more efficient way to toggle the active icon on the current page. Here's my current setup: <li class="nav-item"><a href="/" id="A" {% if request.p ...

Is there a way for me to trigger the event multiple times?

First of all, thank you for your input - this is my initial attempt at solving this issue. Currently, I am facing a problem where the buttons only work once. Ideally, I want them to be functional every time because users will frequently change search terms ...

Include an extra "array" in the complete AJAX POST data when submitting through x-editable

Struggling to include an array of objects in the post data for a group of bootstrap x-editable on my JSP page. The data is retrieved from a table and an array of objects is constructed. This array needs to be appended to the list of other values posted by ...

How to dynamically reduce the number of columns in a textarea using jQuery according to its content

Does anyone know how to make a textarea shrinkwrap the text inside on blur? The default number of columns is 10 or 15 and I want the textarea to adjust its width based on the text content. I have tried the following code: $('textarea').on(&apos ...

Is it possible that the Facebook like button is not functioning properly due to being initialized with jQuery?

I'm currently in the process of implementing the Facebook SDK on my website by following this step-by-step guide. After checking the console, I am pleased to report that there are no errors present. $(document).ready(function(){ $.ajaxSetup({ cache ...