How can I extract fields from a response using Axios?

I came across this code snippet:

axios.get<Response>(url)
  .then(response => {
    console.log(response.data);
  }).catch(error => {
  // handle error
  console.log(error);
});

The JSON response I am receiving has fields that are not easily expressed in TypeScript:

{ 
    "field:Type": "foo"
}

For example, there is a field name:Type that contains a string value - in this case, it's "foo"

How can I map such a field in the Response interface so that I can access it later?

interface Response {
    myMappedField: string;
}

Answer №1

When working with typescript, remember to enclose certain fields in single quotes,

interface Response {
  myMappedField?: string;
 'field:Type'?: string;
}

Within the axios response object, you can access properties using Dot/Bracket notation.

response.data['field:Type']

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

Tips on transforming String Format information

My Json data is structured like this: var d = "1,3,2,4" I want to convert it to: var d = [3,5,3,6] I attempted the following: success: function (Response) { debugger; var du = (Response.d); var final_string = '[' + du + &apo ...

Fetching the number of children from the JSON object in rabl

Within my application, I have a Location model that is being rendered in JSON format using Rabl. In my index.json.rabl file, the structure looks like this: object false collection @locations attributes :id, :name, :address, :rating The value for :rating ...

Angular 6 - The exporting of the ForkJoin member is non-existent

After upgrading to Angular 6, I attempted to implement ForkJoin in my project. In my service file, I included the following code: import { forkJoin } from 'rxjs/observable/forkJoin'; However, it seems to be unable to recognize it and I encounte ...

I am facing difficulty in assigning a nested JSON received from a POST request to my class

I have a specialized WebAPI project that processes JSON data to create and populate new objects. The structure of my classes is as follows: public class User { public string email { get; set; } public string libraryId { get; set; } public ...

Using Circe to encode all subtypes with prepopulated fields

Is there a way to enhance certain case classes with an additional field when they are converted to JSON using circe? For example: trait OntologyType { val ontologyType: String = this.getClass.getSimpleName } case class Thing(i: Int) extends OntologyTyp ...

Creating an extended class with mandatory properties

In order to streamline code sharing between two classes that overlap, I decided to create a new class called Common. For one of the subclasses, I needed all the properties from the Common class to be required. My initial thought was to utilize the Require ...

What causes inability for JavaScript to access a property?

My current coding project involves the usage of typescript decorators in the following way: function logParameter(target: any, key : string, index : number) { var metadataKey = `__log_${key}_parameters`; console.log(target); console.log(metadataKey ...

Using Python to Save Data to a JSON File

When data is saved in JSON files, it appears like this: {"discordid1": {"username": "discorduser1", "roblox_username": "robloxuser1"}, "discordid2": {"username": "discorduser2" ...

Is there a straightforward method to send JSON data using $.ajax in jQuery? (By default, jQuery does not handle JSON data transmission)

I've been attempting to send a nested JSON structure using $.ajax or $.post (tried both methods). The $.ajax code I used is as follows: $.ajax({ url: '/account/register/standard', method: 'post', data: datos, dataT ...

Unable to loop through array generated by service - potential async complication?

In my service, I am populating an array of items by calling a function like this: items: IItem[] = []; ... LoadItems() { this.GetItems().subscribe((res) => { // console.log(res); if (res.status == 200 && res.body. ...

Exploring JSON data with Apache NiFi using the EvaluateJsonPath and Split

Using the ConvertRecord processor, I successfully converted a csv text file to a json file with the following structure: [ {"A":1001,"B":"20170101","C":0.3}, {"A":1001,"B":"20170102","C":0.1}, .....] In an attempt to retrieve certain paths fro ...

A guide to transferring user information from Node.js to React.js with the help of Express and MySQL

I am facing a challenge when trying to display the author's email in my posts. I initially attempted to accomplish this by joining tables in my posts route, but unfortunately, it is not working as expected. Below is the code snippet for my route: ro ...

What are the recommended data types to include in props.location.state when using React.router.dom in TypeScript?

I'm encountering an issue with TypeScript when trying to access an object from props.location.state. I found a workaround to get the object from state using the following code snippet: import React, { FC } from 'react'; import { RouteCompone ...

How to incorporate node elements into a JSON object using NetworkX library in Python

Recently, I created a JSON object using networkx that looks like this (brief snippet shown here): json_data = json_graph.node_link_data(network_object) >>> json_data {'directed': False, 'graph': {'name': 'co ...

Using CamanJs in conjunction with Angular 6

Struggling to integrate camanjs with Angular 6? Wondering how to add the JavaScript library and use it within an Angular project when there are no types available on npm? Here are the steps I followed: First, install Caman using npm. Next, add it to ...

combine two JSON schemas to create an extended JSON schema

Seeking a method to extend a "parent" JSON schema in order to create various "child" schemas. I anticipate needing around 20 child schemas, so consistency is key. Here is the base or parent schema: { "definitions":{ "selector":{ "$id": ...

Can you explain the purpose and significance of addEventListener()?

class MyController{ public myEntities = ko.observableArray(); constructor(modelData) { var me = this; me.onViewLoaded.addEventListener(() => { me.myEntities.push(modelData); }); } The ...

Bypassing header rows in a CSV file

I am trying to convert a CSV file to JSON and need to skip the first 5 header lines. Here is an example file: No errors No warnings 646 ms data source=metars 4797 results raw_tex stat ...

"Unexpected outcome: Angular's HTTP request for a JSON file yields an undefined

Learning Angular has been a challenging experience for me. I am currently working on reading a json file into a chart on my main app page to visualize temperature data from my PI. Despite trying various methods found online, I have not been successful so f ...

Tips for Invoking an Overloaded Function within a Generic Environment

Imagine having two interfaces that share some fields and another interface that serves as a superclass: interface IFirst { common: "A" | "B"; private_0: string; } interface ISecond { common: "C" | "D"; private_1: string; } interface ICommo ...