SharePoint Framework Client Side Web Part accessing Data from External API

This guide will help you setup a local SharePoint work environment (Workbench).
You will also build your first web part and populate it using an external API.

Setting up the Windows development environment

npm install -g npm (-g = Global)
npm install -g yo (Installs Yeoman)
npm install -g gulp (Installs Gulp)
npm install -g @microsoft/generator-sharepoint (SharePoint Generator)

Create your first project

• cd \Projects
• md staff
• cd staff
• yo @microsoft/sharepoint
• Press Enter to accept default (staff)
• Press Enter to accept default (SharePoint Online only (latest))
• Press Enter to accept default (Use the current folder)
• Enter N to the next 2 questions
• Press Enter to accept default (WebPart)
• Press Enter to accept default Web part name (staff)
• Enter a description for your Web part
• Press Enter to accept default (No JavaScript framework)

/**
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 * Found on github: https://gist.github.com/codecorsair
 */
export interface RequestOptions {
  ignoreCache?: boolean;
  headers?: {[key: string]:string};
  // 0 (or negative) to wait forever
  timeout?: number;
}

export const DEFAULT_REQUEST_OPTIONS = {
  ignoreCache: false,
  headers: {
    Accept: 'application/json, text/javascript, text/plain',
  },
  // default max duration for a request
  timeout: 5000,
};

export interface RequestResult {
  ok: boolean;
  status: number;
  statusText: string;
  data: string;
  json: <T>() => T;
  headers: string;
}

function queryParams(params: any = {}) {
  return Object.keys(params)
      .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
      .join('&');
}

function withQuery(url: string, params: any = {}) {
  const queryString = queryParams(params);
  return queryString ? url + (url.indexOf('?') === -1 ? '?' : '&') + queryString : url;
}

function parseXHRResult(xhr: XMLHttpRequest): RequestResult {
  return {
    ok: xhr.status >= 200 && xhr.status < 300,
    status: xhr.status,
    statusText: xhr.statusText,
    headers: xhr.getAllResponseHeaders(),
    data: xhr.responseText,
    json: <T>() => JSON.parse(xhr.responseText) as T,
  };
}

function errorResponse(xhr: XMLHttpRequest, message: string | null = null): RequestResult {
  return {
    ok: false,
    status: xhr.status,
    statusText: xhr.statusText,
    headers: xhr.getAllResponseHeaders(),
    data: message || xhr.statusText,
    json: <T>() => JSON.parse(message || xhr.statusText) as T,
  };
}

export function request(method: 'get' | 'post',
  url: string,
  queryParams: any = {},
  body: any = null,
  options: RequestOptions = DEFAULT_REQUEST_OPTIONS) {
  
  const ignoreCache = options.ignoreCache || DEFAULT_REQUEST_OPTIONS.ignoreCache;
  const headers = options.headers || DEFAULT_REQUEST_OPTIONS.headers;
  const timeout = options.timeout || DEFAULT_REQUEST_OPTIONS.timeout;

  return new Promise<RequestResult>((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, withQuery(url, queryParams));
  
    if (headers) {
      Object.keys(headers).forEach(key => xhr.setRequestHeader(key, headers[key]));
    }

    if (ignoreCache) {
      xhr.setRequestHeader('Cache-Control', 'no-cache');
    }

    xhr.timeout = timeout;

    xhr.onload = evt => {
      resolve(parseXHRResult(xhr));
    };

    xhr.onerror = evt => {
      resolve(errorResponse(xhr, 'Failed to make request.'));
    };

    xhr.ontimeout = evt => {
      resolve(errorResponse(xhr, 'Request took longer than expected.'));
    };

    if (method === 'post' && body) {
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify(body));
    } else {
      xhr.send();
    }
  });
}

    //Begin: Call the api and populate the EmployeeList div.
    { 
      request("get", "https://jsonplaceholder.typicode.com/users")
      .then(function(data) {

        interface MyObj {
          name: string;
          email: string;
      }

        var Html = ""; 
        let obj: MyObj = JSON.parse(data.data);
        console.log(obj);
                         
        for (var i in obj) {
            Html += "<div>Name: "+ obj[i].name + ", Email: " + obj[i].email +"</div>";                   
        }
        document.getElementById('EmployeeList').innerHTML = Html;
      })
      .catch(function(error){
        console.log('Something went wrong!',error);
      })            
    } 
    //End: Call the api and populate the EmployeeList div.

import { request } from './loc/requests';

    this.domElement.innerHTML = `
      <div class="${ styles.staff }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <div class="${ styles.label }">Staff Members</div>          
                <div id="EmployeeList" class="${ styles.row }"></div>
            </div>
          </div>
        </div>
      </div>`;