AngularJS $http.get is causing an issue where it returns JSON data as a string with escaped quotes instead of actual JSON

I've encountered an interesting problem. My restful backend returns JSON. Accessing the API through the browser yields a validated JSON array with a JSON object.

[{"GUID_Auth":null,"Email_Address":"abc@aol,"Measure_Id":1,"Title":"Prop 41"}]

However, when I use a $http.get request in AngularJS, I receive a string with escaped quotes instead.

got success: "[{\"GUID_Auth\":null,\"Email_Address\":\"abc@aol\",\"Measure_Id\":1,\"Title\":\"Prop 41\"}]"

Below is a snippet of my AngularJS controller code:

.controller('MainCtrl', function($scope,$http) {
  $scope.GetData = function(){
    var responsePromise = $http.get('http://backend.api');
    responsePromise.success(function(data,status,headers,config){
      console.log('got success: ' + data);
      console.log('test'+ data[0].Email_Address)
    });
    responsePromise.error(function(data,status,headers,config){
      alert('ajax failed');
    });
  },

This issue is very perplexing. Any assistance would be greatly appreciated.

Answer №1

Ensure to deserialize the data properly before returning it using the following code: JSON.parse(data)

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

What could be causing the warning message about 'bodyParser' being deprecated to appear on my screen?

Even though I used the most recent versions of both packages, I am still receiving a warning that 'bodyParser' is deprecated. It doesn't seem to affect my code, but I'm curious as to why this warning is appearing. const express = requi ...

Creating JSON output in Spark with an array of objects

How can I transform the JSON structure using a Spark process to output an array of objects? My input file consists of the following lines: { "keyvals" : [[1,"a"], [2, "b"]] }, { "keyvals" : [[3,"c"], [4, "d"]] } The desired output format should be: { " ...

Display Middleware Functions Attached in Console

I must say I was quite surprised by my inability to find any relevant information on this topic with a quick Google search. It seems like I may not have been digging deep enough. Essentially, I am seeking details about the middleware functions utilized in ...

React timer slide show malfunctioning

While I have some experience with React, I'm struggling with a seemingly simple problem that I just can't figure out. My goal is to cycle through an array of images and display the image at the current index. The console logs show the correct in ...

When organizing data, the key value pair automatically sorts information according to the specified key

I have created a key value pair in Angular. The key represents the questionId and the value is the baseQuestion. The baseQuestion value may be null. One issue I am facing is that after insertion, the key value pairs are automatically sorted in ascending ...

Creating a Flask Python REST API that allows for optional JSON parameters to be passed in during a POST

I am currently in the process of developing a REST API using Flask that is responsible for adding photos to a database. The database abstraction is done through the PhotoModel Class. When the API receives an HTTP POST request in JSON format, it contains a ...

Enable draggable elements to be sortable, allowing them to be dropped onto a droppable area and then reconnected back to the list when they are dragged back

I am looking to seamlessly integrate jQuery-ui's draggable, droppable, and sortable functionalities. Here is how I envision the features working together: I have a list that can be sorted I've set up a droppable div The items in the sortable l ...

Tips for converting each item within an array into its own separate element

https://i.sstatic.net/Dxj1W.pngI currently have an array of objects that I am utilizing to generate a table in Angular. The table is functioning properly and successfully displays the data. However, I now have a requirement to enable editing for each indiv ...

Create a small circle in the bottom left corner with a constrained size

I'm trying to create a circle at the top of the screen on mobile, similar to the image below. The circle should take up a percentage of space, with the rest of the content appearing against a blue background as shown in the image. However, I'm h ...

Monitor changes in the select tag to display the updated value and output

I am new to using jQuery. While I have practiced using native PHP Ajax in the past, I now recognize the need to learn jQuery due to current technological advancements and demands. When the select tag changes, I send the "types" value via POST method to a ...

ESLint and @typescript-eslint discourage the use of stylistic rules, but how can we ensure consistency in our code style for elements like func-style?

Is Prettier the same as ESLint when it comes to rules and options for stylistic issues, as discussed in "@typescript-eslint"? Both ESLint and @typescript-eslint documentation discourage the use of stylistic rules. Formatting rules make sense, bu ...

methods for changing a string into a date or datetime format using PHP

I have a dilemma with my PHP script receiving "/Date(1403071826510)/" as a JSON date. How can I properly convert this to a PHP Date or DateTime? Here is my current approach: $milliseconds = (int) preg_replace("/[^0-9 ]/", '', $strDate); return ...

ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver

I am currently attempting to showcase data in a table where each row features an info icon that is only visible upon hovering. Additionally, I want a pop-up to appear when the info icon is clicked (there is an onclick function assigned to this button). He ...

Converting into a Dictionary

I'm having trouble parsing the JSON response below. Here is my code: { "result": "Success", "data": "[ { "name": "heal.jpg", "date": "2014-11-06 05:06:42" }, { "name": "google.png", "date": "2014-11-06 05:09:17" }, { "name": "d.j ...

Transform array elements into objects with associated indices and data types

Looking for assistance in restructuring this array to meet specific formatting requirements. Struggling to achieve the desired result on my own. The parent key should be named "type" and the subparent key should have a value of "category". Any suggestions ...

Seeking assistance with creating a custom function to organize arrays within an object

I'm currently attempting to organize an Object that contains only properties which are arrays. My goal is to sort these arrays based on their length in order to ensure that when using Object.keys(), the resulting list will display all names in the cor ...

Issue with host header detected in MERN stack configuration

"proxy": "https://mango-artist-rmdnr.pwskills.app:5000", While attempting to establish a connection between my frontend and backend, I encountered an issue with an invalid host header. The backend is operating on port 5000, and the fr ...

Integrate a loading screen on the website

Check out the awesome animation I created! Can this be used as a preloader on my website? Should I stick to creating a simple .gif or opt for a CSS animation instead? If it’s feasible, how do I go about integrating it into my site? Most tutorials suggest ...

Issue with Bing Maps Infobox mouseout event: Problem arises when attempting to change the htmlContent asynchronously

Can anyone provide assistance? I am currently utilizing the latest Bing Maps version (v8), and I have encountered an issue. When creating a custom Infobox and populating its contents using an async request such as setTimeout/ajax, the mouseout event is tr ...

I am having difficulty aligning the vertical touch event owl carousel

Here is the link: "jsfiddle.net/nLJ79/". Can you try to find a solution to make the owl carousel vertical? ...