devops using Ajax access query data WIQL - azure-devops

Question

I am trying to access azure-devops data using Ajax. And below is my working code.
$.ajax({
url: 'https://dev.azure.com/ORG/products/_apis/wit/workitems/2065741?$expand=all&api-version=5.1',
dataType: 'json',
headers: {
'Authorization': 'Basic ' + btoa("" + ":" + 'XXXX')
}
}).done(function( results ) {
});
After I need to access data using WQIL but it is giving an unexpected token error. I want to access WorkItem, and user activity. Can you please help with this?
$.ajax({
url: 'https://dev.azure.com/ORG/products/_apis/wit/wiql?api-version=5.1 ',
dataType: 'json',
headers: {
'Authorization': 'Basic ' + btoa("" + ":" + 'XXXX')
},
JSON.Stringfy("QUERY":"SELECT [System.Id], [System.WorkItemType], [System.Title], [System.AssignedTo], [System.State], [System.Tags] FROM workitemLinks WHERE " +
"( [Source].[System.TeamProject] = #project AND [Source].[System.WorkItemType] = 'User Story' ) AND ( [System.Links.LinkType] = 'System.LinkTypes.Hierarchy-Forward' ) "+
" AND ( [Target].[System.TeamProject] = #project AND [Target].[System.WorkItemType] = 'Task' ) ORDER BY [System.Id] MODE (MustContain)")
}).done(function( results ) {
x=results
});

Answer 1

The previous script you are using is the method used to execute API, but not suitable for execute WIQL script. That's why you are facing that error.
Executing WIQL in Ajax is actually a request process: Send the wiql statement to the server you want to access, request to execute the query statement(Wiql), and return the execution result. Therefore, this is a process of requesting the execution of the Post command. But in your script, it did not tell the server what instructions need to be executed.
Here is the simple sample can for you refer to use WIQL with Ajax:
<script type="text/javascript">
$(document).ready(function () {
$("#SelectWIT").on("click", function () {
var d = { "query": " Select [System.Id] from WorkItems Where [System.WorkItemType] = 'Bug' "};
$.ajax({
type: 'POST',
url: 'https://dev.azure.com/{org name}/{project name}/_apis/wit/wiql?api-version=1.0',
contentType: 'application/json',
data: JSON.stringify(d),
cache: false,
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa("" + ":" + "{PAT token}"));
},
}).done(function (data) {
var items = [];
$.each(data.workItems, function (key, val) {
items.push("<li> <a href='" + val.url + "'>" + val.id + "</a></li>");
});
$("<ul/>", {
html: items.join("")
}).appendTo("body");
}).error(function (e) {
var s = "error error error";
});
})
});
</script>
The logic of my script is to request to run a API with a WIQL statement as request body, send this request to the project I want to access. Then display the response data with js syntax into the body of the page. This is the output:
Since I am not sure what is your next operation. You can replace the Wiql statement and the Url with yours in this script. Then change the corresponding done function to achieve what you want.

Answer 2

Somehow WQIL is giving error 400 it looks like a permission issue.
So I Solved it in a different way. Instead of the query, there is another method which gives me all the details of the workitem I just need to pass workitem Id's in that.
var d ={
"ids": [
20813,21677
],
"fields": ["System.Id","System.WorkItemType","System.Title","System.AssignedTo","System.State","System.Tags"]
};
$.ajax({
type: 'POST',
url: 'https://dev.azure.com/ORG/products/_apis/wit/workitemsbatch?api-version=5.1',
contentType: 'application/json',
data: JSON.stringify(d),
cache: false,
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa("" + ":" + "XXXXX"));
},
}).done(function (data) {
x=data
});