Getting data from JSON Structure

Question

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);
    }
});

Did you search for something like "Parse JSON" "Access JSON"...? For example, in the related column (next to this question) you have: http://stackoverflow.com/questions/4935632/parse-json-in-javascript?rq=1 — yuriy636, Jun 28 '16 at 12:33
The JSON in your question looks like it might be from a SerializeJSON(yourQuery) call. Is that the case? If so, and you are using CF11, you could use the SerializeJSON(yourQuery,"struct") which will return a friendlier set of JSON. — snackboy, Jun 28 '16 at 12:38
I believe I am using 8 or 9. Also I tried search Access Json, and a lot of them are saying to use tempData[0].id. This is not working for me. I am new to JSON and coldfusion. — user2997109, Jun 28 '16 at 12:44
What does your CF code look like that returns the data? Is it using the SerializeJSON function? — snackboy, Jun 28 '16 at 12:47
Not knowing what version of CF you are using is a fundamental problem. — Dan Bracuk, Jun 28 '16 at 12:48
No it is not using SeralizeJSON. I have a cffunction that is returning a query with the returnformat as JSON — user2997109, Jun 28 '16 at 12:48
Are you trying to access data from JavaScript? Is it an ajax response? — rrk, Jun 28 '16 at 12:53
Yes I am trying to access the data from Javascript through an ajax call using the success function - success:function(data){} — user2997109, Jun 28 '16 at 12:55
If you add your jQuery ajax call code, then it will be more helpful. — rrk, Jun 28 '16 at 13:01
*a lot of them are saying to use tempData[0].id* That assumes the function returns an array of structures, which you could easily do with a [bit of code](http://stackoverflow.com/questions/15438907/displaying-an-ajax-response-with-jquery). It is a lot nicer than the current format, ie the default format CF uses for queries. — Leigh, Jun 28 '16 at 21:02

score 3 · Accepted Answer · answered Jun 28 '16 at 12:56

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>

score 0 · Answer 2 · answered Jul 06 '16 at 08:59

This might be also help full while using DB query and access by column(ex:employee_id,employee_name)

Step-1

// return in serializeJSON format with true
<cffunction name="employeelistJson" returntype="any" returnformat="JSON">
        <cfquery name="employeelist" datasource="yourdatasource">
            select * from employee
        </cfquery>
    <cfset setJson = #serializeJSON(employeelist,true)#>
    <cfreturn setJson />
</cffunction>

Step-2 access json data by name

success: function(response) {
     //must be in caps  
     alert(response.DATA['EMPLOYEEID']);
     alert(response.DATA['EMPLOYEENAME']);                              
    },

Getting data from JSON Structure

2 Answers2