What is the best way to pass a parameter dynamically in the get method?

When looking at the network tab, I realized that I sent the query ''

Unfortunately, it didn't work as expected. How do I adjust the query to have the order like this:

Should the 'q' parameter come after the search?

 getArtists(query) {
   const params = {
        type: 'track,artist',
        market: 'US',
        limit: 14,
        offset: 5
    };

    if (typeof query === 'string') {
        params.q = query;
    }

    console.log(params) 

    return this.$http.get("https://api.spotify.com/v1/search", { 
params }).then(function mySuccess(response) {
        console.log(response.data);
    }, function myError(response) {
        console.log(response);
    });
  };

getArtists('Abba');

Answer №1

Encountering an authorization issue while attempting to use your APIs.

{
"error": {
"status": 401,
"message": "No token provided"
}
}

To resolve this, remember to include the authorization token in the header.

getArtists(query) {
let params = {
    q: query,
    type: 'track,artist',
    market: 'US',
    limit: 14,
    offset: 5
};

if (typeof query !== 'string') {
    delete params.q;
}

console.log(params) 

return this.$http.get("https://api.spotify.com/v1/search", {headers: {
'Authorization': 'Bearer <AUTHORIZATION TOKEN>}, 
params }).then(function mySuccess(response) {
    console.log(response.data);
}, function myError(response) {
    console.log(response);
});
};

If you haven't already, follow the steps outlined here:

Answer №2

Give this a shot

retrieveArtists(searchTerm) {
   let parameters = {
        q: searchTerm,
        type: 'track,artist',
        market: 'US',
        limit: 14,
        offset: 5
    };

    if (typeof searchTerm !== 'string') {
        delete parameters.q;
    }

    console.log(parameters) 

    return this.$http.get("https://api.spotify.com/v1/search", { 
parameters }).then(function handleSuccess(response) {
        console.log(response.data);
    }, function handleError(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

Can you explain the distinction between angular data table methods dtInstance.reloadData() and dtInstance.rerender()?

Utilizing an angular data table to populate a list of data fetched from a service call, with server-side pagination enabled and the ability to adjust pagination length using the rowCount variable var vm=this; vm.DisplaySLAChart =true; var rowC ...

Is your AngularJS $scope.variable out of alignment with the view?

I'm feeling a bit puzzled by this issue because I can't seem to replicate it in Plunker, but it's occurring in my actual project. Here is the Plunker link I created. I am attempting to monitor the scope variable searchString, and while it f ...

Why does the <div> element still have an offset even though its width and height are set to 100px and padding, margin, and border are set to 0px?

After styling my div element with specific CSS rules, I'm encountering an issue. The div has a set width and height of 100px along with padding, border, and margin all set to 0px. However, the elements are not being offset from the edges of the browse ...

ReactNative: When attempting to navigate, a TypeError occurred - this.props.navigation.navigate is not a function

It's confusing to see how this issue is occurring, even though all props have been properly typed. The goal is to pass the navigator to the bottom bar component in order to navigate onPress. Initially, I define the props interface: export interface B ...

`Welcome to the World of AngularJS with IntelliJ IDEA`

Hey there! I'm currently diving into the world of Angular.js and IntelliJ IDEA, but seems like I've hit a roadblock. I'm attempting to create a basic "hello world" example from a book in the IDE, but it's just not cooperating. After dow ...

Elevate your tooltips with Bootstrap 5: enabling hoverable tooltips and clickable links

At times, you may want to include clickable links in tooltips. I recently encountered this issue while using Bootstrap 5 and had trouble finding a solution. After some trial and error, I finally figured it out and wanted to share my findings. The standard ...

Ways to extract the variable value from two asynchronous functions

I need to create a script that generates live currency conversion rates for a given array of currencies. For example, if the array is ['USD','AUD','GBP'], I want the script to calculate conversions like USD->AUD, USD->GB ...

Rendering child components in Vue.js with access to parent data

I have a main component in Vue.js with the following structure: <template> <ul class="list-group"> <li class="list-group-item" v-for="item in items"> <div class="row"> <div class="col-md-6"> ...

Highchart in ionic 2 not displaying

https://i.sstatic.net/q2CPR.png I inserted code for a highchart on my webpage, but it's not appearing I followed instructions from this video tutorial https://www.youtube.com/watch?v=FSg8n5_uaWs Can anyone help me troubleshoot this issue? This is ...

Tips for resolving issues with mysql_fetch_assoc()

Similar Question: mysql_fetch_array() error - Fixing parameter issue Whenever I execute the code below, I encounter this issue: Warning: mysql_fetch_assoc(): provided argument is not a valid MySQL result resource If anyone knows how to rectify this pro ...

Repeated module imports

Currently, as part of my app development process, I am utilizing Parcel along with @material-ui/styles. One crucial aspect to note is that my app has a dependency on the @material-ui/styles package. Additionally, I have incorporated my own npm package, sto ...

Resolving the "TypeError: Unable to access the 'then' property of undefined" issue in Node.js

I am currently working on connecting my app to a third party API using a node module. Below is the code I am utilizing for a school project. The library I am using to request data from the API can be found here. Note: This package is not being maintained ...

The significance of API Input Validation and Steering Clear of Lengthy Conditional Statements

Currently, I am working on ensuring that my API functions correctly even in cases of bad or missing data. At the moment, I have an if statement that checks for any missing inputs. If an input is missing, it returns false, otherwise there is a large else b ...

Utilizing jQuery's .done() and .fail() methods to handle

Our goal here is to control the outcome of the createSite function. If it returns {ac:failed}, then the .fail(failOption) will be triggered; otherwise, the sendMail or .done(sendMail) function will be executed while still retaining the data from the crea ...

The issue with updating the JSON data in VueJS when using draggable/sortable functionality

Hey everyone, I'm currently utilizing this library for sorting elements. I have a simple sortable setup where I'm trying to rearrange a three-element array by dragging. I can successfully change the positions, but the issue arises when my JSON ar ...

Effectively generating observables that extract a designated element from a collection of observables

Within my application, I am utilizing a RxJS subject to broadcast changes within a collection. Each time the collection is updated, the subject emits the new contents as an array format. let collectionSubject = new Rx.BehaviourSubject(); collectionSubjec ...

Automatically generated list items are failing to react to the active class

I am facing an issue with two divs in my project. The first div uses the Bootstrap class list-group and is populated with a basic example provided by Bootstrap. The second div is supposed to be populated with list-group-items obtained from an AJAX GET requ ...

Console not displaying any logs following the occurrence of an onClick event

One interesting feature I have on my website is an HTML div that functions as a star rating system. Currently, I am experimenting with some JavaScript code to test its functionality. My goal is for the console to log 'hello' whenever I click on ...

Building custom components in Vue.js/NuxtJS can be a breeze when using a default design that can be easily customized through a JSON configuration

Currently, I am in the process of developing a NuxtJS website where the pages and components can either have a generic design by default or be customizable based on client specifications provided in the URL. The URL structure is as follows: http://localh ...

Creating a Gatsby blog post on Enhancing Your Website with Rich Snippets for Embedded YouTube Videos

I have a website built with Gatsby and the Netlify CMS, and occasionally I want to include embedded YouTube videos in my blog posts. I am looking to implement a videoObject schema for these videos with the following structure: { "@context": "http:// ...