Making use of pre-stringified JSON pieces - javascript

Let's say I already have a JSON string; perhaps I got it from the server.
data = '{"a": 1, "b": 2}'
I want to use postMessage or some other API which requires a JSON string and send it the information in the form
{ action: 'save', data }
Of course I could do
postMessage(JSON.stringify({ action: 'save', data: JSON.parse(data) });
but this ends up arsing the data and then immediately restringifying it as part of the stringified object being send to postMessage.
Is there any clean way to take advantage of the fact that I already have the stringified version of part of the data to be sent? I am concerned about this because actually data could be 100K or more in length and parsing it and stringifying it is not free.
Note: I know I could send the JSON string for data as is and have the receiving side parse it, but I cannot change the semantics of the receiving side.
Note 2: Of course I could also engage in various ways of building the JSON myself, such as
'{ "action": "save", "data": ' + data + '}'
but would prefer to avoid that.

You can try something like this:
var data = {
"a":"test1",
"b":"test2",
"c":{
"c1":"test3.1",
"c2":"test3.2"
}
}
var object = {};
object["action"] = "save";
object["data"] = data;
console.log(object);

I asked myself the same question and was pointed to here.
There are different solutions to this. I setup a little jsperf test.
Most promising aproach (if you don't need to have the thing nested) is removing the end and adding the stringified json:
var stringifiedObject = JSON.stringify({
some: 'random',
obj: 'propterties'
});
var res = JSON.stringify({
outer: 'object'
});
res = res.substring(0, res.length-1) + ', "alreadyString":' + stringifiedObject + '}';

Related

How do I set multiple values of a JSON object?

So I've been working on this project but I'm stuck because I can't figure out how I should go about setting the other values of this new JSON object. So basically on the front end I have this:
HTML page view. The 'cat4' ID is the new object I tried to create, and illustrates the error I'm trying to fix. The problem is that I'm having trouble setting the LIMIT value of newly created objects (or multiple values at all). Here is the code where the object is created:
function sendCat()
{
window.clearTimeout(timeoutID);
var newCat = document.getElementById("newCat").value
var lim = document.getElementById("limit").value
var data;
data = "cat=" + newCat + ", limit=" + lim;
var jData = JSON.stringify(data);
makeRec("POST", "/cats", 201, poller, data);
document.getElementById("newCat").value = "Name";
document.getElementById("limit").value = "0";
}
In particular I've been playing around with the line data = "cat=" + newCat + ", limit=" + lim; but no combination of things I try has worked so far. Is there a way I can modify this line so that when the data is sent it will work? I find it odd that the line of code works but only for setting one part of the object.
The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.
MDN
I think this is what you want:
const newCat = 'Meow';
const newLimit = 5;
const data = {
cat: newCat,
limit: newLimit
}
console.log(JSON.stringify(data));
What you're referring to as a 'JSON object' is actually just a javascript object, you can make one using object literal syntax. An object literal with multiple properties looks like this:
var data = {
cat: newCat,
limit: lim
};
makeRec("POST", "/cats", 201, poller, JSON.stringify(data));
assuming the fifth parameter to makeRec is supposed to be the POST request body as stringified JSON, as your code seems to imply

Parsing string of array of array of string back to array

I have an array of arrays of strings saved in a database column as a varchar:
[["ben"],["john","mike"],["ben"]]
I want to parse the data back into an array of arrays, so I can show the data on the screen. While attempting to do this, I ran into an awkward and annoying problem:
Here's the JSON response that is generated on the server and sent back to the client:
var response = "[{\"Names\":\""+ rows[i].Names + "\"}]";
res.send(response);
Here's the client code I wrote to parse the data:
jQuery.ajax({
type: "GET",
url: ...,
dataType: 'json',
contentType: "application/json; charset=utf-8"
}).done(function(data) {
jQuery.each(JSON.parse(data), function(i, parsedData) {
var names = JSON.parse(parsedData.Names);
var labels = "";
for (var n = 0; n < names.length; n++) {
var label = "<label>" + names[n] + "</label>";
labels = labels + label;
}
console.log(labels);
});
});
This is the error i'm getting:
Here's the JSON validation:
How can I solve this?
There is a simple rule:
Never use string tools to create or modify JSON. No string concatenation (+), no string replace and God forbid no regex.
The only way to produce JSON is to use a JSON serializer on a data structure. And the only way to manipulate JSON is to parse it, modify the data structure, and then serialize it again. JSON itself is to be treated as a constant, for all intents and purposes.
Your server code violates that rule. Change it like this:
var responseData = [{
Names: rows[i].Names
}];
var response = JSON.stringify(responseData);
In the above, responseData is a data structure. You are free to modify it. response is derived from that. You are not free to modify it, the only thing you can do with response is to write it to the client.
Note that rows[i].Names might be JSON itself, so you end up with a double-encoded value in your response.
Provided the server sends the Content-Type: application/json header, the client can use this:
jQuery.get("...").done(function(data) {
// data is already parsed here, you don't need to parse it
jQuery.each(data, function(i, item) {
// item.Names is not yet (!) parsed here, so we need to parse it
var names = JSON.parse(item.Names);
var labels = names.map(function (name) {
return $("<label>", {text: name});
}
console.log( labels );
});
});
If you don't want to call JSON.parse() on the client, you have to call it on the server:
var responseData = [{
Names: JSON.parse(rows[i].Names)
}];
var response = JSON.stringify(responseData);

Javascript map CSV string to JSON array

this one baffles me and I'm not even sure I'm searching the correct keywords for possible explanations.
I am sending an RPC to a remote server. The response I get is just a comma-delimited string with values (no keys) like so:
val1,val2,val3,val4,val5,val6,val7,val8,val9
When I receive this response I need to map these values through JS to keys (hard-coded, I designate) and generate a JSON array like this:
{
"response": {
"mykey1" : "val1",
"mykey2" : "val2",
"mykey3" : "val3",
"mykey4" : "val4",
"mykey5" : "val5",
"mykey6" : "val6",
"mykey7" : "val7",
"mykey8" : "val8",
"mykey9" : "val9"
}
}
Can anybody nudge me in the right direction...sample code or tutorials that are close to what I am looking for? This is a for middleware script that gets called when server receives the response.
This is my first post here, been looking a long time learning and applying in Obj-C and as I am learning Swift, but JS is new to me. I apologize in advance if I am breaking any protocols by asking for help without posting my feeble attempts at figuring this out...
You can split the response on comma, which will give you an array.
Since both arrays (keys and vals) are the same length, you can loop over either and create your array of objects that way. See below
var response = 'val1,val2,val3,val4,val5';
var keys = [
'key1', 'key2', 'key3', 'key4', 'key5'
];
var dict = [];
var vals = response.split(',');
vals.forEach(function(val, i) {
dict[keys[i]] = val;
});
console.log(dict);
Read my comment, then check this out:
var result = 'val1,val2,val3,val4,val5,val6,val7,val8,val9';
// real question should be why result is not JSON already
var resArray = result.split(',');
console.log(resArray[0]); // first result
console.log(resArray[1]); // second result

Convert ajax String data to array to update ploty data

I am trying to update a jqplot chart dynamically with Ajax requests.
My server is returning a string represtation of the data as such:
"[['Juice',30],['Milk',30],['Water',30]]"
However I need to convert this string into an array of arrays.
Is this the correct approach to update the data and if so what is the best way to convert the string.
$.ajax({
url:'http://localhost',
success:function(plotData){
var data = plotData.split(",");
if(plot){
plot.series[0].data = data;
plot.redraw();
}
},
fail:function(error){
alert('error:'+error);
}
});
This code will convert into a one dimentional array:
0: "[['Helpdesk'"
1: "30]"
2: "['Users'"
3: "30]"
4: "['Auto Generated'"
5: "30]]"
You can use eval("var x= " + plotData) as an alternate solution. There are few dangers in using eval, please go through it before using it.
for convertiong a string u possibly could use this function
var plotData = "[['Juice',30],['Milk',30],['Water',30]]";
function strToArr(str) {
//pattern that checks for '[', ']'
var patt=/[\[\]]/gi;
//we replace the pattern with '' symbol
var tmp = str.replace(patt,'').split(',');
var result = []
for (var i = 0; i < tmp.length; i+=2) {
//now all data is in one array, we have to putt in pairs
result[i] = [ tmp[i], tmp[i+1] ]
}
return result;
}
console.log( strToArr(plotData) );
Format your data correctly
It looks like the response you're getting from the server is supposed to be JSON. But, it isn't valid json, and as such is represented as a string.
The change required is very trivial, This is invalid json:
[['Juice',30],['Milk',30],['Water',30]]
This is valid json:
[["Juice",30],["Milk",30],["Water",30]]
The only difference is the quotes. Changing the response string, may (depending on what you're doing server side) correct things immediately such that plotData is already an array of 3 arrays.
Return the right content type
If you are not already serving the response with correct http headers - ensure the response is served as application/json, this of course is in addition to serving a valid JSON string.
Force interpretation as json
To force jQuery to attempt to parse the response as json - you can set dataType explicitly:
$.ajax({
...
dataType: 'JSON'
...
});
I can't remember how strict this is that may work with no server side modifications.
Use JSON.parse
Alternatively, if you just want to handle the string as-is; you could just use JSON.parse:
input = "[['Juice',30],['Milk',30],['Water',30]]";
jsonString = input.replace(/'/g, '"'); // correct quotes as per point 1
result = JSON.parse(jsonString);
result would then be an array containing 3 arrays.

How do you pass multiple parameters of the same type to jQuery Get

I'm trying to GET some data from a site using jQuery $.get. I need to set 2 parameters of the same type:
..&q=Some Text&q=Some other text
jQuery appears to be overwriting the first instance of q with the second and only sending 1. Any way around this?
This is the code I was trying to use:
var params = {
"otherParam":"x",
"q":text,
"q":title
};
$.get(url, params, mySuccessFunction);
Try:
var params = {
"otherParam": "x",
"q": [ text, title ]
};
edit — more information: array-valued parameters like that are treated specially by jQuery. To appease many common server frameworks, by default (since release 1.5 or 1.6 I think) those will result in parameter names that include "[]" (open- and close-bracket characters) as a suffix (no number, contrary to my erroneous comment below). If you don't want that, you can set
jQuery.ajaxSettings.traditional = true;
and it'll just be "q" instead of "q[]".
And another way to solve it that does not require encodeURIComponent() or messing with jQuery.ajaxSettings.traditional = true; which I would prefer not to do because I don't want to interfere (even temporarily) with what other parts of the site might be doing simultaneously.
Is:
var params=[
{name:"q", value:title},
{name:"q", value:text}
];
$.get(url, params, mySuccessFunction);
Another approach without modifying jQuery.ajaxSettings.traditional = true; is to use $.param() http://api.jquery.com/jQuery.param/
So something like this:
var params = {
"otherParam": "x",
"q": [ text, title ]
};
$.get(url, $.param(params, true), mySuccessFunction);
You can write the URL like this :
$.get(
url+'?q='+encodeURIComponent(text)+'&q='+encodeURIComponent(title)+'&otherParam='+encodeURIComponent('x'),
mySuccessFunction
);
Things are pretty simple and described in jQuery website http://api.jquery.com/jquery.param/.
First create a params object
var params=[{
name: 'param1',
value: 'hello'
},
{
name: 'param1',
value: 'alex'
}];
next create the data to be sent to the service.
var data = jQuery.param(params);
That object can be inserted as the data param of the ajax request. I like using a settings object
var settings={
url: 'api/domain/timeline',
type: 'get',
contentType: 'application/json',
data: data
};
$.ajax(settings);

Categories