Extract the JSON object containing backslashes and merge it back into the main JSON data

Is it feasible to parse through the single 'Data' object in the JSON provided, remove backslashes, separate each key-value pair within the object, and then reattach them to the original data?

This example:

{
  "Timestamp": "2018-05-14T20:02:57.000Z",
  "Data": "{\"UserId\":\"00529000001jD4uAAE\",\"CardElement\":\"Total Due\",\"EntityLabel\":\"Total Due\",\"EntityName\":\"Contract Account\",\"TrackingEvent\":\"Field\",\"TrackingService\":\"VCards\"}",
  "CustomerInteractionId": "a1629000000VQgvAAG",
  "Vlocity Tracking Entry Name": "Field"
}

Should become:

 {
  "Timestamp": "2018-05-14T20:02:57.124Z",
  "CustomerInteractionId": "a1629000000VQgvAAG",
  "Vlocity Tracking Entry Name": "Field",
  "UserId": "00529000001jD4uAAE",
  "CardElement": "Total Due",
  "EntityLabel": "Contract Account",
  "TrackingEvent": "Field",
  "TrackingService": "VCards"
}

I am encountering difficulties breaking down the key-value pairs and merging them back into the JSON. The solution can be in JS or AngularJS.

javascriptangularjsjsonparsing

Answer №1

   

var information = {
  "Timestamp": "2018-05-14T20:02:57.000Z",
  "Data": "{\"UserId\":\"00529000001jD4uAAE\",\"CardElement\":\"Total Due\",\"EntityLabel\":\"Total Due\",\"EntityName\":\"Contract Account\",\"TrackingEvent\":\"Field\",\"TrackingService\":\"VCards\"}",
  "CustomerInteractionId": "a1629000000VQgvAAG",
  "Vlocity Tracking Entry Name": "Field"
};

information = Object.assign({}, information, JSON.parse(information.Data));
delete information.Data;
console.log(information);

Answer №2

Information is a key component within your JSON data structure. It's crucial to selectively extract and process this information in order to create a new object that combines both the parsed Information and the original object. Subsequently, you can eliminate the Information from the newly formed object.

var details = { "Timestamp": "2018-05-14T20:02:57.000Z", "Information": "{\"UserId\":\"00529000001jD4uAAE\",\"CardElement\":\"Total Due\",\"EntityLabel\":\"Total Due\",\"EntityName\":\"Contract Account\",\"TrackingEvent\":\"Field\",\"TrackingService\":\"VCards\"}", "CustomerInteractionId": "a1629000000VQgvAAG", "Vlocity Tracking Entry Name": "Field" },
  outcome = {...details, ...JSON.parse(details.Information)};
delete outcome.Information;
console.log(outcome);

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

Troubleshooting problems with cross-origin requests involving Ajax, Angular, and Zuul

I have implemented a Zuul server for routing to my microservices in a separate UI project built with Angular. When I try to make an AJAX call from the UI app to a specific microservice that routes through Zuul, I encounter the following error: XMLHttpRequ ...

angularjsajaxspring-cloudmicroservicesnetflix-zuul

using selenium to interact with elements within the window object

I'm a newcomer to selenium and javascript and looking to incorporate the VisualEvent javascript into pages opened in a selenium-controlled browser. My goal is to access its variables from selenium in java. I've successfully completed the first ph ...

javascriptselenium

The upload directory in KCFinder can be accessed and selected using a URL

Issue: While using the link to open kcfinder as defined in kcfinder, I encountered a problem. The link is intended to open kcfinder with the provided parameters: window.open('/kcfinder/browse.php?type=files&dir=files/public&subDi ...

javascriptphpjquerysymfonykcfinder

Is it possible to import a global package in Node if NODE_PATH is already configured?

Currently, I am encountering an issue with trying to import a globally installed package that is located at /some/path. To address this problem, I have configured NODE_PATH in my ~/.bash_profile and confirmed its existence by running 'echo $NODE_PATH& ...

javascriptnode.jsnpm

The array returned by my MongoDB is empty, containing only [] brackets

I'm currently learning how to build full stack JavaScript applications using the MEAN stack, which includes Node.js, AngularJS, Express and MongoDB. At this stage of my studies, I am tasked with fetching all the hotel data from my database. However, ...

javascriptmongodbmongoosedatabase

Encountering an issue when utilizing ng-repeat to iterate through an array in JavaScript

I'm encountering an issue in my code that I can't seem to resolve. <div ng-model="activeFilterCtrl.selectedfilters" ng-repeat="filters in activeFilterCtrl.selectedfilters" ng-model-options="{trackBy: '$value.params'}" flex> ...

javascriptangularjs

``Passing a database value from a controller to a table popup through AJAX: A step-by

I need to display a popup containing data from a database. I'm using an AJAX function with onclick() to achieve this. The data retrieved will be shown in the popup, which includes a table. However, I'm unsure how to properly display the data with ...

javascriptjqueryajax

Tips for personalizing text and icon colors in the TableSortText element of Material-ui

My Goal: I aim to empower users with the ability to apply customized styles to my EnhancedTable component by utilizing a styles object containing properties like headCellColor, headCellBackgroundColor, bodyCellColor, bodyCellBackgroundColor, and more. The ...

javascripthtmlcssreactjsmaterial-ui

The ng-change and onchange events are not functioning as expected for the input field with the type "file"

<button ng-click="controller.foo()">Click<button> is functioning properly. However, <input type="file" ng-model="logo" onchange="controller.foo()"> seems to be malfunctioning. Additionally, <input type="file" ng-model="logo" ng-ch ...

javascriptangularjs

Is there a way to modify the visibility of an element on a webpage once an image element is clicked or activated?

I've been experimenting with changing the opacity of a div element when you click on an img element using JavaScript or jQuery. I'm not sure if this is achievable with CSS or HTML alone, so if you have any insights, please share! Here's the ...

javascripthtmljquerycss

Modernizr fails to add classes to the html element

I'm currently working on a website project where I am trying to utilize Modernizr. However, for some unknown reason, the classes are not being applied to the html-tag as expected. Here is a snippet of my code: <!doctype html> <!--[if lt IE ...

javascripthtmlmodernizr

The standalone package for webpack's CLI tool has been introduced as webpack-cli

Currently venturing into the world of React.js, I decided to follow the tutorials provided on tutorialspoint. However, during the implementation phase, I encountered an error message in the console upon executing the 'npm start' command: C:&bsol ...

javascriptphpnode.jsreactjswebpack

MongoDB issue: ConfigurationError - The port number should be in integer format

Hello, I am new to MongoDB and currently working on creating a free database using MongoLab. The name of my database is "enron" and I have created a collection named "mbox". I have a JSON file in my system that I am trying to import into the collection u ...

pythonjsonmongodb

Challenges with window opening function while already in fullscreen view

Unsure of what might be causing the issue, but here's the problem... My code to open a new window is as follows: var opts = 'location=0,toolbar=0,menubar=0,scrollbars=0,resizable=0,height=450,width=300,right=350'; window.open('/' ...

javascriptjqueryuser-interfacewindow.open

linking a div within a navigation bar

I have implemented a template from bootstrap. Here is the navigation bar where you can find the about section. Inside it, there is a bootstrap button: <button type="button" class="btn btn-light">Light</button> When I click on this button, the ...

javascripthtmlcssbootstrap-4

Babeljs encountered an error: TypeError - The super expression should be a function or null, not undefined

Currently, my project involves implementing multiple-files inheritance in ES6 using Node.js and Babel. Babel is used to convert the ES6 code to ES5 since Node does not fully support ES6 yet. Import/export statements are used to connect the different files ...

javascriptnode.jsinheritancebabeljs

Add a style to every div except for the final one

I've attempted to add a unique style to all divs with the same class within a parent div, except for the last one. Strangely, my code doesn't seem to work as expected for this particular case. Can anyone spot what I might be overlooking? Right no ...

javascriptcssreactjs

What is the best way to distinguish between the paths for administrators and regular users?

Currently, I am in the process of setting up routes using node js for a dashboard. Firstly, users will need to log in to obtain a JWT token. With the Token, users can access various user-related routes such as editing, deleting, and logging out. However, ...

javascriptnode.jsreactjsmongodbexpress

Using Javascript to toggle between showing and hiding a block element

Although I've seen similar posts, I'm struggling to understand why my function isn't working. I'm still learning, so please be gentle with me! Here's the code snippets: HTML: <div id="BurgerMenu"> <button onclick="me ...

javascript

Symfony 4: Escaped slashes fixed in JSON response

Hey everyone, I'm encountering an issue with my Symfony 4 API. I'm trying to return a JSON response, but the serializer is returning a string with slashes that I can't seem to escape. Here's a snippet from my controller: [...] And t ...

phpjsonsymfonysymfony4