CSOM

Functionality we are trying to achieve:

On page load, the web part should show us the info for title “Tom” on the page. That is on page load user should see name and details of the user “Tom” pulled from the “Info” list.

<script type="text/javascript">

    //Make sure SP.js is loaded before using it

    $(document).ready(function () { ExecuteOrDelayUntilScriptLoaded(infoLoad, "SP.js"); });

    //This method is called on the page load and this will load the details of the user info from the "Info" list.

    function infoLoad() {

        try {

     //hardcoding the title value. You can easily make it dynamic by pulling it from some control in case it is needed

     var title = " Tom";

            var context = new SP.ClientContext.get_current();

            var web = context.get_web();

            var list = web.get_lists().getByTitle('Info');

            var query = '<View Scope=\'RecursiveAll\'>' +

                        '<Query>' +

                            '<Where>' +

                            '<Contains>' +

                                '<FieldRef Name=\'Title\'/>' +

                                '<Value Type=\'Text\'>' + title + '</Value>' +

                            '</Contains>' +

                            '</Where>' +

                        '</Query>' +

                             '</View>';

            var camlQuery = new SP.CamlQuery();

            camlQuery.set_viewXml(query);

            this.productcollection = list.getItems(camlQuery);

//Mentioning few properties to pull from the list

            context.load(this.productcollection, 'Include(Title, UserDetails)');

//Defining the fallback methods

            context.executeQueryAsync(Function.createDelegate(this, this.productsReceived), Function.createDelegate(this, this.failed));

            return false;

        }

        catch (e) {

            alert(e);

        }

    }

    //This method is called on the success of the infoLoad function and it passes list colection to this function.

    function productsReceived() {

        var TextFiled = "";

        var ListEnumerator = this.productcollection.getEnumerator();

        while (ListEnumerator.moveNext()) {

            var currentItem = ListEnumerator.get_current();

$('#<%=lblName.ClientID%>').html(currentItem.get_item(' Title '));              $('#<%=lblUserDetails.ClientID%>').html(currentItem.get_item('UserDetails'));

        }

        return false;

    }

//Defining the failed method

    function failed(sender, args) {  

        alert('failed. Message:' + args.get_message());

    }

</script>

//Defining 2 controls to display the data. You can use HTML controls. Just to show the syntax to use server side controls on JQuery, the below controls are used

<div class="description">

                <h2>

                    <asp:Label ID="lblName" runat="server"></asp:Label></h2>

                <p>

                    <asp:Label ID="lblUserDetails" runat="server"></asp:Label>

                </p>

</div>

Deploy the solution to a site, add the web part to a page and check Tom’s data on the page.