<body>
<h1>Learn JSON</h1>
<div id="output"></div>
<script type="text/javascript">
var myObj = {
"friends": [{
"firstName": "Mike"
, "lastName": "Jones"
},{
"firstName": "John"
, "lastName": "Smith"
} ,{
"firstName": "Laurence"
, "lastName": "Svekis"
},{
"firstName": "Alice"
, "lastName": "James"
}]
}
var html = '';
myObj.friends.splice(3,0,{
"firstName": "New"
, "lastName": "Person"
})
var output = document.getElementById('output');
for(x=0;x<myObj.friends.length;x++){
html += (Number(x)+1) + ' . ' + myObj.friends[x].firstName + ' ' + myObj.friends[x].lastName + '<br>'
}
output.innerHTML = html;
myObj.friends.forEach(function(item){
output.innerHTML += item.firstName + ' ' + item.lastName + '<br>'
})
</script>
</body>