JavaScript and JSON, how to parse?
https://stackoverflow.com/questions/12847258
-
06-07-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Ok, so I am having a lot of trouble creating an app which works with Zendesk. Basically what I need to do is search all tickets in the database and count how many there are for each end-user. The end-user is a text field within each ticket.
So here is where I am:
'/api/v2/tickets.json' - this is a list of all tickets in JSON format - this gets put into a variable 'tickets' which I use after - I thought 'tickets' would be an array but now I don't think it is, so how can itterate through it?
NOW - how can I access the values in this tickets file? For example, how can I access the 'End-User' value with JavaScript?
I have looked through Zendesk's documentation for their API and can't find anything useful for getting this to work and their forums are somewhat dead. Hopefully you guys can help me out since I am a total beginner at JavaScript.
Ok here is an example of a JSON record:
{"tickets":[{"url":"https://company.zendesk.com/api/v2/tickets/1.json","id":1,"external_id":null,"via":{"channel":"web","source":{"from":{},"to":{},"rel":null}},"created_at":"2012-10-01T16:06:33Z","updated_at":"2012-10-05T19:21:55Z","type":"incident","subject":"This is a sample ticket requested and submitted by you","description":"This is the first comment. Feel free to delete this sample ticket.","priority":"high","status":"closed","recipient":null,"requester_id":270249903,"submitter_id":270249903,"assignee_id":270249903,"organization_id":22242373,"group_id":20363013,"collaborator_ids":[],"forum_topic_id":null,"problem_id":null,"has_incidents":false,"due_at":null,"tags":["sample","zendesk"],"fields":[{"id":21717236,"value":"10/4/2012"}],"custom_fields":[{"id":21717236,"value":"10/4/2012"}],"satisfaction_rating":null},{"url":"https://company.zendesk.com/api/v2/tickets/2.json","id":2,"external_id":null,"via":{"channel":"email","source":{"from":{"address":"noreply@zendesk.com","name":"Zendesk"},"to":{"address":"support@company.zendesk.com","name":"Binary Stream Helpdesk"},"rel":null}},"created_at":"2012-10-01T16:33:58Z","updated_at":"2012-10-05T17:09:37Z","type":null,"subject":"Tudor Hofnar, here is the test ticket you requested","description":" Hello! This is a Zendesk ticket. We are going to go through the basic support ticket operation in Zendesk.\n\n If you are in your email reading this, please click on the link in the header that starts with Ticket #.\n\n If you are in your Zendesk reading this, you will see the ticket number, the customer who sent this ticket in, and drop down menus that allow you to set things like status and priority. You'll also notice a blank text box below this comment. That is for you to respond. Let's do that:\n\n 1. Write: \"Thanks for this information, please tell me more.\"\n 2. Change the drop-down field labeled Status to \"Pending\"\n\n If you follow these instructions, you'll get an email response back from us shortly. You can also always see ticket updates by going back into your unsolved ticket view (click view in the top menu bar).\n","priority":null,"status":"closed","recipient":null,"requester_id":270263553,"submitter_id":270263553,"assignee_id":270249903,"organization_id":null,"group_id":20363013,"collaborator_ids":[],"forum_topic_id":null,"problem_id":null,"has_incidents":false,"due_at":null,"tags":[],"fields":[{"id":21717236,"value":"10/4/2012"}],"custom_fields":[{"id":21717236,"value":"10/4/2012"}],"satisfaction_rating":null},{"url":"https://company.zendesk.com/api/v2/tickets/3.json","id":3,"external_id":null,"via":{"channel":"email","source":{"from":{"address":"tudor@binarystream.com","name":"Tudor Hofnar"},"to":{"address":"support@company.zendesk.com","name":"Binary Stream Helpdesk"},"rel":null}},"created_at":"2012-10-01T17:08:37Z","updated_at":"2012-10-05T18:15:01Z","type":null,"subject":"test","description":"test\n\nTudor Hofnar","priority":null,"status":"closed","recipient":"support@company.zendesk.com","requester_id":270249903,"submitter_id":270249903,"assignee_id":270249903,"organization_id":22242373,"group_id":20363013,"collaborator_ids":[],"forum_topic_id":null,"problem_id":null,"has_incidents":false,"due_at":null,"tags":[],"fields":[{"id":21717236,"value":"10/4/2012"}],"custom_fields":[{"id":21717236,"value":"10/4/2012"}],"satisfaction_rating":null},{"url":"https://company.zendesk.com/api/v2/tickets/5.json","id":5,"external_id":null,"via":{"channel":"web","source":{"from":{},"to":{},"rel":null}},"created_at":"2012-10-01T20:26:34Z","updated_at":"2012-10-06T22:39:09Z","type":"incident","subject":"Window for adding account not opening","description":"The add account window is not opening and it is causing a lot of trouble for our team etc....","priority":"normal","status":"closed","recipient":null,"requester_id":271853958,"submitter_id":271853958,"assignee_id":270249903,"organization_id":22284363,"group_id":20363013,"collaborator_ids":[],"forum_topic_id":null,"problem_id":null,"has_incidents":false,"due_at":null,"tags":["2_2_2","4","ared","end_user_1","var_2"],"fields":[{"id":21704983,"value":"1"},{"id":21708732,"value":"tried this"},{"id":21708742,"value":"1"},{"id":21713331,"value":"10/2/2012"},{"id":21717086,"value":"ared"},{"id":21717236,"value":"10/4/2012"},{"id":21717357,"value":"2_2_2"}],"custom_fields":[{"id":21704983,"value":"1"},{"id":21708732,"value":"tried this"},{"id":21708742,"value":"1"},{"id":21713331,"value":"10/2/2012"},{"id":21717086,"value":"ared"},{"id":21717236,"value":"10/4/2012"},{"id":21717357,"value":"2_2_2"}],"satisfaction_rating":null},{"url":"https://company.zendesk.com/api/v2/tickets/6.json","id":6,"external_id":null,"via":{"channel":"web","source":{"from":{},"to":{},"rel":null}},"created_at":"2012-10-02T21:14:59Z","updated_at":"2012-10-09T18:22:04Z","type":"incident","subject":"Test Ticket","description":"this is a test ticket","priority":"normal","status":"closed","recipient":null,"requester_id":271853958,"submitter_id":271853958,"assignee_id":270249903,"organization_id":22284363,"group_id":20363013,"collaborator_ids":[],"forum_topic_id":null,"problem_id":null,"has_incidents":false,"due_at":null,"tags":["2_2_2","arcb","end_user_1","var_2"],"fields":[{"id":21704983,"value":"1"},{"id":21708732,"value":"tried this"},{"id":21708742,"value":"1"},{"id":21713331,"value":"10/2/2012"},{"id":21717086,"value":"arcb"},{"id":21717236,"value":"10/2/2012"},{"id":21717357,"value":""},{"id":21728942,"value":null},{"id":21732321,"value":"Test End-User"}],"custom_fields":[{"id":21704983,"value":"1"},{"id":21708732,"value":"tried this"},{"id":21708742,"value":"1"},{"id":21713331,"value":"10/2/2012"},{"id":21717086,"value":"arcb"},{"id":21717236,"value":"10/2/2012"},{"id":21717357,"value":""},{"id":21728942,"value":null},{"id":21732321,"value":"Test End-User"}],"satisfaction_rating":null},{"url":"https://company.zendesk.com/api/v2/tickets/7.json","id":7,"external_id":null,"via":{"channel":"web","source":{"from":{},"to":{},"rel":null}},"created_at":"2012-10-09T20:09:50Z","updated_at":"2012-10-11T18:19:42Z","type":"question","subject":"Testing bookmarks","description":"this is a bookmark test\n","priority":"normal","status":"open","recipient":null,"requester_id":270249903,"submitter_id":270249903,"assignee_id":270249903,"organization_id":22242373,"group_id":20363013,"collaborator_ids":[],"forum_topic_id":null,"problem_id":null,"has_incidents":false,"due_at":null,"tags":["2010","psm"],"fields":[{"id":21704983,"value":"0"},{"id":21708732,"value":null},{"id":21708742,"value":"1"},{"id":21713331,"value":"10/9/2012"},{"id":21717086,"value":"psm"},{"id":21717236,"value":"10/31/2012"},{"id":21717357,"value":"2010"},{"id":21728942,"value":"Var 1"},{"id":21732321,"value":"End User 2"}],"custom_fields":[{"id":21704983,"value":"0"},{"id":21708732,"value":null},{"id":21708742,"value":"1"},{"id":21713331,"value":"10/9/2012"},{"id":21717086,"value":"psm"},{"id":21717236,"value":"10/31/2012"},{"id":21717357,"value":"2010"},{"id":21728942,"value":"Var 1"},{"id":21732321,"value":"End User 2"}],"satisfaction_rating":null}],"next_page":null,"previous_page":null,"count":6}
not sure how to format this code...
Now this is my JS code, I know its wrong what I am trying to do with 'tickets' but I have no idea how to access it...
(function() {
return {
// Here we define AJAX calls
requests: {
fetchTickets: function() {
return {
url: '/api/v2/tickets.json',
type: 'GET'
};
}
},
// Here we define events such as a user clicking on something
events: {
'app.activated': 'requestTickets',
'fetchTickets.always': function(data) {
this.countEndUserTickets((data || {}).tickets);
}
},
// Below this point, you're free to define your own functions used by the app
requestTickets: function() {
this.ajax('fetchTickets');
},
countEndUserTickets: function(tickets) {
var endUser = this.ticket().customField("End-User"); //this will get the end-user of the current ticket that is open in Zendesk
var ticketCounter = 0;
//this is where I have no idea how to access the 'tickets' array or whatever it is
for (var i = 0; i <= tickets.length; i++) {
if (tickets[i].customField("End-User") == endUser){
ticketCounter = ticketCounter + 1;
}
}
alert(endUser);
this.switchTo('list', {
ticketCounter: this.ticketCounter
});
}
};
}());
Solution
According to their documentation, Zendesk supports JSONP:
you can specify a callback by appending “?callback=your_call_back_function” to the GET URL
So, you can change your url to '/api/v2/tickets.json?callback=fetchTicketsCallback' and fetchTicketsCallback will be called, passing in a fully-parsed JavaScript object.
Edit: Actually, according to this documentation (which looks an awful lot like the code you posted), Zendesk ajax handlers receive fully parsed JavaScript objects, not raw JSON strings. So, there should be no reason to change the url at all. Just access the members via standard dot or square bracket notation. So, to get the value of the field with an id of 21732321:
ticket.fields.filter(function(field) {
return field.id == 21732321;
})[0].value;
It looks like you want:
function countTickets(user) {
var count = 0;
response.tickets.forEach(function(ticket) {
var filteredFields = ticket.fields.filter(function(field) {
return field.id == 21732321;
});
if (filteredFields.length > 0 && filteredFields[0].value == user) {
count++;
}
});
return count;
}
OTHER TIPS
jQuery makes it really easy with jQuery.parseJSON Here's a simple example: http://api.jquery.com/jQuery.parseJSON/
Try this:
var json = '{ "url":"https://test.zendesk.com/api/v2/tickets/6.json", "id":6, "external_id":null, "via":{ "channel":"web", "source":{ "from":{}, "to":{}, "rel":null } }, "created_at":"2012-10-02T21:14:59Z", "updated_at":"2012-10-09T18:22:04Z", "type":"incident", "subject":"Test Ticket", "description":"this is a test ticket", "priority":"normal", "status":"closed", "recipient":null, "requester_id":271853958, "submitter_id":271853958, "assignee_id":270249903, "organization_id":22284363, "group_id":20363013, "collaborator_ids":[], "forum_topic_id":null, "problem_id":null, "has_incidents":false, "due_at":null, "tags":["2_2_2","arcb","end_user_1","var_2"], "fields":[ {"id":21704983,"value":"1"}, {"id":21708732,"value":"tried this"}, {"id":21708742,"value":"1"}, {"id":21713331,"value":"10/2/2012"}, {"id":21717086,"value":"arcb"}, {"id":21717236,"value":"10/2/2012"}, {"id":21717357,"value":""}, {"id":21728942,"value":null}, {"id":21732321,"value":"Test End-User"}], "custom_fields":[{"id":21704983,"value":"1"}, {"id":21708732,"value":"tried this"}, {"id":21708742,"value":"1"}, {"id":21713331,"value":"10/2/2012"}, {"id":21717086,"value":"arcb"}, {"id":21717236,"value":"10/2/2012"}, {"id":21717357,"value":""}, {"id":21728942,"value":null}, {"id":21732321,"value":"Test End-User"}], "satisfaction_rating":null }';
var obj = JSON.parse(json);
$('body').append('<div>Tags value: ' + obj.tags + '</div><br>');
var len = obj.custom_fields.length;
for(n = 0; n < len; n++)
{
$('body').append('<div>Custom field value: ' + obj.custom_fields[n].value + '</div>');
}
See it in action: http://jsfiddle.net/7nbpq/5/
Try using json_encode() on your server side return, and/or jQuery.parseJSON() on your client side reception of data. This should allow you to get the data in an array which would help a ton.
First of all, you should use $.getJSON - it's a shorthand for $.ajax function, specifically for retrieving JSON:
$.getJSON('myfile.json', function(json) {
// do something with json here
});
Secondly, once you have the json, you can access it with dot operators - there's no need to parse it, since it already is an object.
This might help you with your JSON retrieval and accessing the resultant object
Try it out here View the console.log() output with the console (press F12 in Chrome, or use FireBug in FireFox, etc):
JavaScript:
$(document).ready(function () {
"use strict";
$.getJSON("getJSON.json", function (data) {
$("#look").on('click', function () {
var $output = $("#output");
var index, id = $("#input").val();
var filtered = data.custom_fields.filter(function (element) {
return element.id.toString() == id;
});
$output.empty();
for (index in filtered) {
$output.append("Value: " + filtered[index].value);
}
console.log(filtered);
});
console.log(data);
});
});
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
Pleased input a custom field ID: <input id="input" type="text" value="21732321" />
<button id="look">Look Up By ID</button>
<p id="output"></p>
<script type="text/javascript" src="getJSON.js"></script>
</body>
</html>
JSON (this is your JSON validated and formatted here):
{
"url": "https://test.zendesk.com/api/v2/tickets/6.json",
"id": 6,
"external_id": null,
"via": {
"channel": "web",
"source": {
"from": {},
"to": {},
"rel": null
}
},
"created_at": "2012-10-02T21:14:59Z",
"updated_at": "2012-10-09T18:22:04Z",
"type": "incident",
"subject": "Test Ticket",
"description": "this is a test ticket",
"priority": "normal",
"status": "closed",
"recipient": null,
"requester_id": 271853958,
"submitter_id": 271853958,
"assignee_id": 270249903,
"organization_id": 22284363,
"group_id": 20363013,
"collaborator_ids": [],
"forum_topic_id": null,
"problem_id": null,
"has_incidents": false,
"due_at": null,
"tags": [
"2_2_2",
"arcb",
"end_user_1",
"var_2"
],
"fields": [
{
"id": 21704983,
"value": "1"
},
{
"id": 21708732,
"value": "tried this"
},
{
"id": 21708742,
"value": "1"
},
{
"id": 21713331,
"value": "10/2/2012"
},
{
"id": 21717086,
"value": "arcb"
},
{
"id": 21717236,
"value": "10/2/2012"
},
{
"id": 21717357,
"value": ""
},
{
"id": 21728942,
"value": null
},
{
"id": 21732321,
"value": "Test End-User"
}
],
"custom_fields": [
{
"id": 21704983,
"value": "1"
},
{
"id": 21708732,
"value": "tried this"
},
{
"id": 21708742,
"value": "1"
},
{
"id": 21713331,
"value": "10/2/2012"
},
{
"id": 21717086,
"value": "arcb"
},
{
"id": 21717236,
"value": "10/2/2012"
},
{
"id": 21717357,
"value": ""
},
{
"id": 21728942,
"value": null
},
{
"id": 21732321,
"value": "Test End-User"
}
],
"satisfaction_rating": null
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
