Develop Reference

Why use JSON.parse(decodeURIComponent(staticString))?

Certain dynamic web frameworks use this code fragment
<script>
appSettings = JSON.parse(
decodeURIComponent(
"%7B%22setting1%22%3A%22foo%22%2C%22setting2%22%3A123%7D"));
</script>
Is there a standard HTML5/JavaScript problem are they trying to solve with this code. Why not just
<script>
appSettings = {"setting1":"foo","setting2":123};
</script>
Note: this is dynamically generated code. I'm assuming on the server they are doing something like
var settingsString = encodeURIComponent(JSON.stringify(settings));
var output = '<script>appSettings=JSON.parse(decodeURIComponent("' +
settingsString +
'"));</script>';
But it seems like it would work just as well like this
var settingsString = JSON.stringify(settings);
var output = '<script>appSettings=' +
settingsString +
';</script>';
One idea is the latter could contain code but they are the ones providing the string, it's not user data so they're no chance it could be code. Plus using JSON.stringify on the server would remove all code. On the client even then a simple JSON.parse of a JSON.stringifyied object would prevent code.
Is there a concrete problem being solved by the triple parsing? Once by JavaScript, once by decodeURIComponent, once by JSON.parse?
THIS IS NOT AN OPINION BASED QUESTION
The question is what problem is being solved. Either there is a problem being solved or there is not. No opinions required to answer that question. For example if JSON.stringify happens to emit unparseable code sometimes (which as far I know it doesn't but if someone knows better then that would be a good answer as to why).
Also note: I'm not asking why their framework does this. I'm asking if there is real problem being solved in standard HTML5/JavaScript. In other words, should I adopt this pattern because I'm going to run into an issue someday if I don't.

Is there a concrete problem being solved by the triple parsing?
Yes. Your suggested solution has two problems:
It's parsed as HTML. Things like </script> can cause havoc in an inline script.
It's parsed as JS. Not all JSON strings are valid JS literals.
The decodeURIComponent + JSON.parse approach is a crude workaround however and looks more like a quick fix than a proper solution.

#katspaugh is correct
Testing
var settingString = JSON.stringify({
"</script>": "<script>bar=123</script>",
});
Generates the code for the above example as
<script>
appSettings = {"</script>":"<script>window.bar=123</script>"}
</script>
Which fails to parse as HTML. Adding the encodeURIComponent on the server JSON.parse(decodeURIComponent(...)) on the client fixes that issue

DO NOT USE IT.
let str = `C:\\Users\\Administrator\\Desktop\\小灶\\GT4T_translated_Chinese Simplified (简体中文)\\2013\%2F193461.pdf`
let newStr = decodeURIComponent(JSON.parse(`"${str}"`))
Depending on the str content, you may get unexpected errors. The code above will cause this error:
SyntaxError: Unexpected token U in JSON at position 4

Unable to convert strings to proper integers in Javascript

So I am trying to convert a string to an integer in javascript and then comparing it to an integer variable I created. I have read many many things online but nothing worked so far. This is my code:
var followedUsers = $('.ProfileNav-item.ProfileNav-item--following.is-active').find('.ProfileNav-value').html();
so when I type followedUsers in console I get "1256". I tried parseInt as follows:
var x = parseInt(followedUsers,10);
But when I type x in console I get 2. Yes it is an integer but its not correct integer.
I also tried parseFloat. It gives the same result. This one didn't work either.
var x=parseInt(followedUsers.valueOf(),10);
I dont know if this is a thing but I was just messing around trying different things. I saw another guy's question. So I gave that a shot:
var x = +followedUsers
This one gave me a NaN.
var x = followedUsers*1
This one also gave me a NaN.
I tried converting my integer value to a string and comparing them that way but that doesn't gives me correct outputs. I am running out of ideas guys, am I missing something here? Changing a string to an integer shouldn't be this hard, right?

Perhaps followedUsers isn't what you think it is.
I made a simple example in JSBin, trying to simulate you problem and everything is working:
http://jsbin.com/huzegovaxa/edit?html,js,console,output

Try getting followedUsers with .val() insted of .html()

It turns out that the old browser in my university computer lab doesn't support parseInt or any other methods I mentioned above. It worked fine when I tried it on other computers. Although I believe this post will be useful for anybody looking for conversion in means of seeing all the methods in one place

Try
var x = parseInt(followedUsers);

Razor/JavaScript and trailing semicolon

Using Visual Studio 2012, on a Razor view page, in the JavaScript section, I am getting what I think is a battle between Razor syntax vs JavaScript syntax. In particular, the trailing semicolon in the script section is flagged by intellisense and a compiler warning (not error) is delivered:
'Warning 13 Syntax error'.
If I remove it, then I get a statement termination recommendation (ReSharper in this case, but just good practice).
<script type="text/javascript">
$().ready(function(){
var customer = #Html.Raw(ViewBag.CustomerJSON); // <- Razor (I think) doesn't like this semicolon
});
</script>
Is this a bug in Razor? If so, is there a way I can rewrite this to avoid this issue?

Is this a bug in Razor?
Absolutely not. Run your application, and it will work as expected.
It is a bug in the tools you are using (Visual Studio 2012, ReSharper, ...) that are incapable of recognizing perfectly valid syntax and warning you about something that you shouldn't be warned about. You could try opening an issue on the Microsoft Connect site and signalling this bug if that hasn't already been done.

Since this still seems to be happening and it is a nuisance I figured I will at least let others know what I ended up using as a "hack". I don't want to ignore the warning and would rather accept a hokier syntax (and yes someone is going to say this will kill performance :))
What I use as a workaround is to use a client side addition at the end. For me this error occurred on defining an "integer" constant, so
window.foo = #(Model.Something);
gave me the good old semicolon error. I simply changed this to:
window.foo = #Model.Something + 0;
(In the stated questions case you should just be able to add '', so + ''.
I know there is a whole another addition happening on the client and it isn't elegant, but it does avoid the error. So use it or don't, but I prefer this over seeing the warning/error.
If someone knows of a server-side syntactical workaround for this I would prefer this to the client-side one, so please add.

I found that wrapping the Razor syntax in a JavaScript identity function also makes the IDE happy.
<script type="text/javascript">
#* I stands for Identity *#
function I(obj) { return obj; }
$().ready(function(){
var customer = I(#Html.Raw(ViewBag.CustomerJSON));
});
</script>

This worked for me:
var customer = #Html.Raw(ViewBag.CustomerJSON + ";")

Here's a workaround for booleans:
var myBool = #(Model.MyBool ? "true;" : "false;")

This worked for me
#Html.Raw(string.Format("var customer = {0};", ViewBag.CustomerJSON));

<script type="text/javascript">
$().ready(function(){
var customerName = ('#ViewBag.CustomerName'); // <- wrap in parens
});
</script>
Isn't it as simple as wrapping in parentheses? Putting values through the console seem to work fine with no side effect.
It works for strings, but it still gives the error for non-quoted values, but I still like this for string values. For numbers you could just use parseInt('#Model.TotalResultCount', 10).

Javascript - GetColoumnValue - IE6 problem

I have a js function named "GetListColumnValue". This function causes some problems with IE6. Is there any way to avoid the problem? (I thnk the problem is occured because of the concat) Here is the code sample. The last line is my solution which I am not sure that it works well. Any suggestions? Thanks.
function GetListColumnValue(listName, columnName) {
return document.getElementById(listName + "_" + columnName).value;
}
var DISCOUNT_QUANTITY = GetListColumnValue("lstRecords", "DISCOUNT_QUANTITY");
var DISCOUNT_QUANTITY = document.getElementById("lstRecords_DISCOUNT_QUANTITY");

IE6 has many many problems, but simple JS string concat isn't one of them. I don't think that's your problem.
You didn't specify what exactly the problem is, but looking at the two code samples you provided, they will do different things:
The first one (ie the function) returns the object.value, whereas the second one (ie setting it directly), you've just returned the object.
So the two code blocks set DISCOUNT_QUANTITY to different things. If you remove the .value from the function, it should work exactly the same as the other code block.
Hope that helps.

How to increase speed of getElementById() function on IE or give other solutions?

I have a project using Javascript parse json string and put data into div content.
In this case, all of itemname variables is the same div's id.
If variable i about 900, I run this code in Firefox 3 for <10ms, but it run on IE 7 for >9s, IE process this code slower 100 times than Firefox
I don't know what happen with IE ?
If I remove the line document.getElementById(itemname), speed of them seems the same.
The main problem arcording to me is document.getElementById() function?
Could you show me how to solve this prolem to increase this code on IE ?
Thank in advance.
var i = obj.items.length-2;
hnxmessageid = obj.items[i+1].v;
do{
itemname = obj.items[i].n;
itemvalue = obj.items[i].v;
document.getElementByid(itemname);
i--;
}while(i>=0);

Are you really noticing any latency?
gEBI is natively very very fast, I don't think you can avoid it anyway for what you're doing. Could you provide a low-down of what you're doing precisely? It looks like you're using a loop, but can you post exactly what you're doing inside of the loop, what your common goal of the script is?

document.getElementByid(itemname) is the fastest way to get a single element from the DOM in any real application you will sould not see any problems with using it, if you do see a problem you need to rethink you code a little it possible to acomplish any task with just a handfull of calls for this method. You can present you full problem if you like so I could show you an example

At least cache the reference to document:
var doc = document;
for(;;) {
doc.getElementById(..);
}