I'm making a list with items from a Sharepoint site. I'm requesting this data with xmlhttprequest. I can request the data but I also want to put it in a unordered list automatically. I'm stuck where I need to put the XML data in the li tag.
JavaScript code:
function loadUsers(){
//vraag request aan server
var xhr = new XMLHttpRequest();
// server link en geeft aan of sync of Async is
xhr.open('GET', 'Website-URL', true);
// maak nieuwe function voor het laden
xhr.onload = function(){
// als de status van de server gelijk is aan 200 doe dan de data uit de site in een lijst zetten.
if(this.status == 200){
var users = JSON.parse(this.responseText);
var output = '';
for(var i in users){
output +=
'<div class="user">' +
'<ul>' +
'<li id="ID">ID: '+properties[0].d:Title+'</li>' +
'<li id="Login">Login: '+properties[0].d:Created+'</li>' +
'</ul>' +
'</div>';
}
document.getElementById('users').innerHTML = output;
}
}
xhr.send();
}
this is a part of the xml code :
<?xml version="1.0" encoding="utf-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:cf="http://www.microsoft.com/schemas/rss/core/2005"><channel base="https://asml.sharepoint.com/teams/edev-sharepoint-training/Stefan/Subsite_Stefan/_vti_bin/ListData.svc/" xmlns:cfi="http://www.microsoft.com/schemas/rss/core/2005/internal" cfi:lastdownloaderror="None"><title cf:type="text">SubsiteList</title><cf:guid isPermaLink="false">https://asml.sharepoint.com/teams/edev-sharepoint-training/Stefan/Subsite_Stefan/_vti_bin/ListData.svc/SubsiteList/</cf:guid><atom:updated>2017-11-13T08:36:45Z</atom:updated><lastBuildDate>Mon, 13 Nov 2017 08:36:45 GMT</lastBuildDate><atom:link href="SubsiteList" rel="self" title="SubsiteList"/><item><guid isPermaLink="false">https://asml.sharepoint.com/teams/edev-sharepoint-training/Stefan/Subsite_Stefan/_vti_bin/ListData.svc/SubsiteList(2)</guid><title xmlns:cf="http://www.microsoft.com/schemas/rss/core/2005" cf:type="text">Test</title><atom:updated xmlns:atom="http://www.w3.org/2005/Atom">2017-10-25T08:43:22Z</atom:updated><atom:link xmlns:atom="http://www.w3.org/2005/Atom" href="SubsiteList(2)" rel="edit" title="SubsiteListItem"/><atom:link xmlns:atom="http://www.w3.org/2005/Atom" href="SubsiteList(2)/Gender" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Gender" type="application/atom+xml;type=entry" title="Gender"/><atom:link xmlns:atom="http://www.w3.org/2005/Atom" href="SubsiteList(2)/Language" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Language" type="application/atom+xml;type=entry" title="Language"/><atom:link xmlns:atom="http://www.w3.org/2005/Atom" href="SubsiteList(2)/Status" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Status" type="application/atom+xml;type=entry" title="Status"/><atom:link xmlns:atom="http://www.w3.org/2005/Atom" href="SubsiteList(2)/CreatedBy" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/CreatedBy" type="application/atom+xml;type=entry" title="CreatedBy"/><atom:link xmlns:atom="http://www.w3.org/2005/Atom" href="SubsiteList(2)/ModifiedBy" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/ModifiedBy" type="application/atom+xml;type=entry" title="ModifiedBy"/><atom:link xmlns:atom="http://www.w3.org/2005/Atom" href="SubsiteList(2)/Attachments" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Attachments" type="application/atom+xml;type=feed" title="Attachments"/><category domain="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme">Microsoft.SharePoint.DataService.SubsiteListItem</category><content type="application/xml" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
<m:properties>
<d:ContentTypeID>0x01002301B0B520E8D14CA4D7938BD72EBA26</d:ContentTypeID>
<d:Title>Test</d:Title>
<d:ComplianceAssetId m:null="true"/>
<d:Description m:null="true"/>
<d:Description0 m:null="true"/>
<d:GenderValue m:null="true"/
<d:CountryRegion m:null="true"/>
<d:LanguageValue m:null="true"/>
<d:ZIPPostalCode m:null="true"/>
<d:StatusValue m:null="true"/>
<d:Id m:type="Edm.Int32">2</d:Id>
<d:ContentType>Item</d:ContentType>
<d:Modified m:type="Edm.DateTime">2017-10-25T01:43:22</d:Modified>
<d:Created m:type="Edm.DateTime">2017-10-25T01:43:22</d:Created>
<d:CreatedById m:type="Edm.Int32">23</d:CreatedById>
<d:ModifiedById m:type="Edm.Int32">23</d:ModifiedById>
<d:Owshiddenversion m:type="Edm.Int32">1</d:Owshiddenversion>
<d:Version>1.0</d:Version>
<d:Path>/teams/edev-sharepoint-training/Stefan/Subsite_Stefan/Lists/Subsite list</d:Path>
</m:properties>
The added code.
function loadUsers(){
//vraag request aan server
var xhr = new XMLHttpRequest();
// server link en geeft aan of sync of Async is
xhr.open('GET', 'Website-URL', true);
// maak nieuwe function voor het laden
xhr.onload = function(){
// als de status van de server gelijk is aan 200 doe dan de data uit
de site in een lijst zetten.
if(this.status == 200){
var users = JSON.parse(this.responseText);
if(window.DOMParser){
parser = new DOMParser();
xmlDoc = parser.parseFromString(txt, "text/xml");
}
else{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(txt);
}
var output = '';
for(var i in users){
output +=
'<div class="user">' +
'<ul>' +
'<li id="ID">ID: '+xmlDoc.getElementsByTagName("Title")[0].childNodes[0].nodeValue+'</li>' +
'<li id="Login">Login: '+properties[0].d:Created+'</li>' +
'</ul>' +
'</div>';
}
document.getElementById('properties').innerHTML = output;
}
}
xhr.send();
}
</script>
