When passing parameters through a URL in TypeScript, the display shows up as "[object object]" rather than as a string

Hey there! I'm trying to pass some string parameters to my URL to fetch information from an API.

Everything seems fine, and when displayed in an alert, the URL looks exactly as it should (no [object, object] issue).

var startDate = "2020-09-20";
var endDate = "2020-11-20";
var apiUrl = 'https://thisismyurl?dateFrom=' + startDate + '&dateTo=' + endDate + 'T18%3A56%3A58.930Z&showAllFutureItinerary=true';

However, when I try this:

CustomSearch(startDate: string, endDate: string) {
   var Url = 'https://localhost:44381/api/internal/itinerary/all?userId=996D7BD5-C625-5C7E-6A02-7F174D955BF8&dateFrom=' + startDate + 'T18%3A56%3A58.930Z&dateTo=' + endDate + 'T18%3A56%3A58.930Z&showAllFutureItinerary=true'.toString();
}

I face issues accessing the API, and when I log/alert them, the variables appear as [object object].

These are being passed from an onsubmit function in another component as shown below:

model = {
  startDate: String,
  endDate: String,
  search: String
}

constructor(private itineraryService: ItineraryService) {}

onSubmit() {
    // var a = JSON.stringify(this.model)

    if (this.model.endDate != undefined && this.model.startDate != undefined) {
      this.items = this.itineraryService.CustomSearch(this.model.startDate.toString(), this.model.endDate.toString())
    }

I simply need to convert these into strings instead of them showing up as [object object].

Answer №1

Incorrect use of template literals is causing an issue. { startDate } creates an object literal by utilizing Shorthand property names. When you try to combine an object with a string, the toString method is invoked on the object resulting in [object, Object]

const start = 'abc',
      obj = { start }

console.log(obj)

console.log(
  'some string' + { start }
)

Revise to:

var apiUrl = `https://thisismyurls7F174D955BF8&dateFrom=${startDate}&dateTo=${endDate}T18%3A56%3A58.930Z&showAllFutureItinerary=true`

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

How can you determine the HTML element where a mouse click took place?

Is it possible in JavaScript to identify the HTML element where a mouse click occurs without having an event listener attached to the elements? Essentially, I want to be able to capture the mouse click event and determine the specific element on the page ...

Struggling to spot my error (codewars, javascript, level 8)

Can You Translate?! After receiving a message on WhatsApp from an unfamiliar number, you wonder if it's from the person with a foreign accent you met last night. Your task is to write a simple function that checks for various translations of the word ...

Is it possible to access the ID element of HTML using a variable in jQuery?

I have fetched some data from a JSON ARRAY. These values include Value1,Value2, and Value3. Additionally, I have an HTML checkbox with an ID matching the values in the array. My goal is to automatically select the checkbox that corresponds to the value re ...

Comparing Angular 2's Seed and CLI: A closer look at

Exploring my options for beginning a fresh Angular 2 Project. I stumbled upon angular2-seed and angular-cli as potential tools for kickstarting the project. However, I am deliberating on which one to opt for and curious about their respective advantages a ...

Alerts appear immediately upon beginning to type, asking for 8 characters and ensuring both passwords match

Is it possible to notify users that both passwords should match and they need to enter at least 8 characters after typing? There is currently an issue where a notification appears for entering less than 8 characters, but the password reset still proceeds ...

Exploring the world of Django: Using model formsets with the power

I am struggling to use Ajax for submitting my zipped formsets. The code functions flawlessly without Ajax, but as soon as I try to incorporate Ajax, I encounter a ValidationError: [u'ManagementForm data is missing or has been tampered with'] Thi ...

Utilizing React for Conditional Rendering and Navigation Bar Implementation

When developing my applications in react-native, I am using the state and a switch statement in the main render function to determine which component should be displayed on the screen. While this is a react structure question, it has implications for my sp ...

Upon employing the setTimeout method, the element with the id "sign-in-block" will have its display style set to "none" after a delay of 1000 milliseconds

I incorporated the setTimeout() function to make the HTML component appear for 1 second upon pageload. However, I would prefer this component not to load at all. Should I set the delay in the setTimeout() function to 0ms? Alternatively, is there another ...

Step-by-step guide on dynamically adding "Input Tags" to the DOM at runtime using Selenium's JavascriptExecutor

In order to dynamically add the following element to the DOM during run time, I need assistance... <input type="text" name="imagesToAdd" value="3566"> My initial attempt was to use Selenium JavascriptExecutor for this task. However, I encounter ...

AngularJS allows users to import a file and submit it after closing the popup

I can't figure out how to submit the file I'm importing after clicking OK on the system's file upload window. Here is what I have tried so far: <input type="file" id="file-input" style="display:none" /> <button class="btn pull-ri ...

Insert a fresh element above the existing elements fetched from the API

My application consists of two components: add-product.component and show-list.component. The show-list component displays a list obtained from the list-product API, which requires 3 parameters in the body (user_id, session_key, page). The third parameter ...

Script on the server side fails to execute following validation of form

Hey there, I'm struggling with my signup form. I want to submit the form using ajax after completing validation. I've used a jQuery plugin for validation, but whenever I click on any field, the ajax request is automatically sent to the server and ...

Error: The Vuex store is not defined in the Vue.js component when attempting to access it using

I've recently set up a new vue-cli webpack project with Vuex. I have initialized my Vuex store in store.js like so: import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const store = new Vuex.Store({ state: {} }); export default store; ...

When accessing a method exposed in Angular2 from an external application, the binding changes are lost

In my code, I have a method that is made public and accessible through the window object. This method interacts with a Component and updates a variable in the template. However, even after changing the value of the variable, the *ngIf() directive does not ...

Understanding Vue.js - encountering the error message "property or method is not defined"

Recently, I've come across an issue that seems to be common among many people, but for some reason, I am unable to find a solution despite looking at similar questions. The problem arises when I use a v-for in a Vue Component and the array value cons ...

What should be placed in the form action field if the router.post() method includes a parameter such as :id?

I'm struggling with how to properly submit data to my update form and what needs to be entered in the action field, especially considering the router.post includes an :id parameter. Below is the relevant code snippet: router.post('/gymupdate/:id& ...

Angular 2 rejected the request to configure the insecure header "access-control-request-headers"

My current challenge involves sending an HTTP POST request to my server. Here is the code I am using: var headers = new Headers({ 'Access-Control-Request-Headers': "Content-Type", 'Content-Type': 'application/json'}); let opt ...

Updating a property on an object during iteration

Currently, I am in the process of developing a Single Page Application using Laravel on the backend and Vue.js. I have two arrays that are crucial to my project: The first array is accessArray: ["BIU","CEO","Finance","HRD","Group"] The second array is a ...

Accordion section appears on the webpage as it is loaded

I am currently working on implementing an accordion feature for my webpage. Everything is functioning correctly when I click the button, but there is one issue - the div opens automatically when the page loads. My goal is to have the div closed initially a ...

Error encountered while running "ionic cordova run android" command

Recently, I revisited my Ionic Cordova app after a few months and encountered an unexpected dependency issue when attempting to make a minor adjustment to the app. Although the app previously functioned correctly, even reverting all changes failed to addre ...