Question

我正在使用ReactJS和React-Bootstrap。我正在调用以获取组合框的可能值的服务返回一个JSON对象。

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

我想以某种方式对此进行迭代并创建一个SELECT，其中选项值为整数，字符串值为显示的内容。

<option value="1">GLOBAL</option>

如何使用它返回一个JSON对象，它似乎是一个序列化的Map。

Answer 1

你应该可以在JSX中做这样的事情：

#include <iostream>
#include <SFML/Graphics.hpp>
#include <cstdlib>
#include <stdlib.h>
#include <ctime>
using namespace sf;
using namespace std;
int RandPosx;
#pragma once

class Obstacle1
{
 public:
void obstacle1_spawn(Sprite &firstwall, bool &GameOn, RenderWindow &gameDisplay)
{
    srand(time(0));
    RandPosx = (rand() % 300)+ 1;
    cout << RandPosx << endl;
    cout << firstwall.getPosition().y << endl;
    firstwall.setPosition(300, 100);

    while (firstwall.getPosition().y < 1000)
    {
        firstwall.move(0.0f, 0.5f);
        if (firstwall.getPosition().y > 1000)
        {
            GameOn = false;
            gameDisplay.close();
        }
    }



  }
};

其中<select> Array.from( myMap ).map(([key, value]) => ({ <option value={key}>{value}</option> })); </select>是您的JSON结构。

Answer 2

也许这可以帮到你，我使用类似的方法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')
);

JavaScript迭代对象

2 个答案: