Javascript 如何为json数组的每一行调用REST服务，并替换其中一个值

我在typescript中有以下代码，它调用sharepoint rest api并获取列表项，但是sharepoint在内部使用id而不是名称保存用户配置文件，因此您可以看到数字9实际上应该是人名

我想要的是用我的名字替换数字9，我已经知道我需要调用什么服务，但是我不知道如何为返回的json的每一行调用，如何用返回的名字替换9

我的代码如下：

/// <reference path="../../../typings/jquery/jquery.d.ts" />
/// <reference path="../../../typings/jquery.dataTables/jquery.dataTables.d.ts" />

import {
  BaseClientSideWebPart,
  IPropertyPaneSettings,
  IWebPartContext,
  PropertyPaneTextField
} from '@microsoft/sp-client-preview';

//import styles from './Pnpcrudsample.module.scss';
import ModuleLoader from '@microsoft/sp-module-loader';
import * as strings from 'pnpcrudsampleStrings';
import { IPnpcrudsampleWebPartProps } from './IPnpcrudsampleWebPartProps';
//import * as pnp from 'sp-pnp-js';
import MockHttpClient from './MockHttpClient';
import { EnvironmentType } from '@microsoft/sp-client-base';

require('jquery');
require('datatables');

export interface ISPLists {
    value: ISPList[];
}

export interface ISPList {
  Title?: string;
  Id: number;
}

export interface IListItems{
   value: IListItem[];
}
//Title,h7vv,v7nw,mczsId,mczsStringId,BooleanColumn

export interface IListItem {
  Title: string;
  h7vv: string;
  v7nw: string;
  mczsId: string;
  BooleanColumn: string;
}

export default class PnpcrudsampleWebPart extends BaseClientSideWebPart<IPnpcrudsampleWebPartProps> {
   //private container: JQuery;

  //Default constructor, here we have to load css
  public constructor(context: IWebPartContext) {
    super(context);
    ModuleLoader.loadCss('//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css');
  }

  ///Gets data from the mock, fake data
  private _getMockListData(): Promise<IListItems> {
    return MockHttpClient.get(this.context.pageContext.web.absoluteUrl)
      .then((data: IListItem[]) => {
          var listData: IListItems = { value: data };
          return listData;
      }) as Promise<IListItems>;
  }

  ///Checks if the environment is local, then we will load data from mock, if not from the list
  private _renderListAsync(): void {
    // Local environment
    if (this.context.environment.type === EnvironmentType.Local) {
      this._getMockListData().then((response) => {
        this._renderList(response.value);
      });
    }
    else{
      this._getListData()
        .then((response) => {
          this._renderList(response.value);
        });
    }
  }
//Title,h7vv,v7nw,mczsId,mczsStringId,BooleanColumn

  ///Render list on the datatable
  private _renderList(items: IListItem[]): void {
    $('#example').DataTable({
      data: items,
      columns: [
          { "data": "Title" },
          { "data": "h7vv" },
          { "data": "v7nw" },
          { "data": "mczsId" },
          { "data": "BooleanColumn" }
      ]
    });
  }

  ///Get list data
  private _getListData(): Promise<IListItems> {
    return this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('Lista')/items?$select=Title,h7vv,v7nw,mczsId,mczsStringId,BooleanColumn`)
      .then((response: Response) => {
        return response.json();
      });
  }

  /// Generar contenido HTML
  public render(): void {
    debugger;
    ModuleLoader.loadCss('//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css');
    if (this.renderedOnce === false) {
       this.domElement.innerHTML = `<table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>NumberColumn</th>
                    <th>DateColumn</th>
                    <th>PersonColumn</th>
                    <th>BooleanColumn</th>
                </tr>
            </thead>
        </table>`;
    }
   this._renderListAsync();
  }

  //Property pane fields
  protected get propertyPaneSettings(): IPropertyPaneSettings {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('listName', {
                  label: strings.ListNameFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}


import { IListItem } from './PnpcrudSampleWebPart';

export default class MockHttpClient {
//Title,h7vv,v7nw,mczsId,mczsStringId,BooleanColumn
    private static _items: IListItem[] =
    [
      { Title: 'Mock List', h7vv: '1',v7nw :'01-01-2016',mczsId:'Luis Esteban Valencia',BooleanColumn:'Yes' },
      { Title: 'Mock List2', h7vv: '1',v7nw :'01-01-2016',mczsId:'Luis Esteban Valencia',BooleanColumn:'Yes' },
    ];

    public static get(restUrl: string, options?: any): Promise<IListItem[]> {
      return new Promise<IListItem[]>((resolve) => {
              resolve(MockHttpClient._items);
          });
      }
}

//
/// 
进口{
BaseClientSideWebPart，
IPropertyPaneSettings，
我的背景，
PropertyPaneTextField
}来自“@microsoft/sp客户端预览”；
//从“/Pnpcrudsample.module.scss”导入样式；
从“@microsoft/sp模块加载程序”导入模块加载程序；
将*作为字符串从“PnPCrudSampleString”导入；
从“./IPnpcrudsampleWebPartProps”导入{IPnpcrudsampleWebPartProps}；
//从“sp pnp js”导入*作为pnp；
从“/MockHttpClient”导入MockHttpClient；
从'@microsoft/sp client base'导入{EnvironmentType}；
require（'jquery'）；
要求（‘数据表’）；
导出接口列表{
值：ISPList[]；
}
导出接口列表{
标题？：字符串；
Id：编号；
}
导出接口{
值：IListItem[]；
}
//标题，h7vv，v7nw，mczsId，mczsStringId，布尔列
导出接口{
标题：字符串；
h7vv：字符串；
v7nw：字符串；
mczsId：字符串；
布尔列：字符串；
}
导出默认类PnpcrudsampleWebPart扩展BaseClientSideWebPart{
//私有容器：JQuery；
//默认构造函数，这里我们必须加载css
公共构造函数（上下文：IWebPartContext）{
超级（上下文）；
ModuleLoader.loadCss（'//cdn.datatables.net/1.10.12/css/jquery.datatables.min.css'）；
}
///从模拟、假数据中获取数据
private\u getMockListData（）：承诺{
返回MockHttpClient.get（this.context.pageContext.web.absoluteUrl）
。然后（（数据：IListItem[]）=>{
var listData:IListItems={value:data}；
返回列表数据；
})作为承诺；
}
///检查环境是否是本地的，然后我们将从mock加载数据，如果不是从列表加载
private _renderListAsync（）：void{
//当地环境
if（this.context.environment.type==EnvironmentType.Local）{
这是._getMockListData（）。然后（（响应）=>{
此._renderList（response.value）；
});
}
否则{
这是。_getListData（）
。然后（（响应）=>{
此._renderList（response.value）；
});
}
}
//标题，h7vv，v7nw，mczsId，mczsStringId，布尔列
///数据表上的呈现列表
private _renderList（项目：IListItem[]）：void{
$（'#示例'）。数据表({
数据：项目，
栏目：[
{“数据”：“标题”}，
{“数据”：“h7vv”}，
{“数据”：“v7nw”}，
{“数据”：“mczsId”}，
{“数据”：“布尔列”}
]
});
}
///获取列表数据
private\u getListData（）：承诺{
返回this.context.httpClient.get（this.context.pageContext.web.absoluteUrl+`/_api/web/lists/getbytitle（'Lista'）/items？$select=Title，h7vv，v7nw，mczsId，mczStringId，BooleanColumn`）
.然后（（响应：响应）=>{
返回response.json（）；
});
}
///通用内容HTML
公共呈现（）：void{
调试器；
ModuleLoader.loadCss（'//cdn.datatables.net/1.10.12/css/jquery.datatables.min.css'）；
if（this.renderence==false）{
this.doElement.innerHTML=`
标题
数字列
日期栏
全柱
布尔列
`;
}
这个；
}
//属性窗格字段
受保护的get-propertyPaneSettings（）：IPropertyPaneSettings{
返回{
页码：[
{
标题：{
描述：strings.PropertyPaneDescription
},
小组：[
{
groupName:strings.BasicGroupName，
组字段：[
PropertyPaneTextField（'listName'{
标签：strings.ListNameFieldLabel
})
]
}
]
}
]
};
}
}
从“./PnpcrudSampleWebPart”导入{IListItem}；
导出默认类MockHttpClient{
//标题，h7vv，v7nw，mczsId，mczsStringId，布尔列
私有静态_项：IListItem[]=
[
{标题：“模拟名单”，h7vv:'1'，v7nw:'01-01-2016'，mczsId:'Luis Esteban Valencia'，Boolean专栏：'Yes'，
{标题：'Mock List2'，h7vv:'1'，v7nw:'01-01-2016'，mczsId:'Luis Esteban Valencia'，Boolean Column:'Yes'，
];
公共静态get（restUrl:string，options？：any）：承诺{
返回新承诺（（解决）=>{
解决（MockHttpClient.\u项）；
});
}
}

上面代码的重要部分是：获取数据并将其绑定到datatable（jquery插件）的_renderlist方法，我想我应该在那里插入代码以调用其他服务，类似这样：

---

这里不需要两个REST呼叫。REST API调用应该如下所示

https://mytenant.sharepoint.com/sites/devsitesc1/_api/web/lists/getByTitle('YourListTitle')/items?$select=Title,NumberColumn,...,PersonColumn/Title&$expand=PersonColumn

---

如果您有任何筛选器，您可以添加“$filter=…”也

它不是一个查找列，而是一个人员选择器列