Problems with forEach loop in TypeScript

Question

I'm having a problem with my TypeScript code where in my forEach loop displays an undefined on the page. Provided below is my code for is my forEach statement:

private _renderList(items: ISPList[]): void {
    let html: string = '<div class="ms-Grid"><div class="ms-Grid-row">';
    items.forEach((item: ISPList) => {
      html += `
      <div class="ms-Grid-col ms-u-sm4 ms-u-md4 ms-u-lg4">
      <h2>${item.DisplayListTitle}</h2>
      <div>${item.ListItems.length}</div>
      <div>${item.ListItems.forEach((listItem: ListObject,index) => {

      })}</div>
      </div>`;
    });
    html +="</div></div>";    
    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    listContainer.innerHTML = html;
  }

The data is being populated via my _getMockListData method (see below):

private _getMockListData(): Promise<ISPLists> {
    return MockHttpClient.get()
      .then((data: ISPList[]) => {
        var listData: ISPLists = { value: data };
        return listData;
      }) as Promise<ISPLists>;
  }

The MockHttpClient object is defined below:

export default class MockHttpClient  {
   //Add some mock data to this for testing.
   private static _createListItems: ListObject[] = [
       {Title:'Doc1', FileType:'docx',ItemUrl:'http://www.espn.com', ItemType:'Document Library'},
       {Title:'Doc2', FileType:'docx',ItemUrl:'http://www.espn.com', ItemType:'Document Library'}];
   public static _applyListItems: ListObject[] = [
        {Title:'ListItem 1', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'},
        {Title:'ListItem 2', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'}];
   public static _deployListItems: ListObject[] = [
            {Title:'ListItem 2', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'},
            {Title:'ListItem 3', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'}]; 
   public static _supportListItems: ListObject[] = [
                {Title:'ListItem 5 ', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'},
                {Title:'ListItem 6', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'}]; 

   private static _items: ISPList[] = [
       { Title: 'Mock List',   Id: '1', ListType:"List", DisplayListTitle:'CREATE',  RowCount: 4, SortOrder:1, ShowOnHomePage:true,ListItems:MockHttpClient._createListItems},
       { Title: 'Mock List 2', Id: '2', ListType:"Library", DisplayListTitle:'APPLY', RowCount: 4, SortOrder:2, ShowOnHomePage:true,ListItems:MockHttpClient._applyListItems },
       { Title: 'Mock List 3', Id: '3', ListType:"List", DisplayListTitle:'DEPLOY',RowCount: 4, SortOrder:3, ShowOnHomePage:true,ListItems:MockHttpClient._deployListItems },
       { Title: 'Mock List 4', Id: '4', ListType:"Library", DisplayListTitle:'SUPPORT', RowCount: 4, SortOrder:4, ShowOnHomePage:true,ListItems:MockHttpClient._supportListItems }];

   public static get(): Promise<ISPList[]> {
   return new Promise<ISPList[]>((resolve) => {
           resolve(MockHttpClient._items);
       });
   }
}

Provided below is the definition for ISPList and ListObject:

export interface ISPLists { value: ISPList[]; }
export interface ISPList {
  Title: string;
  Id: string;
  DisplayListTitle: string;
  RowCount: number;
  SortOrder: number;
  ShowOnHomePage: boolean;
  ListType: string;
  ListItems: Array<ListObject>;
}
export interface ListObject {
    Title: string;
    ItemUrl: string;
    ItemType: string;
    FileType: string;
}

I can display the item.ListItems.length property and it shows that I have 2 elements, plus I can run item.ListItems[0].Title which shows the actual title value. It feels like I need a for loop instead of a forEach loop.

Please help.

Quentin 2 · Accepted Answer · 2018-08-20 08:45:02Z

2

The line:-

item.ListItems.forEach((listItem: ListObject,index) => {

      }

doesn't do anything and returns undefined. So you need to make a function that returns a string. forEach will always return undefined.

You could use a map. This returns an array, of strings in this case, that can be joined together to make one string.

item.ListItems.map((listItem: ListObject,index) => `<a href="${
listItem.ItemUrl}">${listItem.Title}</a>`).join('\n')

edited Aug 20, 2018 at 8:45

answered Aug 17, 2018 at 16:03

Quentin 2

2,4661 gold badge12 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brandon Michael Hunter Over a year ago

I'm kind of new to TypeScript, can you should me a script on how to do that?

hgiasac · Accepted Answer · 2018-08-17 16:12:23Z

0

Array.forEach doesn't return value. It is same as for loop, you have to define a outside variable and assign value.

Use map instead:

const titles = item.ListItems.map((listItem: ListObject,index) => {
  return listItem.Title;

  // join array string to a string with "," delimiter
}).join(", ");

answered Aug 17, 2018 at 16:12

hgiasac

2,23319 silver badges14 bronze badges

Collectives™ on Stack Overflow

Problems with forEach loop in TypeScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related