Our JSON array property is not being parsed correctly by AngularJS

Upon receiving our GET request, the response is as follows: 

{
    "access_token": "pi7ID4bsZIC9yN ... 76gnblw",
    "token_type": "bearer",
    "expires_in": 1209599,
    "userName": "super0",
    "userRoles": "["member", "admin"]",
    ".issued": "Tue, 04 Feb 2014 05:07:51 GMT",
    ".expires": "Tue, 18 Feb 2014 05:07:51 GMT"
}

An issue arises when AngularJS transforms it into this object. 

data: Object
    .expires: "Tue, 18 Feb 2014 05:07:51 GMT"
    .issued: "Tue, 04 Feb 2014 05:07:51 GMT"
    access_token: "pi7ID4bsZIC9yN ... 76gnblw"
    expires_in: 1209599
    token_type: "bearer"
    userName: "super0"
    userRoles: "["member", "admin"]"
    __proto__: Object

The challenge lies in converting "userRoles" from a string to a JavaScript array. What solutions are available for this problem?

javascriptarraysjsonangularjsparsing

Answer №1

The JSON provided is not valid as the array should not be enclosed in quotes.

A correct format would resemble the following:

{
    "access_token": "pi7ID4bsZIC9yN ... 76gnblw",
    "token_type": "bearer",
    "expires_in": 1209599,
    "userName": "super0",
    "userRoles": ["member", "admin"],
    ".issued": "Tue, 04 Feb 2014 05:07:51 GMT",
    ".expires": "Tue, 18 Feb 2014 05:07:51 GMT"
}

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

Twitter typeahead not functioning properly when used in conjunction with ajax requests

I have limited experience in the frontend world and I'm currently working on getting this to function properly. $('#the-basics .typeahead').typeahead({ hint: true, highlight: true, minLength: 6 }, { source: function (query, ...

javascriptjqueryajaxjsontwitter-typeahead

Finding the timestamp of a blog post in Blogger

Is it possible to retrieve the date and time of a post on Blogger using JavaScript or jQuery? ...

javascriptjqueryblogsblogger

PDFMAKE: A Guide to Duplicating Elements in the 'Content' Array

I have an Array within Items. My goal is to display them in a Table format using PDFMake. table: { multiple pages headerRows: 2, widths: ['auto', 100, 200, 'auto', 'auto', 'auto'], body: [ ...

javascripthtmlangularjsarrayspdfmake

Transferring request body data between routes in Express: A guide

In my MERN application, there are two specific routes in place. The first route is designated for 'Storing Data' and is referred to as the 'data' route. The second route is used for 'Register User' functionalities and is known ...

javascriptnode.jsexpress

Creating a dynamic HTML table using Vue 3

My table is not showing the data I'm fetching from my API. Even though I can see the data in my console.log, it's not populating the table. Could there be an issue with how I'm calling the data to display in the table? <template> < ...

javascripthtmlvue.jsvue-componentvuejs3

There are several ways to input values from JavaScript into ASP controls

Greetings, I am a newcomer to the world of web development, specifically using ASP.NET. I have been struggling with the task of passing or returning a value to display on an HTML element, such as an input field. Despite trying multiple solutions that I fo ...

javascriptc#htmlasp.net

Calculating the product of two input fields and storing the result in a third input field using a for loop

There's a small issue I'm facing. I have implemented a For Loop to generate multiple sets of 3 input fields - (Quantity, Rate, Price). Using a Javascript function, I aim to retrieve the Ids of 'Quantity' and 'Rate', and then d ...

javascriptphpjqueryhtmlmysql

The jQuery Select2 Plugin for Dynamic Dropdowns with Ajax Integration

Utilizing the Select2 plugin with Ajax to connect to my employee database has been quite helpful. It allows setting up a meeting and selecting all the employees you wish to invite. Here is an example of the code: $("#requiredAttendees").select2({ ...

javascriptjqueryajaxjsonjquery-select2

Display array identification numbers using PHP

I am facing an issue with a function. Is it possible to display and automatically count all arrays? Here is my code: $mrJackMaker = 'mrjack'; $aromatyMrJack = array( 'Arbuz' => $mrJackMaker.'1', 'Banan'= ...

phparrayscount

Please ensure there is space reserved for the header above the content

Currently, I am working on creating a webpage with a unique banner design. My goal is for the content to scroll from the bottom and remain fixed directly under the upper portion of the banner. Initially, my idea was to have the content box take up the siz ...

javascripthtmlcss

Exploring Improved Error Handling for Spring MVC REST Service and Client. Seeking more efficient solutions for managing errors

Seeking Improved Error Handling for Spring MVC REST Service and Client I am interested in enhancing the way errors are handled in my Spring MVC REST Service and Client. Sometimes I need to send an error message or a status code back to the client, but I a ...

jsonspringrestspring-mvcresttemplate

`How can I display the name of a JSON property in NiFi?`

Here is my JSON data: { "nm_questionario":{"isEmpty":"MSGE1 - Nome do Question&aacute;rio"}, "ds_questionario":{"isEmpty":"MSGE1 - Descri&ccedil;&atilde;o do Question&aacute;rio"}, "dt_inicio_vigencia":{"isEmpty":"MSGE1 - Data de Vig&am ...

jsonapache-nifi

Exhibition of Expertise: NodeJS and Express Module Bypasses SQLite3 Database Inquiry

Currently, I am trying to establish a connection between a function in a separate JS file and my index file. However, during the execution of the function, it seems to skip over a certain part of the code, going back to the app.post method in the index.js ...

javascriptnode.jsexpresssqlite

Struggling to send API POST request using Next.js

I'm relatively new to backend development, as well as Next.js and TypeScript. I'm currently attempting to make a POST request to an API that will receive a formData object and use it to create a new listing. My approach involves utilizing Next.js ...

javascriptreactjstypescriptnext.js

What steps can I take to stop an AJAX request from causing the page to reload

I am facing an issue with my AJAX code where it reloads after a successful upload on the server side. Below is my HTML code that I have included. Any help or suggestions would be greatly appreciated. Thank you. function UploadVid(){ var file = $("#in ...

javascriptjquerynode.jsajaxfile-upload

Leveraging jsonp with nodejs and original ajax

I wanted to understand how jsonp works, so I decided to create a demo using nodejs without jQuery. However, I encountered some issues with my code. Here is what I tried: views/index.jade doctype html html head title Demo of jsonp body #res ...

javascriptjqueryajaxnode.jsjsonp

You do not have the authorization to access this content

I have been working on a Laravel web application to upload images into a data table and allow users to download the uploaded image on click. Initially, everything was working fine until I made changes in the code from return '{!! Html::link('ima ...

javascriptphpajaxlaravelxampp

Converting Json string containing escape characters into a valid json format on Android

Trying to parse a JSON response from a REST call has been difficult due to the presence of escape characters such as "\n". Even replacing "\" with "" did not yield the desired results. "[{\"message_id\":50870,\"message\":&bso ...

javaandroidjson

Troubleshooting Issue with Bootstrap 4 Modal Varying Content Display

Dealing with a minor issue where I'm unable to get a modal to fetch data from an HTML table and populate it into a Bootstrap 4 Modal. I've attempted various methods as evident in the code snippets below. Currently in a learning phase, I need to ...

javascriptjqueryhtmlbootstrap-4bootstrap-modal

Transition smoothly between HTML pages by using a script to fade in and out while changing images from an array

I am facing a small issue. I have successfully implemented a fadeIn and fadeOut effect on an entire page by clicking HTML links. However, I now want to dynamically change the images associated with these links using an array. Here is the code for transiti ...

javascriptjqueryhtmlcssarrays