CODEWITHSUNDEEP
javascriptjsongoogle-chromeinternet-explorerecmascript-6
Philippe Brodeur
Philippe Brodeur

Reputation: 151

JSON.stringify in Explorer 11

I have 1 line of code that crashes my entire JavaScript file in Explorer 11, but working perfectly in google chrome 49.0.2623. I 'Export' javascript objects through AJAX with the following code.

In Chrome:

function AjajPostComponentLists()

{

  var myFileContent = new Uint8Array();

   var aList1 = {FixedItems:1, List:["None", "Relay #1", "Relay #2"]};
   var aList2 = {FixedItems:1, List:["None", "Input #1", "Input #2", "Input #3", "Input #4", "Input #5"]};
   var aList3 = {FixedItems:1, List:["None", "Door #1", "Door #2"]};

   // ... (I won't list them all)

   myFileContent = JSON.stringify({aList1, aList2, aList3});

   // ...
}

The result will look like this:

{"aList1":{"FixedItems":1,"List":["None","Relay #1","Relay #2"]},"aList2":{"FixedItems":1,"List":["None","Input #1","Input #2","Input #3","Input #4","Input #5"]},"aList3":{"FixedItems":1,"List":["None","Door #1","Door #2"]}}

Explorer 11 complains:

SCRIPT1003: ':' attendu (awaited i guess, my explorer is in french)

anyways the error refers to the ternary operator which is, obviously unrelated.

I tried to put square brackets instead of curly braces and it 'pass' except i loose a lot in the process (object names for instance).

Any clue why this would go fine on Chrome but not IE ?

Thanks

Upvotes: 2

Views: 6890

Answers (3)

Philippe Brodeur
Philippe Brodeur

Reputation: 151

Thanxs for your feedback, this has improoved considerably my code plus making IE work again. I summarize here:

  1. Creating a global array of object:

var aEditableObjects = { Relay : {FixedItems:1, List:["None", "Relay #1", "Relay #2"]}, Input : {FixedItems:1, List:["None", "Input #1", "Input #2", "Input #3", "Input #4", "Input #5"]}, Door : {FixedItems:1, List:["None", "Door #1", "Door #2"]} };

  1. Stringify it, send it through AJAX

    myFileContent = JSON.stringify(aEditableObjects);

    myFileContent = encodeURI(myFileContent); // Facultative, For special chars

  2. Salvage it again through AJAX

    try{aEditableObjects = JSON.parse(decodeURI(xmlhttp.responseText));}catch(e){AjajError("AjajGetComponentLists");}

Upvotes: 0

winhowes
winhowes

Reputation: 8065

The problem is that IE doesn't support ES6 object literal extensions ie:

var text = 'some text';
var obj = { text };
console.log(obj); // { text: 'some text' }

To fix the issue, you'll have to declare the property name for the corresponding variable:

myFileContent = JSON.stringify({
    aList1: aList1,
    aList2: aList2,
    aList3: aList3
});

But to make that easier (because you have a lot of aListX variables) let's do this:

// Instead of aList1 = x, aList2 = y, let's make an array of lists
var aList = [];
aList.push({FixedItems:1, List:["None", "Relay #1", "Relay #2"]});
aList.push({FixedItems:1, List:["None", "Input #1", "Input #2", "Input #3", "Input #4", "Input #5"]});
aList.push({FixedItems:1, List:["None", "Door #1", "Door #2"]});

// ...

var aListObj = {};
for (var i = 0; i < aList.length; i++) {
    aListObj['aList' + (i + 1)] = aList[i];
}

myFileContent = JSON.stringify(aListObj);

voila! Now you don't have to type out every single one in your final object, just loop over the array. The output will be as desired.

Upvotes: 3

Joy Biswas
Joy Biswas

Reputation: 6527

Try JSON.stringify([aList1, aList2, aList3]); reference JSON.stringify

Upvotes: -1

Related Questions