React JS - 如何将 json 数据绑定到下拉列表

Question

I have a react JS file and I'm attempting to bind data to a dropdown list. The data is stored in the following testing API/json file: https://api.myjson.com/bins/okuxu ...I want to start by binding the client name to it's respective dropdown list.

Sample json data:

[
    {
        "abc_buildingid": "11111112-64c2-5bd8-8b72-e92568694c76",
        "abc_energyprogramid": "5d84ef73-9b9a-475f-84e2-f307ad897df7",
        "siteName": "Construction One",
        "sampleCalibration": false,
        "clientName": "Client-1",
        "segmentName": "John Doe ES New Silver 4-7-2017-04-30-2018~25313~John Doe ES JDU Area Calibration~47851~Mod",
        "cfmRateFactor": 50
    }
]

...this is my code:

import React, { Component } from 'react';

class Ast extends Component {

   constructor(){
       super();
       this.state = {
           data: [],
       };
   } //end constructor

   bindDropDowns() {
       var clientName = document.getElementById('clientName').value

       for(var i=0; i < this.state.data.length; i++) {
        var clientName = this.state.data[i].clientName;
       }
   }

   componentWillMount() {
    fetch('https://api.myjson.com/bins/okuxu', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json',
        },
        /*body: JSON.stringify({
            username: '{userName}',
            password: '{password}'
        })*/
    }) /*end fetch */
    .then(results => results.json()) 
    .then(data => this.setState({ data: data })   
)

} //end life cycle

    render() {
        console.log(this.state.data);
        return (
            <div>


                <form>
                    <div>

                        <h2>Memeber Selection:</h2>

                        <div>

                            <div>
                                <select className="custom-select" id="clientName" onSelect="bindDropDowns()">
                                <option selected>Client</option>
                                </select>     
                            </div><br />

                            <div>
                                <select className="custom-select" id="siteName">
                                <option selected>Site Building Name</option>
                                </select>
                            </div><br />
                            <div>
                                <select className="custom-select" id="segmentName">
                                <option selected>Segments</option>
                                </select>
                            </div><br />
                           <div>
                                <label for="example-text-input">Modify CFM Rate Factor:</label>
                                <input class="form-control" type="textbox"  id="cfmRateFactor" value="10" />
                            </div><br />
                                <div>
                                    <button type="submit" className="btn btn-primary">Submit</button>
                                </div>
                            </div>
                    </div>
                    </form>
            </div>


        );
      }
}

export default Ast

I confirmed via the console that "this.state.data" contains all the information from the json file, so now I'm attempting to bind the client names to a dropdown list. Could I please get some guidance as to what I'm doing wrong?

Answer 1

In React, you use a declarative approach instead of DOM manipulation:

<div>
  {['clientName', 'siteName', 'segmentName'].map(key => (
    <select key={key}>
      {this.state.data.map(({ [key]: value }) => <option key={value}>{value}</option>)}
    </select>
  ))}
</div>

This generates the 3 dropdowns with the options populated.

Answer 2

In this.state define the json -

CityNames : {
                CityName : 
                    [
                        {CityKey : 1,CityDescription: 'abc'},
                        {CityKey : 2,CityDescription: 'xyz'}
                    ]

        }

Here is the code for Drop Down List

<select className="form-control">
          <option>---select---</option>
            {
            this.state.CityNames &&
            this.state.CityNames.CityName.map((h, i) => 
            (<option key={i} value={h.CityName}>{h.CityDescription}</option>))
            }
</select>

Answer 3

To populate data into the dropdown list

import your .json file

<select>
    <option> Select User</option>
      {
       data.map((result)=>(<option title={result.Id}>{result.title}</option>))
      }
</select>

Answer 4

Though your question is not clear, I assume you want to populate the api data into the respective dropdown

To populate data into the respective dropdown list

    <div>
   <select className="custom-select" id="clientName" onSelect="bindDropDowns()">
      this.state.data.map((obj) => 
      <option key={obj.clientName}>{obj.clientName}</option>
      );
   </select>
</div>
<br />
<div>
   <select className="custom-select" id="siteName">
                this.state.data.map((obj) => 
      <option key={obj.siteName}>{obj.siteName}</option>
      );
   </select>
</div>
<br />
<div>
   <select className="custom-select" id="segmentName">
                         this.state.data.map((obj) => 
      <option key={obj.segmentName}>{obj.segmentName}</option>
      );
   </select>
</div>
<br />

Answer 5

If you want to hold your data in a seperate json file;

You can declare the data like this.

export const Cities = {
    cities : [
        { Key: 1, Value: 'London' },
        { Key: 2, Value: 'New York' },
        { Key: 3, Value: 'Colombo' }    
    ]
}

export default Cities;

And we'll assume that it's in a file called cities.jsx

You import this file in the component where your dropdown list is in like this.

import {Cities} from "../../assets/data/cities.jsx";

(Give the right file path).

Then you can use it on your form control.

<FormControl as="select" onChange={(e) => this.handleCities(e)}>
    {Cities.cities && Cities.cities.map((e, key) => {
    return <option key={key} value={e.Key}>{e.Value}</option>;
 })}