Utilize .map() to reference a JSON object field with spaces in the field name

When using .map() to transfer object fields from one JSON List to another, I encountered an issue with the starting list having spaces in the field names.

The process works smoothly for fields without spaces, like this:

$scope.dataList = results.data.map(el => ({
     IdApplication: el.ApplicationReference,
     AccNo: el.AccountNumber
}))

However, the initial JSON data is directly sourced from a CSV chosen by the user, and the client insists on keeping column names with spaces. This means I have to map a JSON field named 'Application Reference'.

I attempted enclosing the field name in '', but that resulted in an identifier expected error upon encountering the opening '.

Even trying bracket notation led to complications:

$scope.dataList = results.data.map(el => ({
    IdApplication: el.['Application Reference'],
    AccNo: el.AccountNumber
}))

This approach also triggered an identifier expected error with the opening [.

javascriptangularjsjsonobject

Answer №1

You mentioned that bracket notation does not work, however, the example provided does not actually demonstrate the usage of bracket notation.

The correct way to use bracket notation would be as follows:

$scope.dataList = results.data.map(el => ({
    IdApplication: el['Application Reference'],
    AccNo: el['Account Number']
}))

By the way, it is recommended to use camelCase for JSON properties. You can find more information about this practice here:

Answer №2

Feel free to utilize the following code snippet

$scope.dataList = results.data.map(el => {
    IdApplication: el['Application Reference'],
    AccNo: el['Account Number']
})

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

Discovering how to access the console once an Electron app has been packaged

Just as the title implies, I have successfully created a node / angular application using electron. The application works perfectly when launched with the electron ./app command. However, after building it (using either electron-packager or electron-builde ...

angularjsnode.jschromiumelectronelectron-builder

"Encountering a Reactjs error when trying to render a

Currently, I am engrossed in a React JS tutorial but seem to have hit a roadblock with the following error: Failed to compile. Error in ./src/Components/Projects.js Syntax error: Unexpected token (15:10) return { <ProjectItem key={projec ...

javascriptnpmsyntax-errorreactjs

Validating forms in React Bootstrap using unique validation criteria for individual fields

I am currently navigating the world of react-bootstrap and JavaScript, attempting to establish a straightforward form validation system with two distinct fields - name and email. My objective is to implement separate validation criteria for each field; val ...

javascriptnode.jsreact-bootstrap

.forEach returns an undefined value for each length

Having trouble with my if statement. It seems like the else block is working fine, but the if section is not functioning as expected. The variable count1 comes out as undefined. Interestingly, the conditions inside the if statement are working correctly ...

javascriptjqueryeach

Unleashing the power of multiple GET requests in node.js/express through

I have a route where I need to make multiple calls to the API server in order to gather all the necessary data. The code is working, but as I add a third call to the server, it's becoming hard to manage and read. I suspect that there's a better ...

javascriptnode.jsexpress

What could be causing the issue with dayjs dynamic importing in TypeScript?

Currently, I am developing a web screen within a .NET application and facing an issue with sending datetime preferences from the system to the web screen using CefSharp settings. AcceptLanguageList = CultureInfo.CurrentUICulture.Name In my TypeScript code ...

javascripttypescriptrollupjs

Transmitting information from directive to parent scope controller

I've successfully implemented a directive that generates a Google map on the page. Now, my goal is to pass the map object back out of the directive and into the parent controller. This will allow me to utilize it in various methods as needed. While ...

javascriptangularjsmaps

Trouble with jQuery UI add/remove class duration feature

I have implemented Jquery UI with the addClass/removeClass function successfully. However, I am facing an issue where the class changes without the specified duration. Below is the relevant code snippet: <script src="https://ajax.googleapis.com/ajax/li ...

javascriptjqueryjquery-ui

What is the best way to select and retrieve all span elements generated on my HTML webpage using jQuery?

For retrieving all input texts on my HTML page, I use the following code: var inputs = data.context.find(':input'); $('#result').text(JSON.stringify(inputs.serializeArray())); Once executed, I end up with a JSON string containing th ...

javascriptjqueryjsonhtmltextinput

The validation process is malfunctioning

Whenever I attempt to submit without filling in the correct information, there should be an alert message displayed for each section, and the text should be highlighted in red. However, it seems to be linking directly to the linked file instead. Any assist ...

javascripthtmlvalidation

Displaying error message if the size of the uploaded file surpasses the maxRequestLength limit

In the web.config file, I have set the maximum request length to 10240 and execution timeout to 30: <httpRuntime maxRequestLength="10240" executionTimeout="30" /> Using valum's AjaxUpload plugin on the client side, I encountered an issue with ...

javascriptasp.netasp.net-mvcvalums-file-uploader

Incorporate a division based on the selection made from a jQuery dropdown menu

Is there a way to dynamically display a div to the right of a drop-down menu based on the user's selection using DOM manipulation? For reference, you can view an example of my current progress here: http://jsbin.com/#/afojid/1/edit The initial drop ...

javascriptjquerydomhtmldrop-down-menu

The selector often yields varying results when used in a traditional browser versus when it is utilized with Selenium

When using Firefox in the console, I can enter: $("a:contains('tekst')") and it will display: object { length: 1, ... } However, when attempting the same in firefox opened by behat with sellenium, I receive the error message: SyntaxError: An ...

javascriptseleniumfirefoxjquery-selectorsbehat

ascx WebMethod for retrieving JSON string that is already encoded

Here's a simple question that may pose a challenge when searching for the answer on Google. I have a web method where a string has already been JSON encoded and I need to return this JSON packet to the client. In C#: [WebMethod(true)] [System.Web.S ...

c#asp.netajaxjsonweb-services

Converting JSON data from a file to an object using JQuery

I retrieved this information from the jquery website. My goal is to understand how to display JSON data on a webpage. I have validated the data on: http://jsonlint.com/ After running my script, I received the following results: [object Object] [object Obj ...

jsonparsinggetjson

What are the steps for integrating DoctorJS with Emacs?

Is there a method to utilize DoctorJS (formerly known as jsctags) in order to create a TAGS file specifically for Emacs? I have been researching this topic and it appears that it typically defaults to the vi tags style, although I may be overlooking a str ...

javascriptemacsctagsjsctagsetags

Experiencing difficulties when trying to upload images onto the inner surface of a spherical object using Three.js

I am new to working with Three.js and this is my first major project. Despite its simplicity, I have been struggling for the past two weeks trying to resolve an issue. My goal is to create a model of the Earth in Three.js along with a star field, but I can ...

javascriptthree.js

HTML Date input field not respecting locale settings and defaults to mm/dd/yyyy format

When using an html date input in an ng-repeat scenario, I noticed that it defaults to mm/dd/yyyy even though my computer's regional settings are set to dd/mm/yyyy. <script src="//unpkg.com/angular/angular.js"></script> <body ng-app&g ...

javascripthtmlangularjsdateinput

Resolving JavaScript ES6 module names

Forgive me if this is a silly question, but I am having trouble understanding how this particular line of code functions: import React from 'react'; My confusion lies in who and where exactly searches for the name 'react'? For instanc ...

javascriptreactjsecmascript-6

How does BodyParser from Express handle a request that results in a Bad Request with a Status

I am currently working with Node and Express. Here is the function I am using to fetch JSON data from the server: $.ajax({ url: url, contentType: "application/json", dataType: "json", ...

javascriptnode.jsexpress