I have built my first client side web part as mentioned on this link https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part. now the web part will show a simple hello word.

But i have the following JavaScript :-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="123123">123</div>

<script type="text/javascript">
var idfromurl = window.location.href;// do extra steps to get the item id....
$(function () { 
    var url = "/_api/web/lists/getbytitle('Dept')/items?$filter=ID eq idfromurl&$select=ID,Title,desc&$orderby= Title asc";
    var html="";
     url: url,
     method: "GET",   
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data) {
            var items=data.d.results;
            for(var i=0;i<items.length;i++){

                html+= items[i].Title + "|"+ items[i].desc+"<br/>";
     error: function (data) {       


which will get a parameter from a url, and send an api call to get an item description and item title, and should then render the result inside the web part.

but i am not sure where inside my web part project i can add this javascript code? should it be inside the .ts file under the public render(): void method?


1 Answer 1


Yes, we can render the list item using REST API using this.context.spHttpClient.get() method in the public render():void method in .ts file.

The following article for your reference.

Retrieve SharePoint List Items Using SharePoint Framework Development Model

Code Example about SharePoint CRUD for list item from github.


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.