user2997109 user2997109 - 5 months ago 17
JSON Question

Getting data from JSON Structure

My coldfusion component is returning a JSON format data. I am trying to access the values of that data in my front-end using Javascript. Can someone help me understand how to access the data values such as the "id", "firs_name" and "last_name"?

I am storing the the follow data in the variable called tempData. Below is the JSON structure I am getting:

{ "COLUMNS" : [ "id",
"FIRST_NAME",
"LAST_NAME"
],
"DATA" : [ [ "xxxx",
"Jes",
"Abr"
],
[ "xxx2",
"JESSIE",
"YU"
]
]
}


Below is my ajax call:

$.ajax({
type: "get",
url: "GROUPSLIST.cfc",
data: {
method: "getNames",
queryString: selectQuery
},
success: function(a) {
alert(a);
},
error: function(a) {
alert(a.responseText);
}
});

Answer

I am assuming your response is not parsed already. You can use something like following.

var tempData = '{"COLUMNS":["id","FIRST_NAME","LAST_NAME"],"DATA":[["xxxx","Jes","Abr"],["xxx2","JESSIE","YU"]]}';
//parse response if not already parsed 
var respObj = JSON.parse(tempData);
var columns = respObj['COLUMNS'];
//create a column map to index like following
var colMap = {};
for(i = 0; i < columns.length; i++){
  colMap[columns[i]] = i;
}
console.log(colMap)
var data = respObj['DATA'];
var text = ''
//use data[i][colMap['id']] to access data inside loop.
for(i = 0; i < data.length; i++){
  text += data[i][colMap['id']] + ':' +data[i][colMap['FIRST_NAME']] + ' ' + data[i][colMap['LAST_NAME']] + '<br>';  
}
document.getElementById('text').innerHTML = text;
<div id="text"></div>