Issues with Angular2 causing function to not run as expected

After clicking a button to trigger createPlaylist(), the function fails to execute asd(). I attempted combining everything into one function, but still encountered the same issue. The console.log(resp) statement never logs anything. What could be causing this problem?

    createPlaylist(token:string = localStorage.getItem('myToken')) {

      const url = `https://api.spotify.com/v1/users/${this.currentUser}/playlists`;
      const headers = new Headers();
      headers.append('Authorization', 'Bearer ' + token);
      headers.append('Content-Type', 'application/json');
      const body = {
        'name': 'searchDDD playlist'
      };
      this.http.post(url, body, { headers } )
      .subscribe(res => {
        console.log(res.json().name);
        console.log(res.status);
        this.playlistID = res.json().id;
        this.asd();
      });


    }

    asd(token:string = localStorage.getItem('myToken')){
      const url = `https://api.spotify.com/	v1/users/${this.currentUser}/playlists/${this.playlistID}/tracks?`;
      const body = {'uris': ['spotify:track:4iV5W9uYEdYUVa79Axb7Rh',
      'spotify:track:1301WleyT98MSxVHPZCA6M']};
      const headers = new Headers();
      headers.append('Authorization', 'Bearer ' + token);
      headers.append('Content-type', 'application/json');
      this.http.post(url, body, { headers } ).map(resp => {
        console.log(resp);
    });
}

Answer №1

Observables are lazy by nature, so without methods like subscribe() or forEach(), they won't actually execute.

this.http.post(url, body, { headers }).subscribe(response => {
    console.log(response);
});

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

Verify if the text field is currently blank or has content before applying attributes

How can I disable one text box if another specific text box is filled within a div containing multiple text boxes? For example: When I enter text in textbox(4), I want to automatically disable textbox(1). And if I remove the text from textbox(4), I want t ...

What options are available for labels in Bootstrap v5.0.0-beta1 compared to BS 3/4?

How can I use labels in Bootstrap v5.0.0-beta1? In Bootstrap 3, the labels are implemented like this: <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <span class="label label-success ...

What is the best way to include multiple ng-repeats within a single ng-repeat?

Hey, I'm facing quite a tricky situation with this grid and could use some assistance. I'm trying to figure out how to populate the data using ng-repeat. I've attached an image showcasing the desired layout of the grid and the order in which ...

The error message states: "An error occurred: Unable to find the 'HttpProvider' property within an undefined

import * as Web3 from 'web3' import { OpenSeaPort, Network } from 'opensea-js' const provider = new Web3.providers.HttpProvider('https://mainnet.infura.io') Hello everyone, I'm currently learning Node.js and encountered ...

Encountering the error message "Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client" while attempting to identify duplicate entries in my database

I am currently working on a backend written in express.js that handles standard CRUD operations. My ORM of choice is sequelize. Here's the code snippet: import { Sequelize} from 'sequelize'; import User from '../Models/User.js'; im ...

What steps can I take to modify the class of a button once it has been clicked using JQuery?

Currently, I am experimenting with Jquery to dynamically change the classes of bootstrap buttons when they are clicked. However, I have encountered a limitation while using toggleClass. The issue is that I am only able to toggle between two classes, whic ...

Puppeteer failing to detect dialog boxes

I'm attempting to simulate an alert box with Puppeteer for testing purposes: message = ''; await page.goto('http://localhost:8080/', { waitUntil: 'networkidle2' }); await page.$eval('#value&apos ...

There is an error in ReactJS: TypeError - _this.props.match is not defined

I am experiencing a TypeError in my console tab and I can't seem to figure out where the error is occurring in my source code. I am relatively new to ReactJS so any help in identifying what I'm doing wrong would be greatly appreciated. Thank you ...

Mastering the utilization of custom input events in PrimeNG with Angular

I am currently working on an Angular 16 project. Within this project, I have implemented a number input field that is being validated using formControls. To make my work more efficient, especially since this input is used frequently, I decided to encapsula ...

Building a Mongoose Schema with an Array of Object IDs: A Step-by-Step Guide

I created a user schema using mongoose: var userSchema = mongoose.Schema({ email: { type: String, required: true, unique: true}, password: { type: String, required: true}, name: { first: { type: String, required: true, trim ...

Attempting to unveil concealed download URLs

Trying to extract download links from a website, but the format is as follows: <form action="" method="post" name="addondownload" id="addondownload" > <input type="hidden" name="addonid" id="addonid" value="2109" /> <input class="re ...

Unable to compile relative path of threejs using browserify and babel

As a newcomer to babel and browserify, I encountered an issue while trying to transpile with browserify and babel. After installing the threejs package and adding the following import: import * as THREE from 'three' Everything worked fine when t ...

"An error in the signature index results in the failure of the

I'm encountering a coding issue that's puzzling me. The TypeScript index signature I included in my code is as follows: const ships: { [index: string]: Ship } = {}; This snippet of code contains the problematic line: recieveAttack(e: any) { ...

Animation effect in Jquery failing to execute properly within a Modal

I have developed a small jQuery script for displaying modals that is both simple and efficient. However, it seems to only work with the fadeIn and fadeOut animations, as the slideUp and slideDown animations are not functioning properly. I am unsure of the ...

Displaying specific choices depending on the previous selection made

I am facing an issue in Laravel where I have two selection options, and one depends on the other. Despite multiple attempts, I haven't been able to resolve it. The database structure is as follows: companies id title channels id company_id title I ...

Struggling to understand the implementation of webpack's require.context() method

I'm currently working on an AngularJS project with webpack, and I'm looking for a way to import all the .js files in my project into webpack without manually adding each file path. Upon reviewing the webpack documentation, I came across the requi ...

techniques for accessing HTML source code through an AJAX call

I am trying to retrieve the HTML source of a specific URL using an AJAX call, Here is what I have so far: url: "http://google.com", type: "GET", dataType: "jsonp", context: document.doctype }).done(function ...

Exploring the possibilities with JavaScript options

I am currently working on a project that involves a dropdown list... to complete unfinished sentences. Unfortunately, I am facing an issue with a message stating Uncaught TypeError: Cannot read property 'options' of null Below is a portion of m ...

I possess a solitary div element that requires dynamic replication

I have a single container and an unspecified number of rows of data. I want to display this data on HTML cards that are generated dynamically based on the number of rows. For example, if there are 10 rows of data, I need to create 10 card elements with ea ...

Utilizing SCSS to implement custom animations according to specific element IDs

How can I add different animations based on the ID of two DIVs with the same class when clicked? JSX: <div className="card"> <div id="front" className={frontClasses.join(' ')} onClick={clickedFront}> OPEN ...