where do i need to add my custom javascript (which will be rendering the results inside the modern web part) inside my client-side web part project

Question

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="";
    $.ajax({
     url: url,
     method: "GET",   
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data) {
        if(data.d.results.length>0){
        
            var items=data.d.results;
            for(var i=0;i<items.length;i++){

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

</script>

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?

Thanks

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.

sp-dev-fx-webparts/samples/sharepoint-crud