Error - The function of spread syntax necessitates an iterable item with a Symbol iterator to be a function

I encountered an error while trying to use the update component in my app, and I am unsure of why this error is occurring.

Error:

TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function
    at HttpHeaders.applyUpdate (http.mjs:244:22)
    at http.mjs:211:56
    at Array.forEach (<anonymous>)
    at HttpHeaders.init (http.mjs:211:33)
    at HttpHeaders.forEach (http.mjs:274:14)
    at Observable._subscribe (http.mjs:1811:25)
    at Observable._trySubscribe (Observable.js:37:25)
    at Observable.js:31:30
    at errorContext (errorContext.js:19:9)
    at Observable.subscribe (Observable.js:22:21)

Additionally, for reference, here is the code snippet from my Laravel 9 backend application where the issue seems to be originating from:

**UpdateComponent.ts:**

onSubmit(form:any){
    this._userService.update(this.token, this.user).subscribe(
      response => { 
        console.log(response)
      },
      error => {
        this.status = 'error'
        console.log(error)
      }
    )
  }

ModelUser.ts:

export class User{
    constructor(
        public id: number,
        public name: string,
        public surname: string,
        public role: string,
        public email: string,
        public password: string,
        public description: string,
        public image: string
    ){}
}

UserService.ts

update(token:any, user:any):Observable<any>{
        let json = JSON.stringify(user)
        let params = 'json=' + json
        let headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded').set('Authorization', token)

        return this._http.put(this.url + 'user/update', params, { headers: headers })
    }

UserController/update.php

 public function update(Request $request){
        
        //Retrieve data via POST method
        $json = $request->input('json', null);
        $params_array = json_decode($json, true);

        if($checkToken && !empty($params_array)){
            //Get identified user
            $user = $jwtAuth->checkToken($token, true);

            //Validate data
            $validate = \Validator::make($params_array, [
                'name' => 'required|alpha',
                'surname' => 'required|alpha',
                'email' => 'required|email|unique:users,'.$user->sub
            ]);

            //Remove fields that should not be updated
            unset($params_array['id']);
            unset($params_array['role']);
            unset($params_array['password']);
            unset($params_array['created_at']);
            unset($params_array['remember_token']);

            //Update user in DB
            $user_update = User::where('id', $user->sub)->update($params_array);

            //Return array with result
            $data = array(
                'code' => 200,
                'status' => 'success',
                'user' => $user,
                'changes' => $params_array
            );
        }else{
            $data = array(
                'code' => 400,
                'status' => 'error',
                'message' => 'Unidentified user'
            );
        }

        return response()->json($data, $data['code']);
    }

Answer №1

The problem seems to be located in the UserService.ts file where you are setting the headers. I encountered a similar issue before, and it turned out that the value of the header was not a string. To resolve this, ensure that the type of token is a string by using either

.set('Authorization', String(token))
or
.set('Authorization', '' + token)
.

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

Validate whether the path parameter in NextJS is null or empty before executing the query

Currently seeking a method to determine if the query value is empty using the path parameter approach. Have a file named pages/search/[variable1].js Below is the code snippet: import { useRouter } from "next/router" const Variable= () => { ...

AngularJS not passing date data to web API

Greetings! I am currently working on a web application using AngularJS. I have a date value in AngularJS, for example 13-10-2017. In C#, I have the following field: public DateTime LicenseExpiryDate { get; set; } When I send 13-10-2017 in an AJAX reques ...

There appears to be an inexplicable issue hindering the functionality of smoothscroll in

Continuing to improve my website: I have implemented a button for scrolling down the page, but I would like to add smooth scrolling functionality for a better user experience. After some research and experimentation, I came across this compact script tha ...

Angular application experiencing issues with Bootstrap modal functionality

I'm attempting to utilize a Bootstrap modal within an Angular application by using classes in HTML, but it doesn't seem to be working - the modal is not displaying <div class="modal text-center" *ngIf="showmodal" tabindex=& ...

Unable to render page with scrapy and javascript using splash

I am currently trying to crawl this specific page. Following a guide on Stack Overflow to complete this task, I attempted to render the webpage but faced issues. How can I resolve this problem? This is the command I used: scrapy shell 'http://local ...

Vue3 and Ionic combined to create a Component that became a reactive object in Vue

Vue is issuing a warning about receiving a Component as a reactive object, which can cause unnecessary performance overhead. The warning suggests using markRaw or shallowRef instead of ref to avoid this issue. However, in my code, I am not explicitly using ...

Retrieve the public variable of a child page from the parent page

Is there a way to access the public variable offlineArticlesCount from an inner child page within the parent page? Please note: Each of the 3 components mentioned below has its own set of modules. myPage.html - Parent Page <picks *ngFor="let pick of ...

The app's functionality is disrupted by a malfunctioning Appframework jQuery

Having some trouble implementing the jQuery UI autocomplete widget in a PhoneGap app using the jq.appframework.js plugin. Here is how I have included the necessary scripts and styles: <script src="appframework/jquery.js"></script> <script s ...

Emulate clicking a radio button (using PHP and JS)

For the past week, I've been struggling to solve this issue with no luck. I admit that I am new to this area, so I ask for your patience. My current problem involves using TastyIgniter, an online food ordering system. In order to add items to the car ...

The specified type does not meet the constraint as it lacks the required index signature

I'm currently working on refactoring a TypeScript project that utilizes React Hooks. While I have some knowledge of TypeScript, I am still more of a beginner than an expert. My main goal is to create reusable code for this project through the use of ...

What is the most effective method for incorporating keyframes using JavaScript in a dynamic way?

Is there a way to animate an HTML element by using a variable with keyframes, but without directly manipulating the DOM? Below is the HTML code: <div class="pawn" id="pawn1"></div> Here is the CSS keyframes code: @keyframe ...

I'm curious about something I noticed in an HTML example within the text content section of elements. Can you help clarify this for me?

I recently came across a repository that was part of a bootcamp curriculum for learning full stack development. In one of the lessons on jQuery, students were tasked with building a calculator. However, I noticed some strange variables in the HTML where te ...

Getting an error in AngularJS with $http.get: "TypeError: boolean is not a function"

I've implemented angularjs $http.get in a factory to make an API call. When I ran my angularjs application, it successfully returned the data. However, upon inspecting the console using F12, I encountered the following error: "TypeError: boolean is n ...

What is the best way to present retrieved JSON data from a database in Node.js without using the JSON format?

Here is the code snippet: var http=require("http"); var fs = require("fs"); var express = require("express"); var app = express(); var path = require("path"); var mysql = require('mysql'); var ejs = require("ejs") var bodyParser = require(&apos ...

Achieve validation of numerous variables without the need for a string of if-else

If we have three variables, such as firstName, lastName, and email, how can we check if they are empty or not without using multiple if else blocks? let firstName = "John"; let lastName = "Doe"; let email = "john.doe@example.com"; if (firstName.trim() == ...

Typescript errors in console not being displayed by swc-loader

I have decided to make the switch from ts-loader to swc-loader based on the guidance provided in this article. However, after completing the migration, I am encountering an issue where basic Typescript errors are not being displayed in the console. For ins ...

Connecting Vue.JS page to my existing HTML page: A step-by-step guide

While developing my website, I faced a challenge with the structure. The home page was built using traditional HTML/CSS, while the other pages were created in Vue.js. Is there a method to connect these two different types of files? For instance, can I inc ...

Is it necessary to overlook Java Script when conducting load testing on my website?

We are in the process of developing a robust web application that needs to be able to handle a significant amount of traffic. I have been conducting load tests on a HP (Proliant DL 380) server with two 3.6GHz Xeon CPUs and 16GB of RAM. To perform these tes ...

What is the best way to retrieve an element from an array that was obtained via an http.get request?

Upon making an http get request in Angular, I received an array of Question objects. However, I am encountering an issue where I cannot access an element from it due to the error message: Cannot read property '0' of undefined. My assumption is th ...

What could be causing the Uncaught TypeError error in ionic serve?

Every time I run the Ionic serve command, my project loads in the browser but unfortunately shows a couple of errors in the console. An error occurred: Uncaught TypeError: Cannot read property 'innerHTML' of null(…) Another issue appeared: Fa ...