Converting a stringified array of objects into an actual array of objects using Javascript

Question

Converting a stringified array of objects into an actual array of objects using Javascript

After receiving a HTTP response, I am faced with the challenge of working with the following variable:

let data = '[{name: "John"}, {name: "Alice"}, {name: "Lily"}]'

Although there are more objects with additional properties, this snippet provides a glimpse of the data structure.

Upon attempting to use JSON.parse(data), an error is thrown:

[{name: "John"}, {name: "Alice"}, {name: "Lily"}]
  ^

SyntaxError: Unexpected token n

What approach should I take in order to successfully parse this string into an array of JavaScript objects?

javascript arrays json parsing

Answer 1

Answer №1

This JSON is invalid. To make it valid, you must enclose the keys in quotes ("name").

[{"name": "John"}, {"name": "Alice"}, {"name": "Lily"}]

The mistake is due to the parser encountering an 'n' instead of a closing quote mark.

Answer 2

This JSON is invalid. To make it valid, you must enclose the keys in quotes ("name").

[{"name": "John"}, {"name": "Alice"}, {"name": "Lily"}]

The mistake is due to the parser encountering an 'n' instead of a closing quote mark.

Answer 3

Answer №2

Due to the invalid JSON format (missing quotes around property keys), parsing the string using JSON.parse is not possible. If you have control over the response, consider returning:

[{"name": "John"}, {"name": "Alice"}, {"name": "Lily"}]

See it in Action:

var data = '[{"name": "John"}, {"name": "Alice"}, {"name": "Lily"}]' 

console.log(JSON.parse(data))

.as-console-wrapper { min-height: 100%; }

Answer 4

Due to the invalid JSON format (missing quotes around property keys), parsing the string using JSON.parse is not possible. If you have control over the response, consider returning:

[{"name": "John"}, {"name": "Alice"}, {"name": "Lily"}]

See it in Action:

var data = '[{"name": "John"}, {"name": "Alice"}, {"name": "Lily"}]' 

console.log(JSON.parse(data))

.as-console-wrapper { min-height: 100%; }

Answer 5

Answer №3

Due to the strict input format, the parsing process can be easily carried out.

function removeEdges(inputString) { return inputString.substring(1, inputString.length - 1); }
var keyValuePairs = removeEdges(output).split(', ');
var listOfObjects = keyValuePairs.map(function(pair) { 
    var separatedPair = removeEdges(pair).split(': ');
    var object = {};
    object[separatedPair[0]] = removeEdges(separatedPair[1]); 
    return object;
});

Answer 6

Due to the strict input format, the parsing process can be easily carried out.

function removeEdges(inputString) { return inputString.substring(1, inputString.length - 1); }
var keyValuePairs = removeEdges(output).split(', ');
var listOfObjects = keyValuePairs.map(function(pair) { 
    var separatedPair = removeEdges(pair).split(': ');
    var object = {};
    object[separatedPair[0]] = removeEdges(separatedPair[1]); 
    return object;
});

Converting a stringified array of objects into an actual array of objects using Javascript

Answer №1

Answer №2

See it in Action:

Answer №3

Similar questions

ensure that only one option can be selected with the checkbox

Angular pop-up message not displaying title or content

Exploring a new approach to organizing data with LocalStorage and AngularJS

Switch the background color alternately from red to green every second

Modify the font style of numbers based on the keyboard language selected by the user

Performing Jquery functions on several elements at once

Tips for sending an input file to an input file multiple times

User-generated JSON Object with Date Information

What are the specific extensions for email validation?

Utilize the to_json function in Postgres to convert multiple columns into JSON format

How do you eliminate row highlighting on the <TableRow> component within Material-UI's <Table> using ReactJS?

`Increase Your Javascript Heap Memory Allocation in Next.js`

The image code is not recognizing the image source

Is it possible to create a Vue JSX component inside a Single File Component using the <script setup> syntax and then incorporate it into the template of the S

Unable to interpret JSON input when calling Bing Distance Matrix API from PHP

Using Jquery to drag and drop items into a specific target zone

"Why does the form.submit() function fail in IE9 when the form is in an iframe and the user is coming from Gmail

A step-by-step guide on incorporating the C3 Gauge Chart into an Angular 5 application

Enhancing link functionality with jQuery on a dynamically generated server page

Sorting through JSON data obtained through YQL