Your code produces exactly the structure you've said you wanted, the main issue here is that you're having trouble interpreting the console output, which is fair enough — web consoles can take some getting used to, and sometimes show things in a less-than-useful way. (Secondarily, JSON is irrelevant in your code. You're just dealing with JavaScript objects [except very temporarily on one line that serves no purpose]. And you've quoted output that must be from an earlier version of your code.)
Console output
You've said:
That gives me this:
{
id:'1',
name: 'mike'
new_arr: [[Object], [Object]]
}
That's just how whatever console you're using is showing it to you; presumably, each of those [Object] is something you could expand with the mouse. Separately, I think that that quote is from an earlier version of your code, as it is missing the outer array, but your code clearly shows you logging datList, not data.
Different web consoles behave differently, and some of them even behave differently depending on whether you log something with the console closed and then open it or log it with the console open. To make things even more confusing, when you log an object, with most consoles the console has a reference to the object and only shows its top-level structure with an > or similar next to it to expand it, and when you expand it, it shows you that new information as it is then (when you expand it), not as it was originally.
But your code produces the structure you've said you wanted. Let's look at it:
Running your snippet with the console open in Chrome, here's what I get initially (nothing is expanded):
If I then click the > next to the indicated [Object], I get this:
That's called "expanding" that part of the object tree.
If I then expand the indicated [Object], I get this:
And then expanding the indicated new_arr:
And then each of those objects:
If we modify your code snippet slightly so it outputs the JSON that would be produced by JSON.stringify(datList):
var datList = [];
var data = {
id: '1',
name: 'mike'
};
data = JSON.parse(JSON.stringify(data));
var arr = [{prop1: '1', prop2: '2'}, {prop1: 'one', prop2: 'two'}];
data.new_arr = arr;
datList.push(data);
console.log( JSON.stringify(datList, null, 2));
// Only change ^^^^^^^^^^^^^^^ ^^^^^^^^^^
We get:
[
{
"id": "1",
"name": "mike",
"new_arr": [
{
"prop1": "1",
"prop2": "2"
},
{
"prop1": "one",
"prop2": "two"
}
]
}
]
...which is exactly the structure you said you wanted.
JSON
There's no JSON anywhere in your code except temporarily during this line:
data = JSON.parse(JSON.stringify(data));
That takes an existing JavaScript object, creates JSON for it, then parses that JSON, and assigns the new, equivalent JavaScript object to data. It serves no purpose at all in that code.
In my snippet above, I used JSON at the end purely to show the structure of datList in a fairly clear and concise way.
Here's a slightly modified version of your code with no JSON at all, which demonstrates that you've succceeded in creating the structure you said you wanted:
var datList = [];
var data = {
id: '1',
name: 'mike'
};
var arr = [{prop1: '1', prop2: '2'}, {prop1: 'one', prop2: 'two'}];
data.new_arr = arr;
datList.push(data);
snippet.log(datList.length); // 1
snippet.log(datList[0].id); // 1
snippet.log(datList[0].name); // mike
snippet.log(datList[0].new_arr[1].prop1); // one
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
