Removing back Slash from JSON in angularjs - json

I am getting a JSON object from a webservice which after JSON.stringify().I am getting this output-`
[
{
"user": "A220",
"shorttext": "shanghai",
"reportedBy": "S,A",
"questions": "[{\"question\":\"Q1\",\"is_mand\":\"0\",\"type\":\"text\",\"answer\":\"w\",\"ansYesOrNo\":false,\"ansDetails\":\"\"},{\"question\":\"Q2\",\"is_mand\":\"0\",\"type\":\"text\",\"answer\":\"ed\",\"ansYesOrNo\":false,\"ansDetails\":\"\"}]",
"notifno": "20143995",
"error": "",
"createdOn": "2015-09-09 13:08:36",
"Id": 0,
"$$hashKey": "object:89"
}
]
`
I want to remove all these back slash.
I tried using
var a=JSON.stringify(<that object>).replace(/\\/g, "");
But its giving result as a form string that too INVALID like this-
[
{
"user": "A220",
"shorttext": "shanghai",
"reportedBy": "S,A",
"questions": "[{"question":"Q1","is_mand":"0","type":"text","answer":"w","ansYesOrNo":false,"ansDetails":""},{"question":"Q2","is_mand":"0","type":"text","answer":"ed","ansYesOrNo":false,"ansDetails":""}]",
"notifno": "20143995",
"error": "",
"createdOn": "2015-09-09 13:08:36",
"Id": 0,
"$$hashKey": "object:89"
}
]
My only objective is to remove the back slash without changing the data type.
I want to access the first question of questions.
Its not working...
JsFiddle link-LINK

You dont need to do JSON.stringify() in web service response. You can directly work like
$http.get('/someUrl').
then(function(response)
{
$scope.data = response;
},
function(response)
{
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Now you have print in html like {{data}}

You can use this method to remove backslash from a JSON string
var data = {"\\id\\":"\\23232\\","\\pass\\":"\\1434\\"};
console.log(data);
var b=JSON.stringify(data);
str = b.replace(/\\/g, '');
console.log(str);

Related

Angular POST method send only a JSON array

I have an Angular frontend which communicates with a Spring REST API. The Spring endpoint expects a JSON array, but with Angular HttpClient POST method I don't know how to send only a JSON array. Now I get HTTP error code 400 (Bad request).
What I need to send to the endpoint (this is tested and works in an API tester):
[
{
"date": "2020-05-26T02:00:00.000Z",
"blocked": false,
"reservation": null
},
{
"date": "2020-05-27T00:00:00.000Z",
"blocked": true,
"reservation": null
}
]
The way I'm sending the changes now:
modifyElements(id: number, elements: Element[]): Observable<Element[]> {
return this.http.post<Element[]>(this.baseUrl + '/modify/' + id, elements);
}
The structure of the data that is sent by HttpClient's put method is below:
{
"0": {
"date": "2020-05-26T02:00:00.000Z",
"blocked": false,
"reservation": null
},
"1": {
"date": "2020-05-27T00:00:00.000Z",
"blocked": true,
"reservation": null
}
}
What I also tried and is closer to what I need:
this.http.post<Element[]>(this.baseUrl + '/modify/' + id, {elements: elements});
What this sends:
"elements": [
{
"date": "2020-05-26T02:00:00.000Z",
"blocked": false,
"reservation": null
},
{
"date": "2020-05-27T00:00:00.000Z",
"blocked": true,
"reservation": null
}
]
This is still not accepted by the API, results in the same error.
Please help me how can I send the data in the right structure, only a JSON array.
I already know how can I workaround this issue in Spring: in the controller method expecting for a request body of a new class that has just one member which is a collection, but that's not a nice solution.
I would like to know how it can be done without a workaround, on the Angular side.
Edit:
Thank you for the answers so far, but they return the same array I had, with the same structure.
The data structures I inserted in the question are the request bodies sent by Angular's HttpClient, copied from Chrome DevTools.
I think the problem is not with my original array, but with how HttpClient creates the JSON that it sends.
It seems to me that it can't interpret an array as a simple JSON array, and can only send a JSON array as a key-value pair, the value being the JSON array.
What I need instead is to get rid of the key and send only the plain value.
The question is, can HttpClient do that?
I faced the same problem, and I resolved with:
return this.http.request<ReturnType>(
'POST',
URL,
{
headers: new HttpHeaders({
'Content-Type': 'application/json'
}),
body: JSON.stringify(array)
});
Use this snippet
modifyElements(id: number, elements: Element[]): Observable<Element[]> {
const elementsArray = Object.assign([], elements);
return this.http.post<Element[]>(this.baseUrl + '/modify/' + id, elementsArray );
}
This will convert to the required format
var a ={
"0": {
"date": "2020-05-26T02:00:00.000Z",
"blocked": false,
"reservation": null
},
"1": {
"date": "2020-05-27T00:00:00.000Z",
"blocked": true,
"reservation": null
}
}
var c = Object.assign([], a)
console.log(c)
as I see you have object type [key:value] ,key is index value is an element entity. you have to extract values from this object and then send it to the server
Object.values(elements) //send this

Microsoft.Graph Unable to deserialize the response

I am quite new to programming and especially Microsoft.Graph
I am having problems handling the response to:
https://graph.microsoft.com/v1.0/me/drive/root/children
the response looks like this (just much longer):
{
"#odata.context": "https://graph.microsoft.com/v1.0/$metadata#users('xyz%40hotmail.com')/drive/root/children",
"value": [
{
"createdBy": {
"user": {
"displayName": "xyz",
"id": "cf58e4781082"
}
},
"createdDateTime": "2009-01-08T08:52:07.063Z",
"cTag": "adDpFREJDR4RTQMTgxMDgyITEyOC42MzYxODM0MTU0Mjc3MDAwMDA",
"eTag": "aRURCQ0Y1OEU0A4MiExMjguMA",
"id": "EDBCF58E471082!128",
"lastModifiedBy": {
"user": {
"displayName": "xyz",
"id": "edbcf58e48082"
}
}, ............. etc...
The response that I received is correct, in JSON format (I believe ><), but I cannot figure out how to parse it into an array containing the folders name.
Please help!
Have considered using the Microsoft Graph client library? It will deserialize the JSON. Your call will look like this:
// Return all children files and folders off the drive root.
var driveItems = await graphClient.Me.Drive
.Root
.Children
.Request()
.GetAsync();
foreach (var item in driveItems)
{
// Get your item information
}
Here's some samples to help you get started:
https://github.com/microsoftgraph?utf8=%E2%9C%93&q=csharp
You can use the JavaScriptSerializer to do this. Assuming
//json contains the JSON Response
var jsonOutput = new System.Web.Script.Serialization.JavaScriptSerializer();
jsonOutput.DeserializeObject(json);
This has been discussed earlier. See this thread: Easiest way to parse JSON response
Refer this link for JavaScriptSerializer: https://msdn.microsoft.com/en-us/library/system.web.script.serialization.javascriptserializer(v=vs.110).aspx

Removing excess comma on JSON Object

Currently been working on eliminating the excess "," comma on the json object I have below.
{"rules": {
"1000": {
"action": "2",
"category": "skype",
"entity": "Private",
"id": "1000",
},
"1200": {
"action": "2",
"category": "http",
"entity": "Public",
"id": "1200",
},
"100": {
"action": "2",
"category": "ftp",
"entity": "Public",
"id": "100",
},
"0": {
"entity": "Private",
"category": "alcohol, tobacco",
"action": "1",
"id": "low",
},
"3000": {
} }}
Maybe you have some insights on what's the cleanest way to eliminate it using AngularJS.
The data was parsed from this code snippet.
var request = {
url: 'sample/uri',
method: "GET",
transformResponse: specialTransform
};
var response = $q.defer( );
$http( request ).success( function( THIS DATA -> data, status ) {
eval
var fixTrailingCommas = function (jsonString) {
var jsonObj;
eval('jsonObj = ' + jsonString);
return JSON.stringify(jsonObj);
};
fixTrailingCommas('{"rules": { "1000": { "action": "2", "category": "skype", "entity": "Private", "id": "1000" , } } }');
Please use eval here only if you completely trust incoming json, and also be aware of other eval evils as described on MDN and its note on JSON parsing
Note that since JSON syntax is limited compared to JavaScript syntax, many valid JavaScript literals will not parse as JSON. For example, trailing commas are not allowed in JSON, and property names (keys) in object literals must be enclosed in quotes. Be sure to use a JSON serializer to generate strings that will be later parsed as JSON.
You may also choose to rely on implementation of JSON2 by Douglas Crockford which uses eval internally
On current browsers, this file does nothing,
preferring the built-in JSON object. There is no reason to use this file unless
fate compels you to support IE8, which is something that no one should ever
have to do again.
But because we really need to use this library, we have to make few code modifications, e.g. simply comment out JSON type check, which will then override native browser object (or we may also introduce new JSON2 global variable)
//if (typeof JSON !== 'object') {
JSON = {};
//}
P.S. Other parsing fuctions json_parse.js and json_parse_state.js, which don't use eval, throw a syntax error
Angular part
var config = {
transformResponse: function (data, headers) {
if(headers("content-type") === "application/json" && angular.isString(data)) {
try {
data = JSON.parse(data);
} catch (e) {
// if parsing error, try another parser
// or just fix commas, if you know for sure that the problem is in commas
data = JSON2.parse(data);
}
return data;
} else {
return data;
}
}
};
$http.get("rules.json", config).success(function (data) {
$scope.rules = data;
});
So as you said, the JSON is wrongly generated on the server you are taking it from, can you change the way it is generated there? (Follow this: Can you use a trailing comma in a JSON object?)
In case you are unable to do so, you need to use something like mentioned here:
Can json.loads ignore trailing commas?
library to repair a JSON object, like: https://www.npmjs.com/package/jsonrepair
(try some online fix tool here: http://www.javascriptformat.com/)
or some regexp magic

Using JSON.parse for accessing a json file

jQuery Code:
$(document).ready(function(){
$.getJSON('dat.js', function(data) {
var obj = JSON.parse(data);
alert(obj[0].title);
});
});
My JSON file :
{
"posts":
[
{
"title": "ajax | Programming ",
"url": "hello"
},
{
"title": "jQuery and Ajax Demos Pard - 3",
"url": "how are you"
},
]
}
Its giving me an error JSON.parse:unexpected character. But when I tried to do it by taking the json inside an array its ok then. I want to access the data from json file itself
you do parseJSON when your input is a json string and u expect an object. Here, getJSON is already giving u the response as an object.
try this
$(document).ready(function(){
$.getJSON('dat.js', function(obj) {
alert(obj.posts[0].title);
});
});
A Quick jslint check says that you have invalid json at line 11 },, Try removing the comma from the last member of "posts" and see if that help
{
"title": "jQuery and Ajax Demos Pard - 3",
"url": "how are you"
}, <---- THIS

JSON Parsing Error

I got problem. I have this JSON automatically generated by Open Flash Chart php library. The problem is, OFC report JSON Parse Error [Syntax Error] while test result using http://www.jsonlint.com/ report that my JSON is fine. But, w3c parser report error too:(
Any help?
Here's the JSON:
{
"title": "Followers Trend",
"elements": [
{
"type": "area_hollow",
"fill-alpha": 0.35,
"values": [
],
"colour": "#5B56B6",
"text": "Followers",
"font-size": 12
}
],
"x_axis": {
"colour": "#A2ACBA",
"grid-colour": "#D7E4A3",
"offset": false,
"steps": 4,
"labels": {
"steps": 2,
"rotate": "vertical",
"colour": "#A2ACBA",
"labels": [
]
}
},
"x_legend": {
"text": "Week Trend (2009-08-17 - 2009-08-24)",
"style": "{font-size: 20px; color: #778877}"
},
"y_axis": {
"min": 0,
"max": 150,
"steps": 30
}
}
A few things I learned while playing with JSON is:
If you have validate the JSON on various JSON validation services and the result is GOOD. But, when you failed to eval it, try to wrap your JSON using ( and ) => ({jsondata})
var json = eval( "(" + jsonString + ")" );
NEVER build the JSON yourself. It's a gate to failure. Always use official or popular JSON library (depending on your language). For example:
On PHP: use json_encode()
On Java Android: use org.json.JSONObject
A list of all other available library to play with JSON is listed in JSON official page.
To display and format JSON data, you can use JSONViewer.
I think the w3c parser is having issues, I couldn't even get it to parse this:
{
"title" : "Followers Trend"
}
It gave me this error:
Validation errors:
lexer couldn't parse at "{
"title" : "Followers Trend"
}"
http://json.bloople.net helps you visualise the code to find and correct errors.
try this code, JSON.parse() method is not able to handle string which is in a
single quote as a value in the right-hand side. also if you want to handle the
UTF-8 character code, then it will do.
parseJSON = function() {
var data = {};
var reader = new FileReader();
reader.onload = function() {
try {
data = JSON.parse(reader.result.replace(/'/g, "\""));
console.log(data)
} catch (ex) {
console.log('error' + ex);
}
};
reader.readAsText(fileSelector_test[0].files[0], 'utf-8');
}