Retrieve the data from List on host web using SharePoint App

Open Visual Studio 2013 and create a new SharePoint App as shown here:

Open App.js from the Scripts folder and add the JavaScript code :

'use strict';

var hostweburl;

var appweburl;

var oItems;

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model

$(document).ready(function () {

    hostweburl =decodeURIComponent(getQueryStringParameter("SPHostUrl"));

    appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

    getListData();

   

});

// This function prepares, loads, and then executes a SharePoint query to get the List data

function getListData() {

    var ctx = new SP.ClientContext(appweburl);

    var appCtxSite = new SP.AppContextSite(ctx, hostweburl);

    var web = appCtxSite.get_web();

    var list = web.get_lists().getByTitle("Slideshow");

    var query = new SP.CamlQuery(); //The Query object. This is used to query for data in the List

  query.set_viewXml('<View><RowLimit></RowLimit>10</View>');

  oItems = list.getItems(query);

    ctx.load(list);

    ctx.load(oItems);

    ctx.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);

}

// This function is executed if the above call is successful

// It replaces the contents of the 'message' element with the titles

function onGetTitlesSuccess() {

    var imageTitles = oItems.getEnumerator();

    var titles = '';

    while (imageTitles.moveNext()) {

        var currentListItem = imageTitles.get_current();

        alert(currentListItem.get_item('Title'));

        titles += currentListItem.get_item('Title') + '<tr>';

       // $('#message').append('<img src="'+ +'">')

    }

    $('#message').text(titles);

}

// This function is executed if the above call fails

function onGetTitlesFail(sender, args) {

    alert('Failed to get user name. Error:' + args.get_message());

}

// Function to retrieve a query string value.

// For production purposes you may want to use

//  a library to handle the query string.

function getQueryStringParameter(paramToRetrieve) {

    var params =

        document.URL.split("?")[1].split("&");

    var strParams = "";

    for (var i = 0; i < params.length; i = i + 1) {

        var singleParam = params[i].split("=");

        if (singleParam[0] == paramToRetrieve)

            return singleParam[1];

    }

}