JavaScript Iterate über Objekt

Question

Ich verwende ReactJS mit React-Bootstrap. Der Service, den ich aufrufen möchte, um mögliche Werte für eine Combobox zu erhalten, gibt ein JSON-Objekt zurück.

{"1":"GLOBAL","2":"STORE","3":"COUNTRY","4":"REGION","5":"DISTRICT","6":"CUSTOM_LIST"} 

Ich möchte irgendwie über diese Iterierte drehen und eine SELECT mit den Optionen Wert ist die ganze Zahl erstellen, und der Wert Zeichenfolge zu sein, was angezeigt wird.

Wie kann man damit ein JSON-Objekt zurückgeben, das eine serialisierte Map zu sein scheint.

Answer 1

const data = { 
    "1":"GLOBAL", 
    "2":"STORE", 
    "3":"COUNTRY", 
    "4":"REGION", 
    "5":"DISTRICT", 
    "6":"CUSTOM_LIST" 
} 

const optionEls = Object.keys(data).map(key => (
    <option value={key}>{data[key]}</option> 
)) 

oder als Komponente empfängt die data als props:

const SelectComponent = ({data}) => (<select> 
    { 
    Object.keys(data).map(key => (
     <option value={key}>{data[key]}</option> 
    )) 
    } 
</select>) 

Answer 2

Sie sollten wahrscheinlich in der Lage sein, so etwas wie dies in JSX zu tun:

<select> 
    Array.from(myMap).map(([key, value]) => ({ 
    <option value={key}>{value}</option> 
    })); 
</select> 

wo myMap ist Ihre Struktur JSON .

Answer 3

Vielleicht kann dieser Ihnen helfen, ich bin einen ähnlichen Ansatz mit https://jsfiddle.net/69z2wepo/70835/

const data = {"1":"GLOBAL","2":"STORE","3":"COUNTRY","4":"REGION","5":"DISTRICT","6":"CUSTOM_LIST"}; 

function getDataToSelect(data){ 
    return _.map(_.keys(data),(key)=>{ 
     return {id:key, text:data[key]} 
    }) 
} 

const SelectElement = (props) => (
     <select> 
     { 
      [<option key={'none'}></option>].concat(props.options.map((opt, idx) => { 
       return <option key={opt.id + '_' + idx} value={opt.id}>{opt.text}</option> 
      })) 
      } 
     </select> 
    ); 

ReactDOM.render(
    <SelectElement options={getDataToSelect(data)} />, 
    document.getElementById('container') 
);