Unable to interpret data from the API

{
id: 8,
customerName: "xyz",
customerMobileNumber: "123456789",
customerBillingAddress: "xyz address",
customerShippingAddress: "xyz address",
customerProductPurchasedDate: "2021-11-09T09:07:00.000Z",
customerGstNumber: "xyz",
customerHsnNumber: "xyz",
addedInvoiceProductDetails: "[{"productquantity":"5","productprice":"5","productgst":"5","productname":"xyz","producttotalprice":"26.25","id":"2021-11-13T09:08:20.071Z"}]",
created_at: "2021-11-13T09:08:25.000000Z",
updated_at: "2021-11-13T09:08:25.000000Z"
},

The information above is retrieved from my project's API[http://127.0.0.1:8000/api/invoice_details/8]. The problem I am encountering is that the parameter addedInvoiceProductDetails is received as a string. This prevents me from mapping it as an object. How can I convert this string to an object and then map it accordingly?

Note: The response I get from the API for the addedInvoiceProductDetails parameter looks like this:

[{"productquantity":"1","productprice":"1000","productgst":"18","productname":"Street Light","producttotalprice":"1180","id":"2021-11-18T12:11:31.137Z"},{"productname":"Solar","productquantity":"2","productprice":"50","productgst":"10","producttotalprice":"110","id":"2021-11-18T12:11:43.935Z"}]

Although the response from the API seems to be already parsed, when I check its typeof, it still shows as a string.

I would greatly appreciate any help in resolving this issue as I have been stuck on it for the past 2 days.

javascripthtmlcssmysqlreactjs

Answer №1

To extract the data, make sure to utilize JSON.parse

const data = [{
    id: 8,
    customerName: "abc",
    customerMobileNumber: "987654321",
    customerBillingAddress: "abc address",
    customerShippingAddress: "abc address",
    customerProductPurchasedDate: "2021-11-09T09:07:00.000Z",
    customerGstNumber: "abc",
    customerHsnNumber: "abc",
    addedInvoiceProductDetails: "[{\"productquantity\":\"5\",\"productprice\":\"5\",\"productgst\":\"5\",\"productname\":\"abc\",\"producttotalprice\":\"26.25\",\"id\":\"2021-11-13T09:08:20.071Z\"}]",
    created_at: "2021-11-13T09:08:25.000000Z",
    updated_at: "2021-11-13T09:08:25.000000Z"
  },
  {
    id: 10,
    customerName: "abc",
    customerMobileNumber: "987654321",
    customerBillingAddress: "abc",
    customerShippingAddress: "abc",
    customerProductPurchasedDate: "2021-11-11T09:26:00.000Z",
    customerGstNumber: "abc",
    customerHsnNumber: "abc",
    addedInvoiceProductDetails: "[{\"productquantity\":\"5\",\"productprice\":\"5\",\"productgst\":\"5\",\"productname\":\"def\",\"producttotalprice\":\"26.25\",\"id\":\"2021-11-13T09:27:17.639Z\"}]",
    created_at: "2021-11-13T09:27:20.000000Z",
    updated_at: "2021-11-13T09:27:20.000000Z"
  },
]

data.forEach(({addedInvoiceProductDetails})=> console.log(JSON.parse(addedInvoiceProductDetails)))

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

Encountering an issue with React Redux and Typescript involving the AnyAction error while working on implementing

While integrating redux-persist into my React project, I encountered an error. Previously, Redux was working smoothly, but upon the addition of redux-persist, I started receiving this error message: Types of property 'dispatch' are incompatib ...

javascriptreactjstypescriptreduxreact-redux

What is the best way to determine the P/E ratio for a specific stock?

Need help with a formula calculation. I have the value for net worth, but I am having trouble iterating over the EPS values and multiplying them by the shares held. Can anyone suggest a solution? Thank you! You can find the Plunker here <div&g ...

javascriptangularjs

Tips for obtaining and storing multiple inputs within the same readline.question prompt in separate variables

Seeking to gather multiple user inputs in a single readline question and assign them to different variables? You're not alone! Ran into this challenge myself while trying to figure out the solution. Code import * as readline from 'node:readline&a ...

javascriptnode.jsmemory-leakscommand-line-interfacereadline

Migrate the JavaScript variable created with 'passport' to an Express router

In my quest for authentication, I created the essential passportAuth.js file: module.exports = function(passport, FacebookStrategy, config, mongoose, fbgraph){ passport.serializeUser(function(user,done){ //to make user reference available across pages ...

javascriptnode.jsexpresspassport.js

The useEffect hook appears to be inactive

Struggling to understand why the function inside my useEffect is not running. No console prints, indicating that the useEffect is not executing. Additionally, the network tab shows that the API call is not being made. UPDATE: The issue appears to be with t ...

reactjsreact-hooks

How to effectively handle asynchronous calls in Node.js using readdir and stat functions

My current project involves implementing a post method on the server side to fetch all files within a specified directory (non-recursively). Below is my code snippet. I am encountering challenges in sending back the response (res.json(pathContent);) with ...

javascriptnode.jsexpressasynchronous

Full-screen Bootstrap burger navigation menu

Check out this code snippet on boot ply: I'm trying to create a full-screen menu with the same effect as the burger menu for non-mobile screens. Currently, the burger menu only shows up on mobile devices. Does anyone know how I can achieve this? Than ...

cssangularjstwitter-bootstrap

Safari experiencing sporadic issues with reCAPTCHA AJAX API within modal dialogs

I am currently utilizing the reCAPTCHA AJAX API to showcase the captcha in a modal dialog box. To display the boxes, I am incorporating jqModal, and opting for the AJAX version of reCAPTCHA due to compatibility issues with the PHP version when used with jq ...

javascriptajaxsafarirecaptchajqmodal

Creating Angular UI states with parameters in TypeScript

My Understanding In my experience with TypeScript and angular's ui state, I have utilized "type assertion" through the UI-Router definitely typed library. By injecting $state into my code as shown below: function myCtrl($state: ng.ui.IStateService){ ...

javascriptangularjstypescriptangular-ui-routerangular-ui

What is the process for uploading a collection of image URLs to Firebase Firestore?

I am currently using Formik to manage form submissions for creating new real estate properties, including the upload of images. Everything is functioning correctly except for one part: I have a function that uploads all the images to storage and retrieves ...

reactjsfirebasegoogle-cloud-firestoreformik

What is the best way to create a button with this functionality?

In the form that I have created, it is opened in a bootstrap modal style. This form contains a button that, when clicked, triggers an alert box to appear. The code snippet used for this functionality is as follows: echo "<script>"; echo "alert(&apos ...

javascriptphpjquerytwitter-bootstrap

The URL switches back and forth from "localhost:8100" to "localhost:8100/some-route" while displaying a blank white screen

After working on my ionic app without any issues, I restarted my computer only to find that when I tried to run the project again, I was met with a blank white screen on both the browser and device. Even when I reverted back to an earlier branch, the URL c ...

javascriptangularjsionic-frameworklocalhostpromise

Issue persists with Material UI Menu failing to close when right-clicking the mouse

I have a menu that opens when I click on a tab using the mouse. ... <Tab label={page.title} title={page.description} onMouseDown={this.pageMenuOpen} /> ... <Menu id="simple-menu" anchorReference="anchorPo ...

reactjsmaterial-ui

Struggling to synchronize the newly updated Products List array in zustand?

Let me clarify the scenario I am dealing with so you can grasp it better. I have a Cart and various Products. When a user adds the product (product_id = 1) twice to the cart with the same options (red, xl), I increase the quantity of that item. However, i ...

javascriptreactjstypescriptreact-nativezustand

Calculate the dimensions of each list item and dynamically increase the size of the unordered list with jQuery

Trying to extract the 'width' style attribute from li and assign it to ul. The HTML code looks like this: <div id="carousel_team" class="glide"> <ul class="slides" style="opacity: 1; width: 1464px;"> <li class="slide first active ...

jqueryhtml

HTML 5 Video VTT File: A must-have for optimal video playback

Having trouble getting the subtitle.vtt file to load on Chrome with this code. Can anyone offer any insights? <div id="videoKilledTheRadioStar"> <video id="Tutorial" width="420" autoplay controls> <source src="videos/shaco.mp4" type="vi ...

htmlhtml5-videowebvtt

Tips for retrieving the value sent via an AJAX $.post request in a PHP file

Here is an example of my Ajax call: var keyword = $('#keyword').value; $.post("ajax.php?for=result", {suggest: "keyword="+keyword}, function(result){ $("#search_result").html(result); }); In the PHP file, I am trying to ret ...

javascriptphpjqueryajaxjson

Is there a way to allow only the block code to shift while keeping the other span tags stationary?

Is it possible to change the text without affecting other span tags in the code? I want to make sure only this specific text is updated. How can I achieve that? var para_values = [ { content: "BRAND " }, { content: "MISSION" } ]; functi ...

javascripthtmlcss

code, scripting - modal pop-up

My script currently has a popup window using window.open, but most browsers block this type of popups. I now want to change it to another popup that includes a php script, similar to what I've seen on other sites. It seems like they are using ajax. Ca ...

javascripthtmlajaxpopup

Is there a way to update the state of App.js based on input from a form submission?

My main React file, App.js, is where I set up my Router and define my routes. I have a route that leads to my Home component and another route that leads to my LoginForm component. Within my LoginForm component, I utilize axios to make a call to an API fo ...

reactjsreact-routeraxiosreact-router-dom