We Keep Coding

Rest API Multiple Lists in SharePoint

Because SharePoint works async i cannot store the data from multiple lists in array's and access them later.
I need to use 3 lists because they contain data from employees, holidays, and more.
See my code below for more information.
Is there no easier way to work with SharePoint and multiple lists to get the data. I tried also with executequeryasync but i cannot find a working solution for multiple lists. Or to store the value of each list in an array or variable and use it in another function because it's async.
$(function () {
$('#title').html("Inloggen verlofaanvraag");
});
function inLoggen() {
var initialen = $('#initialen').val();
var wachtwoord = $('#wachtwoord').val();
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Lijst werknemers')/Items?$filter=wInitialen eq '" + initialen + "' and wWachtwoord eq '" + wachtwoord + "'",
type: "GET",
headers: { "accept": "application/json;odata=verbose" },
success: function (data) {
var x = data.d.results;
var werknemers = data.d.results;
for (var i = 0; i < x.length; i++) {
rInitialen = x[i].wInitialen;
rWachtwoord = x[i].wWachtwoord;
rVolledigenaam = x[i].wVolledigenaam;
}
if (i === 0) {
alert("U hebt geen toegang tot deze pagina !");
}
else {
$('#title').html("Welkom " + rVolledigenaam);
$('#inlogform').hide();
persoonlijketellers(werknemers);
}
},
error: function (xhr) {
console.log(xhr.status + ': ' + xhr.statusText);
}
});
}
function persoonlijketellers(werknemers) {
var rId = werknemers[0].ID;
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Lijst persoonlijke tellers')/Items?$filter=pWerknemer eq '" + rId + "'",
type: "GET",
headers: { "accept": "application/json;odata=verbose" },
success: function (data) {
var x = data.d.results;
var ptellers = data.d.results;
for (var i = 0; i < x.length; i++) {
}
wettelijkeverlofdagen(werknemers, ptellers);
},
error: function (xhr) {
console.log(xhr.status + ': ' + xhr.statusText);
}
});
}
function wettelijkeverlofdagen(werknemers, ptellers) {
var rId = ptellers[0].ID;
alert(rId);
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Lijst persoonlijke tellers')/Items?$filter=pWerknemer eq '" + rId + "'",
type: "GET",
headers: { "accept": "application/json;odata=verbose" },
success: function (data) {
var x = data.d.results;
var ptellers = data.d.results;
for (var i = 0; i < x.length; i++) {
}
},
error: function (xhr) {
console.log(xhr.status + ': ' + xhr.statusText);
}
});
}

You can store the data from multiple lists in array and access them when all of your async calls are complete, you just need to use some sort of promise pattern.
jQuery's .when method is probably the most useful in a situation like this:
function SPData() {
function getJsonDataAsync(url) {
// returning the $.ajax object is what makes the next part work...
return $.ajax({
url: url,
method: "GET",
contentType: "application/json",
headers: {
accept: "application/json;odata=verbose"
}
});
}
var requestURI1 = _spPageContextInfo.webServerRelativeUrl + "/_api/lists/..."
var requestURI2 = _spPageContextInfo.webServerRelativeUrl + "/_api/lists/..."
var requestURI3 = _spPageContextInfo.webServerRelativeUrl + "/_api/lists/..."
var req1 = getJsonDataAsync(requestURI1);
var req2 = getJsonDataAsync(requestURI2);
var req3 = getJsonDataAsync(requestURI3);
// now we can do the next line, because req1/2/3 are actually deferreds
// being returned from $.ajax
jQuery.when(req1, req2, req3).done(function(resp1, resp2, resp3) {
/* do something with all of the requests here...
resp1/2/3 correspond to the responses from each call and are each an
array that looks like: [data, statusText, jqXHR], which means that your
data is in resp1[0], resp2[0], etc. */
});
If you want, you can also just assign the returned values to variables in a higher level context, then use individual jQuery deferreds so that you can be sure all of the calls have succeeded before you start working with the data...
...
var x1, x2, x3;
// use the .then(function() { ... }) pattern because we are just returning a
// deferred/promise from $.ajax
getJsonDataAsync(requestURI1).then(function(data) {
x1 = data;
getJsonDataAsync(requestURI2).then(function(data2) {
x2 = data2;
getJsonDataAsync(requestURI3).then(function(data3) {
x3 = data3;
// do something with x1, x2, and x3
});
});
});
}

How to return a value from WinJS

I am developing an app which consumes a WebService like this
function callWS(filebytes, fpath, filename) { //consumes the webservice
var response;
var data = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ws="http://ws.myCompany.com">\n' +
' <soapenv:Header/>\n' +
' <soapenv:Body>\n' +
' <ws:uploadFileService>\n' +
' <ws:filebytes>' + filebytes + '</ws:filebytes>\n' +
' <ws:fpath>' + fpath + '</ws:fpath>\n' +
' <ws:filename>' + filename + '</ws:filename>\n' +
' </ws:uploadFileService>\n' +
' </soapenv:Body>\n' +
'</soapenv:Envelope>\n';
console.log("XML SOAP: " + data + "\r\n");
var options = {
url: "http://XXX.XXX.XX.XXX:XXXX/FILESERVERWS/services/FILESERVERWS?wsdl",
type: "post",
headers: {
"Content-Type": "text/xml; charset=utf-8",
"SOAPAction": "uploadFileService"
},
data: data
};
WinJS.Promise.timeout(8000, WinJS.xhr(options)).then(
function (request) {
var doc = request.responseXML.documentElement;
var output = doc.getElementsByTagName("uploadFileServiceReturn");
//Windows.UI.Popups.MessageDialog(output[0].textContent, "the XML message").showAsync();
console.log("the XML message: " + output[0].textContent + "\r\n");
result.style.backgroundColor = "#00A000";
response = true;
},
function (error) {
Windows.UI.Popups.MessageDialog(error.status + " : " + error.statusText, "Status").showAsync();
result.style.backgroundColor = "#FF0000";
response = false;
},
function (progress) {
result.innerText = "Ready state is " + progress.readyState;
result.style.backgroundColor = "#0000A0";
}
);
return response;
}
the purpose is to consume the webService and returns a value
on success response = true
on error response = false
because I want to take an action depending if the webService returned a value by doing this
if (callWS(document.getElementById("formfield" + i).value, UID_KEY[7], arrayCaptures[i - 1].name)) {
console.log("take action a");
}
else {
console.log("take action b");
}
but it always take action B even if the webService is consumed and I get answer from the webservice, what am I doing wrong???

You'll need to return a Promise object from your function, allowing the calling script to use a then() or done() call on it to get the result. You can read more about asynchronous programming in WinJS on the msdn site, but generally it looks like this:
function callWS(filebytes, fpath, filename) {
return new WinJS.Promise(function (complete, error) {
// put your functionality here...
WinJS.Promise.timeout(8000, WinJS.xhr(options)).then(
function (request) {
// more processing...
complete(true); // or false or a variable...
},
function (e) {
// error handling unique to this function
complete(false); // OR you could just call error(e);
},
...
);
});
}
And you would use it like this:
callWS( ... ).then(
function(response) {
// handle response...
// will be either true or false
},
function(err) {
// handle errors
}
);

Phonegap data storage mechanism using localStorage-adapter.js

How do I use this library localstorage-adapter.js to be able to store data from my server query processing??
I get a library when i see the app from Christophe Coenraets then I want to try it into my application.
My code to access data from server :
$(document).ready(function() {
$('#loading_panel').show();
get_news();
function get_news(){
var serviceURL = "http://www.mydomain.com/api/";
var SistemPakar;
$.ajax({
type : 'GET',
url : serviceURL + 'news.php',
async: true,
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/j-son;charset=UTF-8");
}
},
dataType : 'json',
success : function(data){
AllData = data.items;
if(AllData==''){
$('#loading_panel').hide();
$('#empty').show();
}else{
$('#loading_panel').hide();
$('#tampilData').show();
$.each(AllData, function(index, loaddata) {
var data = loaddata.id;
var image = loaddata.img;
var tanggal = loaddata.tanggal;
var strExplode = tanggal.split("-");
var strJoinExplode = strExplode[2]+ '-' +strExplode[1]+ '-' +strExplode[0];
$('#sispakList').append(
'<img src="logo/'+image+'.png"/>'+
'<h4>' + loaddata.judul + '</h4>' +
'<p>' + loaddata.isi +'</p>' +
'<p>' + strJoinExplode + '</p>');
});
$('#sispakList').listview('refresh');
}
},
error: function(jqXHR, exception) {
$('#loading_panel').hide();
$('#conn_failed').show();
}
});
}
});
How do when the data is first captured by the results of the application and use localstorage-adapter.js to save the data as a mechanism that made ​​Christophe Coenraets on the application??

Changing global variables in a ajax call

I've been trying to get this right for quite some time, I'm trying to append the object from the first ajax call after the second ajax call. But the for loop seems to iterate the changing of the value to the last result before appending the information, having the last post appended every time.
var scribjson =
{
"user_id" : localStorage.viewing,
};
scribjs = JSON.stringify(scribjson);
var scrib = {json:scribjs};
$.ajax({
type: "POST",
url: "getScribbles.php",
data: scrib,
success: function(result)
{
var obj = jQuery.parseJSON(result);
for(var i = 0; i < obj.length; i+=1)
{
var userjson =
{
"user_id" : obj[i].user_id
};
userjs = JSON.stringify(userjson);
var user = {json:userjs};
localStorage.post = obj[i].post;
$.ajax({
type: "POST",
url: "getRequestsInfo.php",
data: user,
success: function(result)
{
var obj2 = jQuery.parseJSON(result);
$('#listOfScribbles').append("<tr><td><img id = 'small_pic' src = '" + obj2[0].profileImage + "'/></td><tr><td>" + obj2[0].firstname + " " + obj2[0].lastname + "</td></tr> ");
$('#listOfScribbles').append("<tr><td>" + obj[i].post + "</td></tr>");
},
error: function()
{
alert('An Error has occured, please try again.');
}
});
}
},
error: function()
{
alert('An Error has occured, please try again.');
}
});

Since ajax calls It looks like the all success functions of the inner ajax call are being called after the loop has ended, so i will always be the last iterated value.
Try this:
(function(i)
{
$.ajax({
type: "POST",
url: "getRequestsInfo.php",
data: user,
success: function(result)
{
var obj2 = jQuery.parseJSON(result);
$('#listOfScribbles').append("<tr><td><img id = 'small_pic' src = '" + obj2[0].profileImage + "'/></td><tr><td>" + obj2[0].firstname + " " + obj2[0].lastname + "</td></tr> ");
$('#listOfScribbles').append("<tr><td>" + obj[i].post + "</td></tr>");
},
error: function()
{
alert('An Error has occured, please try again.');
}
});
})(i);
This will create a closure on i, which will give each ajax call its own copy of the current value.

Use an IIFE:
success: (function(i){return function(result) {
var obj2 = jQuery.parseJSON(result);
$('#listOfScribbles').append("<tr><td><img id = 'small_pic' src = '" + obj2[0].profileImage + "'/></td><tr><td>" + obj2[0].firstname + " " + obj2[0].lastname + "</td></tr> ");
$('#listOfScribbles').append("<tr><td>" + obj[i].post + "</td></tr>");
}})(i),
etc. Currently your loop generated ajax success handlers contain a direct reference to the counter itself, which (by the time they are called) has reached its final value.

Simple ajax request

I am new to ajax and am trying to get the following script working. I just want to take info from a json object and print it to the document.
Here is the JSON file called companyinfo.json:
{
'id':1,
'name':'Stack'
}
The Ajax request looks like this:
ar xhr = false;
var xPos, yPos;
$(function(){
var submitButton = $("#dostuff");
submitButton.onclick = sendInfoRequest;
});
function sendInfoRequest (evt) {
if (evt) {
var company1 = $("#companyInput1").val;
var company2 = $("#companyInput2").val;
}
else {
evt = window.event;
var company = evt.srcElement;
}
$.ajax({
url : 'companyinfo.json',
dataType: 'json',
data: company1,
success: function(data) {
console.log(data);
var items = new Array ();
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
}
});
return false;
}
console.log(data.id);
To start simple. I just console.log the data.id to see if the script returned a value from the json file.
To write it to the document I would do something like this, calling the showContents function in the callback function above:
function showContents(companyNumber) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var outMsg = xhr.responseXML;
$("." + data.companyName.toLowerCase + companyNumber).innerHTML(data.companyName)
}
else {
var outMsg = "There was a problem with the request " + xhr.status;
}
}
}
I'm pretty new to Ajax, but hopefully that makes some sense. Thanks

if you are trying to get something i think you should add
type:"GET"
on your $.ajax it should look like this.
$.ajax({
url : 'companyinfo.json',
dataType: 'json',
type:"GET",
contentType: "application/json; charset=utf-8",
data: company1, //What is your purpose for adding this?
success: function(data) {
console.log(data);
var items = new Array ();
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
}
});

Im not sure about this in your code:
var company1 = $("#companyInput1").val; //should it be with ()??
var company2 = $("#companyInput2").val; //should it be with ()??
should it be with () like this one:
var company1 = $("#companyInput1").val();
var company2 = $("#companyInput2").val();

The easiest way to get and parse JSON is to use $.getJSON
// you need to use a map as your data => {key : value}
$.getJSON("companyinfo.json", {company : company1}, function(data){
console.log(data);
var items = []; // new Array();
$.each(data, function(key, val){
items.push('<li id="' + key + '">' + val + '</li>');
});
// do something with items
});

you can do like this:
$.getJSON("getJson.ashx", { Index: 1 }, function (d) {
alert(d);
});