Mapping an array of JSON objects into a plain JSON object in TypeScript Angular 2: A Guide

Response Data:

[
  {
    "professionalId": {
      "cib_code": "30003",
      "thirdPartyId": "RS30004"
    },
    "nationalIdentifier": "984538926",
    "nationalIdType": "SIREN"
  },
  {
    "professionalId": {
      "cib_code": "30003",
      "thirdPartyId": "RS30008"
    },
    "nationalIdentifier": "944316926",
    "nationalIdType": "SIREN"
  }
]

Using REST call to fetch JSON response from the database:

this.thirdpartyServices.getThirdparties().subscribe(data=>this.thirdpartyapis$=data);

The above JSON array response is stored in the **thirdpartyapis** object

I need another object with a simplified format like:

[
  {
    "cib_code": "30003",
    "thirdPartyId": "RS30004"
    "nationalIdentifier": "984538926",
    "nationalIdType": "SIREN"
  },
  {
    "cib_code": "30003",
    "thirdPartyId": "RS30008"
    "nationalIdentifier": "944316926",
    "nationalIdType": "SIREN"
  }
]

I want to map my data in TypeScript so that I can use the same object in HTML to display data in a grid table. Please suggest how to achieve this in Angular 2 with TypeScript.

jsonresttypescriptangular2-services

Answer №1

Perhaps utilizing destructuring could be beneficial,

this.externalServices.fetchExternalData()
  .map(each => {
    let { id, type } = each;
    return {
      ...each.attributes,
      id,
      type
    };
  })
  .subscribe(result => {
    this.externalApis$ = result;
  });

Another option is to bring in 'map' from the following source,

import 'rxjs/add/operator/map';

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

Steps for accessing and transferring information to mLab

I created a python flask app for managing a scoreboard, which is hosted on heroku.com. Initially, I stored the scoreboard in a JSON file on GitHub provided by Heroku. However, I realized that Heroku reset to the last commit every few hours, leading to loss ...

pythonjsonflaskmlab

The program experienced an issue with TypeError: Attempting to access properties of an undefined variable ('_id')

I am attempting to show a data entry (with a unique id) in Angular, but I'm encountering the following error: ERROR TypeError: Cannot read properties of undefined (reading '_id') The service for retrieving the specific id is defined as: g ...

node.jsangulartypescriptmean-stack

The optionalCall function is not defined

Error in file: ./client/node_modules/@blueprintjs/core/lib/esnext/components/hotkeys/hotkeysTarget.js - TypeError: this.optionalCall is not a function ...

reactjstypescript

Something is seriously wrong with the datetime in fullcalendar JavaScript

I've been diving into a tutorial for creating a calendar scheduler in asp.net MVC5 from this link. One issue I'm facing is the datetime being passed and stored as the min value in the database (1/1/0001 12:00:00 AM), almost like it's null b ...

javascriptc#asp.netjsonfullcalendar

Difficulties setting up TypeScript in Laravel, alongside Vuejs and Inertia

Currently, my tech stack includes Laravel, Vue, and Inertia. However, I am looking to migrate everything to TypeScript, and I have encountered a roadblock that I can't seem to overcome. To aid me in this process, I referred to the following video tuto ...

phptypescriptlaravelvue.jsinertiajs

Issue: The browser.newPage function is expecting to receive either accept, deny, or internal-browser-default for download permissions

Utilizing playwright automation, I currently have tests running on browser stack with playwright version 1.37.1. Error: browser.newPage: acceptDownloads: expected one of (accept|deny|internal-browser-default) at src/base/fixtures.ts:62 60 | ...

typescriptplaywright

"Utilizing Typescript with Angular NGRX, the actions$.pipe() method can lead to

I am currently facing an issue with ngrx/effects - specifically with a pipe being undefined. I have included a sample code snippet below that appears to be correct according to the compiler, but I am receiving an error in the browser stating that the pipe ...

angulartypescriptngrxngrx-effects

Converting interface to a particular type using Jackson without the need for JsonSubTypes

I am currently working on Project A, where I have an interface that looks like this: interface MyInterface extends Serializable { } In Project B, there is a class that implements the above interface: @Data class MyClass implements MyInterface { privat ...

javajsonspringjackson

Tips for RETRIEVING a particular cookie value in Angular version 14

"I've integrated the ngx-cookie-service library in my Angular project, but I'm experiencing an issue where two different cookies are being retrieved upon login even though the session id is already set in the backend. How can I ensure that m ...

angulartypescriptjwtsession-cookiesngx-cookie-service

What is the best way to sort an array based on a person's name?

I have a list of different groups and their members: [ { "label": "Group A", "fields": [ { "value": "color1", "name": "Mike" }, { &quo ...

javascriptreactjsarraystypescript

Exploring ways to incorporate conditional imports without the need for personalized webpack settings!

Our project is designed to be compatible with both Cordova and Electron, using a single codebase. This means it must import Node APIs and modules specific to Node for Electron, while ignoring them in Cordova. Previously, we relied on a custom webpack con ...

angulartypescriptionic-frameworkwebpackelectron

Using .map() with a union type of string[] or string[][] results in a syntax error

interface Props { data: string[] | string[][]; } function Component({ data }: Props) { return data.map(v => v); } map() is causing an error: The expression is not callable. Each member of the union type '((callbackfn: (value: string, in ...

typescriptunion-types

Improving JSON parsing efficiency - tips and tricks!

Looking at a JSON structure like this: { "status":{ "server":{"bool":true}, "request":{"bool":true}, "third_party":{"bool":true}, "operation":{"bool":false,"int":-12,"str":"Not authenticated!"} }, "response":{ ...

javajson

tips for utilizing a variable for inferring an object in typescript

In my current code, I have the following working implementation: type ParamType = { a: string, b: string } | { c: string } if ('a' in params) { doSomethingA(params) } else { doSomethingC(params) } The functions doSomethingA and doSomething ...

typescript

"Perform an upsert operation with TypeORM to create a new entry if it

Is there a built-in feature in TypeORM to handle this scenario efficiently? let contraption = await thingRepository.findOne({ name : "Contraption" }); if(!contraption) // Create if not exist { let newThing = new Thing(); newThing.name = "Contrapt ...

typescripttypeorm

Is it feasible to differentiate generic argument as void in Typescript?

One of the functions in my code has a generic type argument. In certain cases, when the context is void, I need to input 0 arguments; otherwise, I need to input 1 argument. If I define the function argument as context: Context | void, I can still add voi ...

typescript

Guide on exchanging data with iOS app using JSON format

Hello, I am new to iOS programming and currently working on an application that will communicate with a web server using PHP. Can anyone guide me on how to send and receive data from the web using JSON? ...

iosjsonnsjsonserialization

What is the best way to restrict a React input field to have values within the minimum and maximum limits set by its

As a newcomer to React, I am working on restricting my input to values between -10 and 10. Currently, the input is set up to accept any value, and I am utilizing hooks like useState and useEffect to dynamically change and set the input value. My goal is ...

javascriptreactjstypescriptformsreact-props

Parsing JSON data with new line characters

What is the reason behind being unable to parse a json with a \n character in javascript? JSON.parse('{"x": "\n"}') Surprisingly, when you use JSON.parse(JSON.stringify({"x" : "\n"})), it works perfectly fine. indicates that {" ...

javascriptjsonnewline

Error message: The object is not visible due to the removal of .shading in THREE.MeshPhongMaterial by three-mtl-loader

Yesterday I posted a question on StackOverflow about an issue with my code (Uncaught TypeError: THREE.MTLLoader is not a constructor 2.0). Initially, I thought I had solved the problem but now new questions have surfaced: Even though I have installed &apo ...

typescriptthree.jswebgl