Is there a way to transform this JSON string into a particular format?

When moving a string from view to controller, I have encountered an issue. Below is the ajax code I am using:

    var formData = $('#spec-wip-form, #platingspec-form').serializeArray();
    var platingId = @Model.PlatingId;

    var form = JSON.stringify(formData);
    $.ajax({
        url: "/Specifications/Edit",
        type: 'PUT',
        data: { form, cleaningProcess, platingId },
        success: function () {
            onUpdated();
        }
    });

The current JSON format generated by this code looks like this:

"[{\"name\":\"PlatingId\",\"value\":\"1\"},{\"name\":\"DivisionId\",\"value\":\"79\"}]

I wish for the format to be as follows:

"[{\"PlatingId\":\"1\"},{\"DivisionId\":\"79\"}]

My initial attempt to solve this involved using the following code section:

var formData = $('#spec-wip-form, #platingspec-form').serialize();

However, this resulted in the following output:

formData: PlatingId=1&DivisionId=79&

Any suggestions on how I can achieve the desired JSON format?

javascriptajaxasp.net-core-mvc

Answer №1

Big thanks to @SebastionSimon for the helpful revision. By the way, this code is not redundantly stringified twice in order to match your anticipated output. If needed, you have the option to utilize JSON.stringify a second time for consistency.

let jsonData = '[{"name":"PlatingId","value":"1"},{"name":"DivisionId","value":"79"}]';

let newJsonData = JSON.stringify(
    JSON.parse(jsonData).map(
        ({name, value}) => ({[name]: value})
        ))

console.log(newJsonData)

Answer №2

Utilize the Object.fromEntries() method to consolidate multiple key-value pairs into a single object.

const formData = [{"name":"UserID","value":"123"},{"name":"Role","value":"Admin"}];

const newObj = Object.fromEntries(formData.map(({name,value})=> [name, value]));

console.log(newObj)

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

Leverage the power of require() beyond the confines of Node

I'm currently exploring how to integrate an Angular.js application with Node.js. At the moment, I have the following code in the file MY-PROJECT/public/js/controllers.js function LoginController( $scope ) { // fetch waiters var Waiter = require( ...

javascriptnode.jsexpressangularjs

What is the best way to integrate a loop in JavaScript to retrieve values?

<script> var data={ Data: { name: 'aaaa', number: '0003' }, values: { val: '-20.00', rate: '22047' }, user: [ '6|1|5', '10|1|15' ] }; ...

javascript

What is the best method for breaking down this JSON data into distinct 'objects'?

I am struggling with deserializing JSON data into multiple instances of an object I have defined. Here is how the object is structured: function Question_Value__c () { this.Id=null; this.Name=null; this.Question__c=null; this.Order__c=null ...

javascriptjsondeserialization

How can I resolve a JavaScript issue that occurs when accessing a property within the same object?

Displayed below is a snippet from a much larger JavaScript object within my project. Thousands of lines have been omitted to focus solely on the area in question... Line 6 is specifically where the issue lies. Here's a concise example involving Java ...

javascript

How can we enhance the efficiency of rendering text on the screen?

Imagine having a <p> tag inside a <div> with specific properties: div { height: 100px; width: 100px; overflow: hidden; } My goal is to continuously add words to the <p> tag until an overflow is detected, meaning stop when the f ...

javascripthtmlcss

Uncovering the Mystery Behind the Repetitive Execution of useEffect in Next.js

I am working on a Time Tracking feature for my Next.js application. In the ./app/components/TimeTracking.tsx file, I have implemented the following component: 'use client'; import React, { useEffect, useState } from 'react'; import { u ...

javascriptreactjsnext.jsreact-hooks

How can I incorporate an error page into this Express application?

I'm currently working on an express application that simulates a basic version of Twitter. One feature I'm trying to implement is an error page. This way, if there are any issues with the routing, users will see a friendly message instead of a g ...

javascriptnode.jsexpress

Transforming Javascript code using regular expressions into C#

Currently, I am facing a challenge while trying to translate some Javascript code into .NET. Despite my efforts, I have not been able to get it right. The task at hand involves converting paths like /test/:value1/:value2 in Express for NodeJS to a regular ...

c#javascriptregexnode.js

Error 504 occurs on Express.js due to a timeout issue while a timer is active

Encountering a "504 Gateway Timeout" error on my Express.js application when a JavaScript timer is set to run every 20 seconds. Here is the code for my Express.js listener and the timer: const express = require('express') const app = express() ...

javascriptnode.jsexpresstimer

AngularJS does not recognize a dynamically created array when using ng-include with ng-repeat

Issue with ng-repeat Directive I have encountered a problem where the ng-repeat directive does not track the addition of a new array, specifically 'options'. This issue arises when the directive is used within a template displayed using ng-dialo ...

javascriptangularjsng-dialog

jQuery plugin stops functioning properly following the use of the jQuery display block method

In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs ...

javascriptjqueryhtmlcss

Extract items from javascript array based on their index value

Recently I came across a javascript array var countries = ["India","USA","China","Canada","China"]; My goal is to eliminate "China" only from the 2nd position while keeping the rest intact. var countries = ["India","USA","Canada","China"]; I am see ...

javascriptarrays

The Checkbox generated by Javascript is failing to properly close the tag

When I generate a checkbox in this manner and insert it into my table's [TD] tag: let checkbox = document.createElement('input'); checkbox.type = 'checkbox'; td.appendChild(checkbox); It yields: <tr> <td> ...

javascript

Utilizing the principles of object orientation in Javascript to enhance event management

After attempting to modularize my JavaScript and make it object oriented, I found myself struggling when dealing with components that have multiple instances. This is an example of how my code currently looks: The HTML file structure is as follows: & ...

javascriptjqueryoop

Steps for Adding a JSON Array into an Object in Angular

Here is a JSON Array that I have: 0: {name: "Jan", value: 12} 1: {name: "Mar", value: 14} 2: {name: "Feb", value: 11} 3: {name: "Apr", value: 10} 4: {name: "May", value: 14} 5: {name: "Jun", value ...

javascriptjsonangulartypescript

Working towards ensuring my website is responsive

Hello, I am a CSS beginner currently working as an intern. My task is to make a website's CSS compatible with Internet Explorer, and then make it responsive and scalable. Essentially, the design should retain its appearance when the window size change ...

javascripthtmlcss

Tips for implementing collapsible mobile navigation in Django with the help of Materialize CSS

I'm facing some issues with implementing a responsive navbar that collapses into a 'hamburger bar' on mobile devices and in split view. I have managed to display the hamburger bar, but when I click on it nothing happens. Here's my curre ...

javascriptpythonhtmldjangomaterialize

There seems to be a glitch in the angularjs application

This is my code for the Services.js file: angular.module('RateRequestApp.services', []). factory('rateRequestAPIservice', function($http) { var rateRequestApi = {}; rateRequestApi.getData = function () { retur ...

javascriptangularjs

Analyzing the structure according to the month/week/year

My array consists of count and date values: day = [ { count: 1, date: '2022-07-07' }, { count: 1, date: '2022-08-14' }, { count: 2, date: '2022-07-19' }, { count: 4, date: '2022-07-19' }, { count: 2, date: ...

javascripthtmldatedatetime

Is it possible for images underneath to receive focus when hovering over them?

I'm struggling with a layout of thumbnails on my page. We'll refer to them as A, B, C, etc. They are currently displayed like this: A, B, C, D, E, F, G, H, I, J, K, L, M, N... and so on. When you hover over one thumbnail, it enlarges by 2.5 t ...

javascriptjqueryhtmlcss