JSON.stringify not working in IE10

Question

I am trying to parse some form data to produce JSON data to send in an ajax request. The following HTML is an oversimplified version of my code. I'm using APS.Net MVC4 and my rendered view produces the following HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="/Content/site.css" rel="stylesheet"/>
    <script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>

<div class="test-class" data-my-attribute="1"></div>
<div class="test-class" data-my-attribute="2"></div>
<div class="test-class" data-my-attribute="3"></div>

<script src="/Scripts/jquery-1.8.2.js"></script>

<script type="text/javascript">
    $(function () {
        jsonObj = [];
        $(".test-class").each(function () {
            var myAttribute = $(this).data('my-attribute');
            item = {}
            item["MyAttribute"] = myAttribute;
            jsonObj.push(item);
        });
        var data = { SomeOtherData: 1234, MyAttribs: jsonObj };
        console.log(JSON.stringify(data));
    });
</script>
</body>
</html>

In Chrome the output in the console is output as expected ...

{
    "SomeOtherData": 1234,
    "MyAttribs": [{
        "MyAttribute": 1
    }, {
        "MyAttribute": 2
    }, {
        "MyAttribute": 3
    }]
}

... but in IE the objects come out as null ...

{
    "SomeOtherData": 1234,
    "MyAttribs": [null, null, null]
}

I've had a look around and found some other questions that recommend checking that the page has <!DOCTYPE html> in it (which it does) and that doesn't seem to have any effect. I've also read that this should work in from IE8 onward so not sure what's happening.

Does anyone know why the objects are appearing as nulls in IE?
What is the best cross-browser solution to this?

Thanks, Gavin

Hi @Teemu, I put a debugger just before the console.log statement and verified that the jsonObj all looks fine. It's jQuery that is dealing with the data- attributes and that is working fine. — Gavin Sutherland
– Gavin Sutherland, Commented Nov 19, 2013 at 9:46
You could try one of the backfilling libraries like json3. This should hopefully produce a consistent result. — Liam
– Liam, Commented Nov 19, 2013 at 9:49
@Pavlo, ran the console.dir(jsonObj) and get: function item() { [native code] } , function item() { [native code] } , function item() { [native code] } { 0 : function item() { [native code] } , 1 : function item() { [native code] } , 2 : function item() { [native code] } } — Gavin Sutherland
– Gavin Sutherland, Commented Nov 19, 2013 at 9:50
Though this is not a solution, but please use var item = {} instead of item = {} — Rakesh Juyal
– Rakesh Juyal, Commented Nov 19, 2013 at 9:57

QuarK · Accepted Answer · 2013-11-19 09:57:20Z

11

The only weird thing I see is that:

  item = {}

Should be:

  var item = {}; // 'var' and semicolon

Sometimes IE is quite strict..

answered Nov 19, 2013 at 9:57

QuarK

2,5561 gold badge22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pavlo Over a year ago

Looks like IE has a native function called item.

olemarius Over a year ago

You probably saved me from hours of frustration! Thanks :)

Eliel Ignacio Ramirez Gamboa · Accepted Answer · 2021-12-23 20:31:03Z

-1

on my case use as @palvo sayed console.dir(obj)

other alternative is JSON2 from douglascrockford

edited Dec 23, 2021 at 20:31

answered Sep 24, 2021 at 21:13

Eliel Ignacio Ramirez Gamboa

11 bronze badge

1 Comment

Lofn Over a year ago

Please don't add "thank you" as an answer. Once you have sufficient reputation, you will be able to vote up questions and answers that you found helpful. - From Review

Collectives™ on Stack Overflow

JSON.stringify not working in IE10

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related