How to work JQuery and content editor webpart functionality in sharepoint 2013?

Question

Hi all,
I have a requirement to display the list data in share-point page by using JQuery and content editor web-part. could you please any one suggest the process to display the list data using JQuery and ContentEditorWebpart.
Thanks in advance.
Thanks,
phani kumar
Phani kumar

Answer 1

Hi,
From your description, my understanding is that you want to show a list data in a page using jQuery and Content Query Web Part.
You could use SharePoint REST API to accomplish your requirement, please refer to this code below:
<div id="listData">
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function(){
//replace your list title
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('customlist03')/items",
type: "GET",
headers: {"accept": "application/json;odata=verbose"},
success: function (data) {
if (data.d.results) {
var obj = data.d.results;
for(var i = 0; i < obj.length; i++)
$("#listData").append("<div>title "+obj[i].Title+"</div>");
error: function (xhr) {
alert(xhr.status + ': ' + xhr.statusText);
</script>​​
The screenshot below is my result:
Please refer to these articles:
Working with lists and list items with REST
https://msdn.microsoft.com/en-us/library/office/dn292552.aspx
SharePoint 2013 – CRUD on List Items Using REST Services & jQuery
http://www.plusconsulting.com/blog/2013/05/crud-on-list-items-using-rest-services-jquery/
You can also get list data using JavaScript Client Object Model(JSOM), you could refer to this article:
How to: Complete basic operations using JavaScript library code in SharePoint 2013
https://msdn.microsoft.com/en-us/library/office/jj163201.aspx?f=255&MSPPError=-2147217396
Here is a link about how to add code into page via Content Editor Web Part:
http://blogs.msdn.com/b/sharepointdev/archive/2011/04/14/using-the-javascript-object-model-in-a-content-editor-web-part.aspx
Best Regards,
Vincent Han
TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
[email protected]