What is the best way to convert an array into a JSON format in Angular 8?

I am attempting to convert my array into a JSON format where it will display the Skill Score for each element in the array.

I attempted to accomplish this by using the .map function and then outputting the result as a JSON string, as demonstrated in the code snippet below.

if(Capability == 'CCM'){
            var newArray = this.finalSkills.map(function(item) {
                return {'Skill Score' : item}
            })
            console.log(JSON.stringify(newArray))
        }

I was hoping to see output like: { SKill Score: 3 } { Skill Score: 2 }

However, instead of the expected output, my browser console is displaying ƒ stringify() { [native code] }.

Answer №1

Anticipating something like this: { SKill Score: 3 } { Skill Score: 2 }

This doesn't follow the proper string format for an array. An appropriate JSON format for an array would look like

[{'Skill Score': 2}, {'Skill score': 3}]

You can achieve your desired outcome by utilizing the spread operator

{...newArray}

const newArray = [{'Skill Score': 3}, {'Skill Score': 5}];
const jsonFormat  = {};
Object.assign(jsonFormat, ...newArray)

console.log(...newArray)

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

What is the best way to establish a connection between the Angular front end and a remote MySQL server using a

https://i.sstatic.net/U16Gv.png I am currently working on a local Angular front-end login page that requires user authentication. The users' data is stored on a remote server, and I need to connect to a MySQL database on the server using a PHP API fo ...

Can someone please explain the purpose of x.ngfactory.ts files and provide tips on how to troubleshoot them when working with @angular/cli version 1.1.1

I am currently utilizing Angular 4.x, Webpack 2.x, and TypeScript 2.x. For the project build, I am using @angular/cli. When running ng serve, all code gets transpiled successfully and functions well in the view. The log output is displayed below: webpa ...

When navigating through the page, Google Maps will display a portion of the map corresponding to your

I recently incorporated the Angular Google map component into my project, using the following code: <google-map [options]="location?.googleMap?.mapOptions" height="100%" width="100%"> <map-marker #marker="m ...

using middleware after the response is sent

I've encountered an issue with a middleware function that is triggering after the main function finishes execution from the endpoint. Here's the code for my middleware: export const someMiddleware = async ( req: Request, res: Response, ...

Step-by-step guide on incorporating an external JavaScript library into an Ionic 3 TypeScript project

As part of a project, I am tasked with creating a custom thermostat app. While I initially wanted to use Ionic for this task, I encountered some difficulty in integrating the provided API into my project. The API.js file contains all the necessary function ...

Merge two arrays by matching their corresponding identifiers

I have 2 separate arrays that I need to merge. The first array looks like this: const Dogs[] = [ { id: '1', name: 'Buddy' }, { id: '2', name: 'Max' }, ] The second one: const dogAges[] = [ { id: '4&ap ...

Styling with CSS: The Art of Showcasing Initials or Images of Individuals

By following this elegant HTML and CSS example, I am able to showcase my initials over my photo. While this is wonderful, I would like the initials to be displayed only if the image does not exist; if the image is present, the person's initials shoul ...

Angular Component Encounters 401 Error Connecting to Youtube API

I've been working on a project in Angular that involves retrieving a list of YouTube videos using the YouTube API. Below is the service I've put together to handle this task. import { Injectable } from '@angular/core'; import { HttpClie ...

Add a service to populate the values in the environment.ts configuration file

My angular service is called clientAppSettings.service.ts. It retrieves configuration values from a json file on the backend named appsettings.json. I need to inject this angular service in order to populate the values in the environment.ts file. Specific ...

Is there a way to showcase a variety of items using the same charts? Looking for some guidance on

Currently utilizing angular chartjs for a user scorecard which includes six doughnut and 2 bar charts, all of which print correctly. I've also incorporated a directive with the same setup to repeat each user scorecard (with 8 charts for each user) ba ...

Error in Angular2 routes: Unable to access the 'forRoot' property

angular2 rc.5 I encountered a problem with TypeError: Cannot read property 'forRoot' of undefined(…) after investigating, I discovered that RouterModule is appearing as undefined during execution. This is my app.route.ts: import {Routes, Rou ...

How can Angular HttpClient be used to convert from Http: JSON.parse(JSON.stringify(data))._body?

When using the Http module, you can use this method: Http service: let apiUrl = this.apiUrl + 'login'; let headers = new Headers({'Content-Type': 'application/json'}); return this.http.post(apiUrl, JSON.stringify(model), {h ...

Verifying TypeScript Class Instances with Node Module Type Checking

My current task involves converting our Vanilla JS node modules to TypeScript. I have rewritten them as classes, added new functionality, created a legacy wrapper, and set up the corresponding Webpack configuration. However, I am facing an issue with singl ...

A guide to creating full-screen Angular components that perfectly match the size of the window

Currently, I am working on an Angular project where in my app.component.html file, I have various components like this: <app-selector1></app-selector1> <app-selector2></app-selector2> ... I am trying to figure out how to make my c ...

Struggling to determine the type of constant after a specific type check? (TS2349: Unable to call a function on a type that does not have a call signature

Encountered a puzzling issue with TypeScript where it appears that I should be able to recognize that a constant is an array, and then utilize array methods on it. However, TypeScript seems unable to confirm that a value is truly an array even after a dire ...

Subject does not contain the property debounceTime in the Angular 6 upgrade

I just tried to update my Angular 5 app to version 6 by following the guidelines on https://update.angular.io/. I believe I followed all the steps correctly. Here's the error message I encountered: Property 'debounceTime' does not exist on ...

Utilizing a Storybook default export (without a specific name) along with a template rather than a component

Utilizing storybook, you have the ability to create a named story template by: export default { title: 'My Component', } as Meta; export const Default: Story<any> = () => ({ template: ` <p>My story</p> ` }); Displa ...

"Dealing with Angular .map() function returning an empty array or displaying error messages

I'm encountering two issues while attempting to display data from my API call using the following code... API Call: getProducts(id: number) { return from(Preferences.get({ key: 'TOKEN_KEY' })).pipe( switchMap(token => { ...

Is it necessary to upload the node_modules folder to Bitbucket?

When uploading an Angular 2 app to Bitbucket, is it necessary to include the node_modules and typings folders? I am planning to deploy the app on Azure. Based on my research from different sources, it seems that when deploying on Azure, it automatically ...

Initialize app by calling Angular 13 service loader

I'm currently using Angular 13 and attempting to connect with Angular's bootstrapping phase through the APP_INITIALIZER token. I need to create an Angular service that manages the retrieval of our remote configuration. However, I've run into ...