Extract information from a JSON string stored in a variable and transform it into objects within the $scope.variable

Question

Extract information from a JSON string stored in a variable and transform it into objects within the $scope.variable

I currently have a string variable that contains JSON data displayed below.

var jsonstring = [{"latitude":"51.5263","longitude":"-0.120285","altitude":"","device":"123","rating":"5","region":"Europe","customer":"","time":"1-2 Weeks","error":"Error 1","application":"Phone","age":"< 1 Year"},
{"latitude":"27.58","longitude":"23.43","altitude":"","device":"Asc 140","rating":"4","region":"Africa","customer":"","time":"< 1 Week","error":"Error 1","application":"PCB","age":"1-3 Years"},
{"latitude":"39.55","longitude":"116.25","altitude":"","device":"CVB","rating":"4","region":"China","customer":"","time":"1-2 Weeks","error":"Error 2","application":"Sorting","age":"3-5 Years"}]

My goal is to take this string and convert it into an array of objects (which will be stored in $scope.variable) so that I can access each object individually. I attempted to use JSON.parse(), but it ended up turning the entire string into one object instead of multiple objects.

Could someone assist me with this matter?

javascript angularjs json

Answer 1

Answer №1

To properly read the full string, use JSON.parse.

Once parsed, each object within the array is accessible through regular array methods such as myArray[index], myArray.map(), or myArray.forEach().

Answer 2

To properly read the full string, use JSON.parse.

Once parsed, each object within the array is accessible through regular array methods such as myArray[index], myArray.map(), or myArray.forEach().

Answer 3

Answer №2

[{"latitude":"51.5263","longitude":"-0.120285","altitude":"","device":"123","rating":"5","region":"Europe","customer":"","time":"1-2 Weeks","error":"Error 1","application":"Phone","age":"< 1 Year"}, {"latitude":"27.58","longitude":"23.43","altitude":"","device":"Asc 140","rating":"4","region":"Africa","customer":"","time":"< 1 Week","error":"Error 1","application":"PCB","age":"1-3 Years"}, {"latitude":"39.55","longitude":"116.25","altitude":"","device":"CVB","rating":"4","region":"China","customer":"","time":"1-2 Weeks","error":"Error 2","application":"Sorting","age":"3-5 Years"}]

This data represents an array of objects, not a string.

You could attempt the conversion again using this code snippet:

var jsonString = "[]"; var json = JSON.parse(jsonString);

Answer 4

[{"latitude":"51.5263","longitude":"-0.120285","altitude":"","device":"123","rating":"5","region":"Europe","customer":"","time":"1-2 Weeks","error":"Error 1","application":"Phone","age":"< 1 Year"}, {"latitude":"27.58","longitude":"23.43","altitude":"","device":"Asc 140","rating":"4","region":"Africa","customer":"","time":"< 1 Week","error":"Error 1","application":"PCB","age":"1-3 Years"}, {"latitude":"39.55","longitude":"116.25","altitude":"","device":"CVB","rating":"4","region":"China","customer":"","time":"1-2 Weeks","error":"Error 2","application":"Sorting","age":"3-5 Years"}]

This data represents an array of objects, not a string.

You could attempt the conversion again using this code snippet:

var jsonString = "[]"; var json = JSON.parse(jsonString);

Answer 5

Answer №3

let data = '[{"latitude":"51.5263","longitude":"-0.120285","altitude":"","device":"123","rating":"5","region":"Europe","customer":"","time":"1-2 Weeks","error":"Error 1","application":"Phone","age":"< 1 Year"}, {"latitude":"27.58","longitude":"23.43","altitude":"","device":"Asc 140","rating":"4","region":"Africa","customer":"","time":"< 1 Week","error":"Error 1","application":"PCB","age":"1-3 Years"}, {"latitude":"39.55","longitude":"116.25","altitude":"","device":"CVB","rating":"4","region":"China","customer":"","time":"1-2 Weeks","error":"Error 2","application":"Sorting","age":"3-5 Years"}]';
$scope.dataParsed = JSON.parse(data);

Answer 6

let data = '[{"latitude":"51.5263","longitude":"-0.120285","altitude":"","device":"123","rating":"5","region":"Europe","customer":"","time":"1-2 Weeks","error":"Error 1","application":"Phone","age":"< 1 Year"}, {"latitude":"27.58","longitude":"23.43","altitude":"","device":"Asc 140","rating":"4","region":"Africa","customer":"","time":"< 1 Week","error":"Error 1","application":"PCB","age":"1-3 Years"}, {"latitude":"39.55","longitude":"116.25","altitude":"","device":"CVB","rating":"4","region":"China","customer":"","time":"1-2 Weeks","error":"Error 2","application":"Sorting","age":"3-5 Years"}]';
$scope.dataParsed = JSON.parse(data);

Answer 7

Answer №4

The JSON.parse() function is used to parse a string as JSON data. The code you provided indicates an attempt to parse a JavaScript object instead of a string.

In the example below, an error occurs when trying to parse a JS object:

var jsonstring = [{},{}];
JSON.parse(jsonstring); // ERROR Uncaught SyntaxError: Unexpected token o

Instead, the following code should be used (note that jsonstring is now a string and not an object):

var jsonstring = '[{},{}]';
JSON.parse(jsonstring); // OK

Answer 8

The JSON.parse() function is used to parse a string as JSON data. The code you provided indicates an attempt to parse a JavaScript object instead of a string.

In the example below, an error occurs when trying to parse a JS object:

var jsonstring = [{},{}];
JSON.parse(jsonstring); // ERROR Uncaught SyntaxError: Unexpected token o

Instead, the following code should be used (note that jsonstring is now a string and not an object):

var jsonstring = '[{},{}]';
JSON.parse(jsonstring); // OK

Extract information from a JSON string stored in a variable and transform it into objects within the $scope.variable

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

AngularJS enables developers to make cross-domain requests using the $http service

I have my server running on port 6666. I am able to receive a response from Postman, however, when I attempt to access localhost:6666 in my browser, it displays a message

Looping through a Map in JSP containing a nested List of lists of Strings

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

Guide for setting up multiple checkbox event listeners with jQuery

Capturing a part of the screen using JavaScript for screen recording

Fixing the mobile display issue with react-responsive-carousel

How do I collapse the sidebar in mobile and tablet view using Bootstrap 4?

JSON manipulation: Snowflake flattening with dynamic key changes

Close to completing the AngularJS filter using an array of strings

What is the process for generating an HTTP response that results in a pipe error being thrown

Navigating between applications

Tips for showcasing the latest Google Map InfoWindows above previous ones

Display a smaller image preview in the product photo gallery

Using the ternary operator in React to implement inline styles

What could be causing the "unsupported media type" error in Postman when sending a POST request in a Spring Boot application?

Combine the content from multiple text areas and submit it to another text area

Utilizing Postgres JSON Operators in a WHERE Clause Using jOOQ

Changing a JavaScript string into an array

Is it possible to run unit tests for EcmaScript 6 (2015) code on a Headless Browser such as PhantomJS? If not, are there alternative methods to accomplish this task?