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

score 1 · Answer 1 · answered Feb 01 '19 at 01:50

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}             
            />

How to pass json into fabric ui dropdown component?

1 Answers1