Electronjs manipulate json objectand reorder its keys internally


#1

I am using electronjs for a new application, and I have this json object
with string elements that conatin numbers(Here is the index file):
index.html

	 <html>
  <head> 
	<title>Test Json Sorting Order</title>
	<meta  charset="utf-8"/> 
	<script> 
	 const {
		ipcRenderer
	 } = require('electron');
	 let jsonData = { 
			"3_01":"element301",
			"2_5": 'element05',
			'2_10': 'element10',
			"2_11": 'element11',
			'2_13': 'element13',
			'2_1': 'element01',
			'2_2': 'element02',
			'2_4': 'element04',
			'2_14': 'element14',
			'2_15': 'element15',
		 }; 

	 window.onload = function () {
		let elemV = document.getElementById('testVanilla'); 
		for (let i in  jsonData)
			elemV.innerHTML += i +   "<br /> ";  
	 }
	 ipcRenderer.send('MsgOne', jsonData);
	 ipcRenderer.once('MsgOne-reply', (event, json) => {
		let elemE = document.getElementById('testElectron');
		 
		for (let i in  json)
			elemE.innerHTML += i  + "<br />" ;
	 });
   
</script>
  </head>
  <body> 
  <h2> Vanilla Javascript Example output </h2>
  <div id = "testVanilla">  </div>
  <h2> ElectronJs Example output </h2>
  <div id = "testElectron">  </div>
  </body>
</html>

and here is the main.js file

 const {app, BrowserWindow, ipcMain} = require('electron') 
 const path = require('path');
 const startUrl = path.resolve(__dirname + path.sep + 'index.html');
 let win

function createWindow () {
  win = new BrowserWindow({width: 800, height: 600}) 
win.loadURL(startUrl); 
 win.webContents.openDevTools(); 
  win.on('closed', function () { 
	win = null
  })
} 
app.on('ready', createWindow)

ipcMain.on('MsgOne',(event, arg) => {  
 event.sender.send('MsgOne-reply', arg);
})

when I want to send this data object from ipcMain to ipcRenderer or vise versa,
electronjs will reorder the object by his own way and give out this result:

2_1,2_10,2_11,2_13,2_14,2_15,2_2,2_4,2_5,3_01

electron is known to serialize the arguments in JSON internally .
So, I tried to apply the same code using vanilla javascript to display the same object,
and I got the same order as the original object , using serialized object or non-serialized:

3_01,2_5,2_10,2_11,2_13,2_1,2_2,2_4,2_14,2_15

How to prevent electronjs from manipulating the object internally to get the exact original object


#2

JavaScript objects aren’t the place to store ordered data. JavaScript arrays are the place to store ordered data. When you move data between the renderer and main, you move between two instances of JavaScript engines that won’t necessarily have identical opinions about how to hash keys in the object, so you’ll get a different order. Either provide an index along with the object detailing the order in which you’d like to see the members accessed, or store the key:value pairs as objects in an array and do an in-order traversal of the array. This is fundamental to JavaScript and not a problem in either the Node expression of V8 or the Chromium expression of V8. (Assuming Chromium uses V8–that’s more detail than I have.)


#3

@jbmonroe
Thank you for your reply, The problem was solved by reordering the JSON object to match the source, after receiving the response on the either sides, renderer and main.