How to get data from SharePoint list using JSOM?

Question

Generally we are getting data from SharePoint server object model. But i need to collect data from SharePoint List using JSOM.

My requirement is below:

There is a list called List1 with 3 columns ID, Title, Status

I need to get all those data where Status is 1 and Title = "My given title"

Please provide the solution using JSOM.

Answer 1

The documentation here explains the JavaScript Object Model pretty well.

Essentially, you need to create a ClientContext object and use it to specify which instructions you want to execute. You'll use ClientContext.load() to specify which objects you want to populate with retrieved information, then use ClientContext.executeQueryAsync() to execute any queued instructions. Within the context of the callback functions that you provide to executeQueryAsync you can access the results of your query.

The below example demonstrates the typical approach.

<script>
ExecuteOrDelayUntilScriptLoaded(getListItems,"sp.js");
function getListItems(){
    var clientContext = new SP.ClientContext();
    var list = clientContext.get_web().get_lists().getByTitle("List1");
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml( /* build a CAML query to retrieve your items */
        "<View><Query>" +
        "<Where>" + 
            "<And>" +
                "<Eq><FieldRef Name=\"Status\"/><Value Type=\"Text\">1</Value></Eq>" +
                "<Eq><FieldRef Name=\"Title\"/><Value Type=\"Text\">My given title</Value></Eq>" + 
            "</And>"+
        "</Where>" +
        "</Query></View>");
    var items = list.getItems(camlQuery);
    clientContext.load(items);
    clientContext.executeQueryAsync(function(){
        var itemArray = [];
        var itemEnumerator = items.getEnumerator();
        while(itemEnumerator.moveNext()){ 
            /* loop through all your results */
            var item = itemEnumerator.get_current();
            var id = item.get_item("ID");
            var title = item.get_item("Title");
            itemArray.push(id + ": " + title);
        }
        alert("ID: Title\n"+itemArray.join("\n"));
    },function(sender,args){alert(args.get_message());});
}
</script>