In my journey to master Angular 2, I decided to challenge myself by creating a Connect Four game using Angular CLI back when it was still utilizing SystemJS.
Now, with the switch to the new Webpack-based CLI, I am encountering a peculiar issue...
The function below takes a JSON-encoded string as input and initializes a new game instance based on that data. To troubleshoot, I added some console.log statements:
export class ConnectFourGameModel {
static fromJSON(jsonString: any): ConnectFourGameModel {
let jsonData = JSON.parse(jsonString);
console.log('*** from JSON (compare the "columns" array between jsonString and jsonData below) ***');
console.log('jsonString: ', jsonString);
console.log('jsonData: ', jsonData);
...
return result;
}
While the initial console.log displays the correct JSON string:
jsonString:
{... Several fields here ...
"columns":[[0,0,0,0,0,1],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]]
}
However, the second console.log, which shows the outcome of calling JSON.parse on the string, displays inconsistent values:
jsonData:
> Object {... Several fields here ...
> columns: Array[15]
V 0: Array[6]
0: 2 <-- Should be 0
1: 2 <-- Should be 0
2: -1 <-- Should be 0
etc...
Why is this discrepancy occurring?
You may gain further insights by visiting the app on Github Pages, opening the browser's JavaScript console, and clicking on any column to make a move.
You can find the repository on GitHub: https://github.com/cmermingas/connect-four-webpack
I have searched for similar issues related to parsing nested arrays with JSON.parse but haven't been able to connect them to my specific problem.
Thank you in advance for your assistance!