How to pass json into fabric ui dropdown component?

Question

I am trying to use a fabric ui component in a SPFx extension. I have already placed the Dropdown component in the extension and now i have to give it the options that the user can select.

The options are delivered as json, here is the example I am following to create a mockupdata provider: Using mockupdata provider This is the snippet that provide the data as json:

 private _getListData(): Promise<ISPLists> { return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => { return response.json(); }); } 

This is how the dropdown component looks like:

 export class DropdownRequiredExample extends BaseComponent<{}, {}> { constructor(props: {}) { super(props); } public render(): JSX.Element { return ( <div className="docs-DropdownExample"> <Dropdown placeholder="Select an Option" label="Required dropdown example:" options={[ { key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header }, { key: 'A', text: 'Option a', title: 'I am option a.' }, { key: 'B', text: 'Option b' }, { key: 'C', text: 'Option c', disabled: true }, { key: 'D', text: 'Option d' }, { key: 'E', text: 'Option e' }, ]} required={true} /> </div> ); } } 

What I need to do is place the data that is delivered in the json in the options property of the dropdown. How can i do it?

Best regards Americo

Answer 1

Sample demo.

Send webpart context to component(in .ts file)

const element: React.ReactElement<IOfficeUiFabricProps > = React.createElement(
      OfficeUiFabric,
      {
        description: this.properties.description,
        context: this.context       
      }
    )

Update component(IComponent.ts file)

export interface IOfficeUiFabricProps {
  description: string;  
  context:any;
}

In tsx file

private _getListData(clientContext): Promise<any> {
    return clientContext.spHttpClient.get(clientContext.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
      .then((response?: any) => {
        return response.json();
      });
   }

render function

var testOptions=[];
    this._getListData(this.props.context).then((data: any) => {      
      for (let i: number = 0; i < data.value.length; i++) {
        //debugger;
        testOptions.push({key:data.value[i].Id,text:data.value[i].Title,});
      }      
    })    
    return (     
      <div >  
        <Dropdown label="Required dropdown example:" 
         options={testOptions}             
            />