JSON string array is always null - arrays

Question

I have some JSON data rendered server-side to be available in the client page. In the HTTP response it looks correct:
digitalData = {
"page": {
"pageInfo": {
"geoRegion": "US",
"onsiteSearchResults": 38,
"onsiteSearchTerm": "leather",
"sysEnv": "HAMP"
},
"category": {
"dirID": 2,
"pageTemplate": "/store/search.aspx",
"pageType": "Search"
},
"attributes": {
"searchType": "standard",
"refinementCategory": "10001",
"searchFilters": ["50859"]
}
},
"user": {
"profile": {
"profileInfo": {
"profileID": "{C0A253A9-AD6E-4B6B-A313-3D215704D0FB}",
"returningStatus": "new"
}
},
"segment": {
"persona": ["EXPERT"]
}
},
"cart": {
"cartID": "2508d65f-6495-4256-8125-75767b847e45",
"numItems": 0
},
"version": "1.0"
};
But when I examine the DOM through Dev Tools Elements or Console, the searchFilters string array in the above JSON is always null. I have no client side code that refers to that object at all. How/why is it going from correct in the HTTP Response to null in the DOM? I've validated the JSON in JSONLint and it is valid.

Answer 1

The JSON is valid. Append square brackets and try again.
var objArray= [{
"page": [{
"pageInfo": [{
"geoRegion": "US",
"onsiteSearchResults": 38,
"onsiteSearchTerm": "leather",
"sysEnv": "HAMP"
}],
"category": [{
"dirID": 2,
"pageTemplate": "/store/search.aspx",
"pageType": "Search"
}],
"attributes": [{
"searchType": "standard",
"refinementCategory": "10001",
"searchFilters": ["50859"]
}]
}],
"user": [{
"profile": {
"profileInfo": {
"profileID": "{C0A253A9-AD6E-4B6B-A313-3D215704D0FB}",
"returningStatus": "new"
}
},
"segment": {
"persona": ["EXPERT"]
}
}],
"cart": [{
"cartID": "2508d65f-6495-4256-8125-75767b847e45",
"numItems": 0
}],
"version": "1.0"
}];
function getDetails(){
document.getElementById("demo").innerHTML = "Length of Array = " + objArray.length;
document.getElementById("element").innerHTML = "0th Element of Array = " + objArray[0];
document.getElementById("elementInfo").innerHTML = "Element at 0th position Array = " + objArray[0].page[0].pageInfo;
document.getElementById("elementInfo2").innerHTML = "Element at 00th position Array = " + objArray[0].page[0].pageInfo[0].geoRegion;
}
<button onclick=getDetails()> Check </button>
<p id="demo"></p>
<p id="element"></p>
<p id="elementInfo"></p>
<p id="elementInfo2"></p>