I am using javascript to pull in list information and display it. I need to pull in another list from another site collection. Both lists have to show up on the same page, each it there own sections. I've tried changing the function names, changing all the variable names but all to no avail. Only one list shows. Could someone please point me in the right direction? My code is below:

var siteUrl = '/sites/HR';

SP.SOD.executeFunc('SP.js', 'SP.ClientContext', function()
var _ctx = SP.ClientContext.get_current();

function retrieveListItems() {

var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('News');


var camlQuery = new SP.CamlQuery();


camlQuery.set_viewXml('<View><Query><OrderBy><FieldRef Name=\'ID\'/ Ascending=\'FALSE\'/ /></OrderBy><Where><Geq><FieldRef Name=\'ID\'/><Value Type=\'Number\'/>2</Value></Geq></Where><RowLimit>4</RowLimit></Query></View>');
this.collListItem = oList.getItems(camlQuery);

clientContext.executeQueryAsync(Function.createDelegate(this,  this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));


function onQuerySucceeded(sender, args) {

var listItemInfo = '';


var listItemEnumerator = collListItem.getEnumerator();

var i = 0;

while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    var story_count = i++;

    var story_id = oListItem.get_id();
    var story_fname = oListItem.get_item('FirstName');
    var story_lname = oListItem.get_item('LastName');
    var story_job_title = oListItem.get_item('Title1');
    var story_excerpt_pre = oListItem.get_item('Challenge');
    var story_excerpt = story_excerpt_pre.substring(0, 100);
    var story_title = oListItem.get_item('ol_Department');
    var story_location = oListItem.get_item('Story_x0020_Location');
    var story_image_pre = oListItem.get_item('Story_x0020_Image');

    var attachment = oListItem.get_attachmentFiles();
    var sitePull = new SP.ClientContext.get_current();
    var web = sitePull.get_web();
    var attachmentFolder = web.getFolderByServerRelativeUrl('Lists/News/Attachments/'+story_id);
    var attachmentFiles = attachmentFolder.get_files();


    $('<div id="story_'+story_id+'" class="story_item" style="width:48%;display:inline-block;vertical-align:top;"><div id="'+story_count+'" class="story_contents" style="padding-right: 14px;margin-right: 10px; margin-bottom: 0px;   "><div class="story_image" style="width:100%;"></div><a href="#?news_index='+story_count+'" style="display:block;"><h2 style="margin-bottom:0px;color:#000;margin-top:0px;font-weight:700;line-height:1;font-size:16px;">'+story_job_title+'</h2></a><p style="margin-bottom:15px;font-size:16px;line-height:1;margin-top:5px;color:#000;">'+story_location+'</p><p style="font-size:16px;color:#666;line-height:1.3;">'+story_excerpt+'...</p></div></div></div>').appendTo('#stories_wrap');

 function onQueryFailed(sender, args) {
 console.log('Request failed. ' + args.get_message() + '\n' +    args.get_stackTrace());

.stories_wrap p, .stories_wrap span {
font-size:16px !important;
font-family:tahoma, sans-serif !important;
margin-bottom: 0px;


 <div class="stories_container">
 <div id="stories_wrap" class="stories_wrap"></div></br>
 <a href="#" style="display:inline-block;padding:10px 20px 10px 24px;color:#000;font-weight:700;border:1px solid #000;background:#fff;text-align:left;float:right;position: relative;">View All News</a>


I am trying to add a list called "News 2017". Tried using:

var siteUrl = '/';
var oList2 = clientContext.get_web().get_lists().getByTitle('News 2017');

I also tried adding a additional while loop and separating the code into another file, then placing both codes into different script embed files. It didn't work.

  • Clean up your code in a decent editor, this is a mess with mistakes all over Visual Studio Code is free Jan 13, 2017 at 19:41

1 Answer 1


var siteUrl = '/sites/site',    

function initiationMethod()
    SP.SOD.executeFunc('SP.js', 'SP.ClientContext', callMethods);

function callMethods()

function GetCurrentSiteContent()
    _ctx1 = SP.ClientContext.get_current();

    //load your list and camlQuery and listcollection

    _ctx1.executeQueryAsync(Function.createDelegate(this,  this.onQuerySucceeded1), Function.createDelegate(this, this.onQueryFailed));

function GetSubsiteContent()
    _ctx2 = new SP.ClientContext(siteUrl);

    //load your list and camlQuery and listcollection

    _ctx1.executeQueryAsync(Function.createDelegate(this,  this.onQuerySucceeded2), Function.createDelegate(this, this.onQueryFailed));

function onQuerySucceeded1(sender, args) {
    //perform your operation

function onQuerySucceeded2(sender, args) {
    //perform your operation

function onQueryFailed(sender, args) {
    //perform your operation

Keep variables name unique for retrieving data from these lists from different site collections.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.