I'm trying to construct a String in JS that can be passed into JSON as an with a very particular format. Desired result is a string of the following form:
["PNG","350x150","127 KB"]
Where PNG correspond to a particular image's type, where 350x150 is the image's dimensions and where 127 KB is the image's size. Each of these threee values are string variables:
var imgType = getImageType(); // Returns "PNG"
var imgDim = getImageDim(); // Returns "350x150"
var imgSize = getImageSize(); // Returns "127 KB"
var imgDescription = '["' + imgType + '","' + imgDim + '","' + imgSize + '"]';
// Sanity check
alert(imgDescription);
iVO.images[thisImage] = {
"fizz":"buzz",
"imgDesc":imgDescription,
"foo":"bar"
}
alert(JSON.stringify(iVO));
The first alert (on the imgDescription variable) prints:
["PNG","350x150","127 KB"]
So far, so good. However, the minute we pass it to the iVO construct and stringify the resultant JSON, it generates the following output (after I pretty print format it):
{
"images":
{
"4490i45"":
{
"fizz":"buzz",
"imgDesc":"[\"PNG\",\"350x150\",\"127 KB\"]",
"foo":"bar"
}
}
}
All of my double quotes (") have been escaped (\")!!! Also, the value for imgDesc is enclosed in double-quotes, which is not what we want (see desired JSON below):
When I send this JSON back to the server its causing the server to choke.
Not sure what is going on here but I've tried several other suggestions, including replacing my double-quotes with '\x22' instances which didn't help.
Any ideas as to what would fix this to get the desired result from JSON.stringify(iVO)? Ultimately that's the only thing that matters, that the we end up sending the following to the server:
{
"images":
{
"4490i45"":
{
"fizz":"buzz",
"imgDesc":["PNG","350x150","127 KB"],
"foo":"bar"
}
}
}
No escaped double-quotes, and the value for imgDesc is not double-quoted. Thanks in advance!
Why don't you just put imgDescription as regular array
var imgDescription = [imgType , imgDim, imgSize];
Stringify should take care of what you are trying to do, otherwise you are passing imgDescription as a string and stringify would escape the quotes.
e.g.
var imgType = "PNG";
var imgDim = "350x150";
var imgSize = "127 KB";
var d = {
"fizz":"buzz",
"imgDesc":[imgType , imgDim, imgSize],
"foo":"bar"
}
console.log(JSON.stringify(d));
Output:
{"fizz":"buzz","imgDesc":["PNG","350x150","127 KB"],"foo":"bar"}
Related
I am trying to convert a string i receive back from an API into a JSON object in Angular.
The issue is that the string is not normalized to be parsed into JSON easily.
This is the string im working with:
"{rootCause=EJBusinessException: This is a sample exception thrown for testing additional info field, description=This is a more detailed description about the incident., stackTrace=com.springboot.streams.infrastructure.web.heartbeat.HeartbeatService.testServiceNow(HeartbeatService.java:200)}"
When trying to do JSON.parse(myStr) it throws an error due to invalid string format.
Is there an easy way to convert the listed string into a more correct JSON format, getting rid of the '=' and replacing them with ':' instead.
There is more to it than just .replace(/['"]+/g, ''), as even with that the string is not ready to be turned into JSON yet.
Hoping someone more versed in Javascript knows a trick i dont.
You just need to manipulate the string before parsing it remove unecessary string that can cause error to the object like "{" and "}" and split it by "," example is in below.
var obj = {}, str = "{rootCause=EJBusinessException: This is a sample exception thrown for testing additional info field, description=This is a more detailed description about the incident., stackTrace=com.springboot.streams.infrastructure.web.heartbeat.HeartbeatService.testServiceNow(HeartbeatService.java:200)}"
str.split(",").forEach((st, i) => {
pair = st.split("=")
if(pair.length > 1) {
obj[pair[0].replace("{",'').replace("}", '').trim()] = pair[1]
} else {
obj[i] = pair
}
})
console.log(obj)
As commenters have posted, unless you control the API or at least have documentation that output will always follow a specific format, then you are limited in what you can do. With your current example, however you can trim off the extraneous bits to get the actual data... (remove braces, split on comma, split on equals) to get your key:value pairs... then build a javascript object from scratch with the data... if you need json string at that point can just JSON.stringify()
var initialString = "{rootCause=EJBusinessException: This is a sample exception thrown for testing additional info field, description=This is a more detailed description about the incident., stackTrace=com.springboot.streams.infrastructure.web.heartbeat.HeartbeatService.testServiceNow(HeartbeatService.java:200)}"
var trimmedString = initialString.substr(1, initialString.length - 2);
var pairArray = trimmedString.split(',');
var objArray = [];
pairArray.forEach(pair => {
var elementArray = pair.split('=');
var obj = {
key: elementArray[0].trim(),
value: elementArray[1].trim()
};
objArray.push(obj);
});
var returnObj = {};
objArray.forEach(element => {
returnObj[element.key] = element.value;
});
console.log(JSON.stringify(returnObj));
I have a textbox which accepts user defined key value pairs like:
{'Apple':'Red', 'Lemon':'Green'} and i want it to be converted to an array of key value pair.
I have code:
var color= document.getElementById('txtColor').value;
The problem is i get it just as a string if i try: color['Apple'] it shows undefined; whereas i expect 'Red'. How can i do the conversion so that i get something like:
var color={'Apple':'Red', 'Lemon':'Green'}
and get value 'Red' on color['Apple'].
Thanks in advance.
I have a similar usecase. You have to JSON.parse() the value.
var obj = JSON.parse(document.getElementById('txtColor').value.replace(/'/g, '"'));
console.log(obj['Apple']);
<textarea id="txtColor">{'Apple':'Red', 'Lemon':'Green'}</textarea>
I assume following
let color = document.getElementById('txtColor').value; // This line returns {'Apple':'Red', 'Lemon':'Green'}
If I'm correct you can do following
try {
// Here you can write logic for format json ex. Convert single quotes to double quotes
// This may help to convert well formatted json string https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
let colorJson = JSON.parse(color);
console.log(colorJson["Apple"]) // This will return your expected value.
} catch(e) {
console.log('Invalid json format')
}
var color = document.getElementById('txtColor').value;
//JSON.stringify will validate the JSON string
var jsonValidString = JSON.stringify(eval("(" + color + ")"));
//If JSON string is valid then we can conver string to JSON object
var JSONObj = JSON.parse(jsonValidString);
//We can use JSON.KeyName or JSON["KeyName"] both way you can get value
console.log(JSONObj.Apple, " --- ", JSONObj["Apple"]);
console.log(JSONObj.Lemon, " --- ", JSONObj["Lemon"]);
<input id="txtColor" value="{'Apple':'Red', 'Lemon':'Green'}" type="text" />
Is it me or GoogleTagManager do not seem to accept base64 encoded pictures?
Exemple with the very basic code below with a very basic image.
I get the following error :
- Type : JavaScript Too Long"
- Description :
"The JavaScript in your Arbitrary HTML tag has too many contiguous non-whitespace characters (e.g. an array literal '[1,2,..]' that is too long). Try inserting spaces between statements to allow compilation (e.g. change '[1,2,...]' to '[1, 2, ...]')."
Is there no way to implement this in GTM, beside putting the js somewhere else than directly into GTM?
Best,
J.
<script type="text/javascript">
var myurl = "http://wwww.toto.com";
var myimg = "data:image/jpeg;base64,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";
$("#beta-ad").empty();
$('<div/>', { id: "1" }).insertBefore($("#beta-ad"));
$("#1").append('<img src="' + myimg + '" style="display:inline; width: auto;" ></img>')
</script>
I think this is by design. But the workaround proposed by #Matus works.
To get around the issue of having to generate JS for a very long base base 64 encoded string I wrote a utility function, splitting the string into chunks of 150 (which GTM accepts), and generating the JS concatenation code.
You can then drop this code into your GTM tag, and reference the base64 variable.
function splitString(string, size, multiline) {
var matchAllToken = (multiline == true) ? '[^]' : '.';
var re = new RegExp(matchAllToken + '{1,' + size + '}', 'g');
var responses = string.match(re);
var value = "var base64='';";
responses.forEach(response => {
value += "base64+='" + response + "';";
});
return value;
}
var base64 = 'eyJ3aWRnZXRfc2.... etc';
var gtmString = splitString(base64, 150, true);
console.log(gtmString);
http://jsfiddle.net/azqpdwxg/2/
How can I get the array value from a hidden input field and be able to grab the elements I need?
<input type="hidden" name="digital_object[prdcls][0][prdcl_links][0][_resolved]" id="digital_object[prdcls][0][prdcl_links][0][_resolved]" value="{"id":"/prdcl_titles/1","title":"test (test)","primary_type":"prdcl_title","types":["prdcl_title"],"json":"{\"lock_version\":0,\"title\":\"test (test)\",\"publication\":\"test\",\"publisher\":\"test\",\"created_by\":\"admin\",\"last_modified_by\":\"admin\",\"create_time\":\"2016-06-07T13:20:46Z\",\"system_mtime\":\"2016-06-07T13:20:46Z\",\"user_mtime\":\"2016-06-07T13:20:46Z\",\"jsonmodel_type\":\"prdcl_title\",\"uri\":\"/prdcl_titles/1\"}","suppressed":false,"publish":false,"system_generated":false,"repository":"global","created_by":"admin","last_modified_by":"admin","user_mtime":"2016-06-07T13:20:46Z","system_mtime":"2016-06-07T13:20:46Z","create_time":"2016-06-07T13:20:46Z","uri":"/prdcl_titles/1","jsonmodel_type":"prdcl_title"}">
When I run this I get 'undefined' for valp.
I also have the issue where the function prdcl_link is not executing on the hidden field being created or changed.
$( document ).ready(function() {
$("#digital_object[prdcls][0][prdcl_links][0][_resolved]").on('keyup change', prdcl_link);
$("#digital_object_prdcls__0__volume_num_").on('keyup change', prdcl_link);
$("#digital_object_prdcls__0__issue_num_").on('keyup change', prdcl_link);
function prdcl_link(){
var valp = {};
valp = $("#digital_object[prdcls][0][prdcl_links][0][_resolved]").val();
console.log(valp);
var valv = $("#digital_object_prdcls__0__volume_num_").val();
var vali = $("#digital_object_prdcls__0__issue_num_").val();
var res;
var pub;
var vol;
var iss;
if (valp!=""){
pub = valp['json']['publication'];
res = pub;
if (valv!=""){
vol = " - Volume " + valv;
res = res.concat(vol);
}
if (vali!=""){
if (valv!=""){
iss = ", Issue " + vali;
}
else {
iss = " - Issue " + vali;
}
res = res.concat(iss);
}
}
$("#digital_object_title_").val(res);
};
});
The value of the input seems to be JSON format, but HTML encoded. First you need to decode the string. Underscore have en unescape function, or you can search to find other ways to do it.
Then you can use JSON.parse to convert it to a javaScript object. But you have an error, so it can't be parsed. There are some extra quotes around an object named 'json'
...,"json":"{...}",...
If you didn't have the quotes around the brackets, it would be valid. What I think happened here is the 'json' object got converted to JSON format (a string) first. Then this string was part of another object, which also got converted to JSON. Now it's impossible to distinguish which quotes is part of what.
Hi I need to parse a JavaScript array that has multiple keys in it. Here is an example of what I need to do. Any help is appreciated.
[
week1{
Meth:100,
Marijuana:122,
pDrugs:12,
},
week2{
Meth:15,
Marijuana:30,
pDrugs:22,
},
]
I need this to be broken into separate arrays based on if it is week1 or week2. Thanks again in advance.
The end needs to be like this.
week1 = ["Meth:100,Marijuana:122,pDrugs12"] etc.
Your JSON has severe improper formatting. If it's already an object (which I'm guessing it isn't -- otherwise, you'd be getting unexpected token errors in your browser console), then change the brackets to braces, remove the trailing commas, and add colons after the object items that don't have them (after week1 and week2).
If what you have is a string (obtained from XHR or similar), you'll have to do all the changes mentioned above, as well as enclosing each object item within quotation marks. It should look like:
{
"week1": {
"Meth":100,
"Marijuana":122,
"pDrugs":12
},
"week2": {
"Meth":15,
"Marijuana":30,
"pDrugs":22
}
}
Whatever you're dealing with that's serving such horribly invalid JSON ought to be taken out back and shot. Be that as it may, this'll require some serious string manipulation. You're going to have to do some thorough massaging with String.replace() and some regular expressions.
After you get the JSON valid, then you can get week1 with JSON.parse and drilling down the resulting object.
function log(what) { document.getElementById('out').value += what + '\n------------------\n'; }
var tree = '[ week1{ Meth:100, Marijuana:122, pDrugs:12, }, week2{ Meth:15, Marijuana:30, pDrugs:22, }, ]';
// string is raw
log(tree);
tree = tree.replace(
'/\r?\n/g', '' // remove line breaks to make further regexps easier
).replace(
'[','{' // replace [ with {
).replace(
']','}' // replace ] with }
).replace(
/\w+(?=[\{\:])/g, // add quotes to object items
function($1) { return '"'+$1+'"'; } // using a lambda function
).replace(
/"\{/g, '": {' // add colon after object items
).replace(
/,(?=\s*\})/g, '' // remove trailing commas
);
// string has been fixed
log(tree);
var obj = JSON.parse(tree);
log('obj.week1 = ' + JSON.stringify(obj.week1));
log('obj.week1.Meth = ' + obj.week1.Meth);
#out {
width: 100%;
height: 170px;
}
<textarea id="out"></textarea>