Transform the string property extracted from the API into a JSON object

When making a request to an API, the data returned to the front end is in the following format:

{ name: 'Fred', 
data: [{'name': '"10\\" x 45\\" Nice Shirts (2-pack)"', 'price': '$30.25'}]
}

The data property is returned as a string, and I am attempting to convert it into an array using JSON.parse(response.data) so that I can utilize *ngFor for iteration. However, I keep encountering an error.

Unexpected token ' in JSON at position 2
SyntaxError: Unexpected token ' in JSON at position 2 (at zone.js:1262:1)
    at JSON.parse
javascriptangulartypescript

Answer №1

Your server is not providing valid JSON data. It should look like this:

{"name": "Fred", "data": [{"name": "\\"10\\\\\\"x45\\\\\\"Nice Shirts (2-pack)\\"", "price": "$30.25"}]}

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

TypeScript encounters challenges with implementing Redux containers

I'm struggling to understand the correct way to type Redux containers. Let's consider a simple presentational component that looks like this: interface MyProps { name: string; selected: boolean; onSelect: (name: string) => void; } clas ...

reactjstypescriptreduxreact-redux

What is the best way to create a universal limitation for a larger collection of a discriminated union?

Is it possible to enforce that when defining a generic class Foo<X>, where X represents a discriminated union type, X must be a superset of another discriminated union Y? In my specific scenario, I am utilizing a discriminated union to differentiate ...

typescriptgenericsdiscriminated-union

Having trouble finding the sum of values in an array using the Reduce method?

I have always used a 'for' loop to calculate sums in tables, but recently I learned about a better way - using the 'reduce' method. Following documentation and examples with simple arrays was easy enough, but now I am working with an ar ...

javascriptarraysreduce

Angular 2/4: Struggling to refresh child component's view

I need assistance with updating the value of "str" in the child component's view from the parent component. I want to do this by calling the "change()" function in the child component. Here is my code: import { Component } from '@angular/core&ap ...

htmlangulartypescript

Tips for setting up electron.js on a linux operating system

Seeking guidance to successfully install electron.js on a Linux operating system. Here are the issues I'm encountering: Installation Command sudo npm i electron Terminal Output /usr/bin/electron -> /usr/lib/node_modules/electron/cli.js <a ...

javascriptnode.jslinuxnpmelectron

Flatbuffers does not exist in this context

Currently, I am working on a nodeJs application that involves the use of Google Flat Buffer. After installing flatc on my MacBook Pro, I compiled the schema below: namespace MyAlcoholist; table Drink { drink_type_name: string; drink_company_name: stri ...

javascriptnode.jsflatbuffers

Simple HTML generator using Node.js

My preference is to write my HTML in a basic and straightforward manner, without any fancy tools. The only feature I would like to have is the ability to use an include statement to easily add header, navigation, and footer sections to each page. I'v ...

javascriptnode.jsexpress

What methods can be used to secure Next.js API routes and prevent them from being directly accessed through the URL

I am seeking a solution for concealing the response data of next.js API routes when accessed through URL. I need to protect certain sensitive information from direct access by users. ...

javascriptsecuritynext.js

Ways to clear the time attribute from an ISO DateTime in date format

How can I remove the time attribute from a date in the format 2016-05-24T05:07:57.756Z and set it to something like 2016-05-25T00:00:00.000Z? Any assistance would be greatly appreciated. ...

javascriptnode.jsdatetime

How do I correctly specify the parameter type of a function when passing a React functional component as an argument in TypeScript?

I am facing an issue with type declaration for function parameters. See the code snippet below, const FunctionalComponent = ({propA,propB}: FunctionalComponentProps): JSX.Element => { return } Now, I need to pass the FunctionalComponent as a parame ...

reactjstypescriptreact-functional-component

MediaRecorder is not compatible with Protractor unit tests in Angular

Currently working on an Angular 11 project that includes unit tests. Just introduced a MediaRecorder into the project, but now none of the tests are functioning properly. The test compilation is throwing this exception: error TS2304: Cannot find name &apos ...

angularprotractormediarecorder

Generate an event specifically for weekdays using the angular-calendar tool available at https://mattlewis92.github.io/angular-calendar/#/kitchen-sink

I'm currently setting up events for the calendar using . According to the guidelines, events are structured like this : events: CalendarEvent[] = [ { start: subDays(startOfDay(new Date()), 1), end: addDays(new Date(), 1), title ...

angularangular-calendar

Issues with Angular Meta tags not functioning properly and failing to appear in the page source

Despite setting the meta tags for image, description, and keywords dynamically in Angular 13.0.2 using API calls, they do not show up on any checker or work as expected. It seems like the meta service is not functioning properly, even though the tags are p ...

angularangular-universal

Go all the way down to see the latest messages

I have developed a messaging system using Vue. The latest messages are displayed from bottom to top. I want to automatically scroll to the end of a conversation when it is clicked and all the messages have been loaded via axios. Conversation Messages Comp ...

javascriptvue.jsvuejs2

Displaying time in weekly view on the Angular 4.0 calendar

I've integrated the library into my Angular application to manage calendar events display and creation. The app features a monthly, weekly, and daily view option for users. However, I noticed that in the weekly view, only the dates are shown without ...

angularcalendar

Deciphering JSON File Paths

I'm having trouble finding the correct path to a local file. My directory structure is as follows: Resources -> data -> file.json js -> folder -> script.js html -> folder -> file1.html I ...

javascriptjqueryjsonparsing

The specified property is not recognized by the type in TypeScript

I have set up a basic form with validation in Ionic 2. The form functioned properly when I used 'ionic serve' but encountered issues when running 'ionic run'. My suspicion is that the problem lies within my TypeScript code, specifically ...

angularjstypescriptcontrolsionic2

Angular service encounters NotYetImplemented error due to DOCUMENT injection token in SSR

I have a unique Angular SSR app with a special service that utilizes the document. I cleverly utilize the DOCUMENT injection token to provide this essential document for dependency injection. To take a peek at my innovative approach, check out my repo here ...

angularangular-servicesangular-dependency-injectionangular-ssr

Discovering the current date in Angular 8 by utilizing the form builder

Is there a way to automatically fill a form created with FormBuilder with the system's date and time when it is created, instead of the default date format? this.creationDate = moment().format(DATE_TIME_FORMAT); I want to update the creationDate fie ...

angulartypescript

Angular setPristine function is not functioning properly

I am looking to achieve a simple task - cleaning the $scope.user fields without encountering errors. if ($scope.contactForm.$valid) { $scope.user = {}; $scope.contactForm.$setPristine(); } However, I'm still experiencing v ...

javascriptangularjs