Features of JavaScript

Below are some features of JavaScript:

  • It is a dynamic, interpreted and weekly typed programming language.
  • It is not pre-compiled like C++ (C++ is compiled during or after development). JavaScript is parsed and compiled on the fly, that is, code is evaluated and executed at runtime, in the browser.
  • Code can be changed at runtime like type of variable can be changed.
  • Data Types are assumed automatically. We don’t necessarily have to define a data type of a variable hence Data Type of variables are not set
  • JavaScript is used to create more dynamic websites by executing in the browser.
  • JavaScript can manipulate HTML code and CSS.
  • JavaScript can be used to send back HTTP requests and fetch data without reloading the page.
  • JavaScript cannot access local filesystem, interact with operating system etc.

Remove duplicate values from an Array in JavaScript

Below is a code to remove duplicate values from an array. OriginalArray is an array which contains duplicate values.

function removeDuplicate(OriginalArray){
  let uniqueValues = [];
  for (let i = 0; i < OriginalArray.length; i++) {
    if (uniqueValues.indexOf(OriginalArray[i]) == -1) {
      uniqueValues.push(OriginalArray[i]);
    }
  }
  console.log("Unique Value Array", uniqueValues);
}

Get User Name by passing User ID

Below is the code to get User Name by passing User ID:

private getUserName = (userId) => {
        let url = `${this.props.siteUrl}/_api/Web/GetUserById('${userId}')`;
        return new Promise<string>((resolve: (Title: string) => void, reject: (error: any) => void): void => {
            this.props.spHttpClient.get(url,
             SPHttpClient.configurations.v1,
             {
                 headers: new Headers()
             })
            .then((response: SPHttpClientResponse): Promise<{ value: { Title: string } }> => {
                 return response.json();
            }, (error: any): void => {
                 reject(error);
            })
            .then((response): void => {
                 resolve(response.Title);
            });
    });
}

Below is the code to get User Name by passing User ID. This code is developed using pnp.

 private getUserName = (userId) => {
    return pnp.sp.web.siteUsers.getById(userId).get().then(user => {
      return user.Title;
    }).catch(reject => console.error(reject));
  }

You can get other User properties from user variable like Email and LoginName.

Error TS1110: Type expected

Error:

node_modules/rc-mentions/lib/util.d.ts(4,55): error TS1110: Type expected.

I encountered this error when I was creating a web part in SharePoint Framework using ReactJS.

Solution:

Install the latest version of Typescript or update rush-stack-compiler

npm install typescript@latest
npm install @microsoft/rush-stack-compiler-3.3 --save

or you can use

npm update

Verify that the folder named rush-stack-compiler-3.3 inside node_modules/@microsoft folder.

Now remove dependencies from package.json file for older version and include for the new one.
Change tsconfig.json file in extends field for the new path.

Property ‘entries’ does not exist on type ‘ObjectConstructor’

When we try to read the entries of an object using Object.entries(), it gives the error: Property ‘entries’ does not exist on type ‘ObjectConstructor’.

To resolve this follow below:

  • Open config.js file.
  • Add following code. There might already be lib section, then add only¬†es2017 under it.
"lib": [
    "es2017"
]

The SharePoint Workbench

  • SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. SharePoint workbench can be accessed from any SharePoint site in your tenancy using following URL:
  • SharePoint Site Workbench
http://sharepoint-site-url/_layouts/15/workbench.aspx
  • Local Workbench
https://localhost:4321/temp/workbench.html
  • Whenever you run your SPFx web part, Local Workbench is automatically launched in the browser and you can preview your web part. Any changes that you make in your web part code will be automatically reflected in local workbench. Local Workbench is not connected to SharePoint list.
  • You have to manually run SharePoint Workbench by typing the URL in the browser. Any changes that you make in your web part code will not be reflected in the web part unless you refresh it. SharePoint Workbench is connected to your SharePoint Site Collection, hence you can access SharePoint list and features of SharePoint to test your web part.