Преобразование объекта итеративного объекта карты в объект массива в ReactJS

Question

Я пытаюсь загрузить некоторый json-файл в DropdownList от react-widgets. Когда я загружаю файл JSON тип данных выглядит следующим образом:

Map {size: 1, _root: ArrayMapNode, __ownerID: undefined, __hash: undefined, __altered: false} 
__altered 
: 
false 
__hash 
: 
undefined 
__ownerID 
: 
undefined 
_root 
: 
ArrayMapNode 
size 
: 
1 
__proto__ 
: 
KeyedIterable 

В то время как компонент Dropdown (от react-widgets) нужен массив! Таким образом, он делает эту ошибку:

Failed propType: Invalid prop `data` of type `object` supplied to `DropdownList`, 
expected `array`. Check the render method of `Uncontrolled(DropdownList)`. 

я не могу загрузить файл JSON непосредственно, и я должен использовать Ajax, чтобы загрузить его (или технически я могу, но это огромный файл и каждый раз, когда пользователь нажимает на раскрывающемся меню список занимает пару секунд, чтобы загрузить данные из файла). Как я могу преобразовать это в массив?

P.S. Файл JSON выглядит следующим образом:

{ 
"items":[ 

    { 
    "id": "aaa", 
    "name": "english" 
    }, 
    { 
    "id": "aab", 
    "name": "Swedish" 
    }, 
    ] 
} 

Answer 1

Я думаю, что вы ищете что-то вдоль линий:

var dropdownList = jsonObject.items.map((item, i) => { 
    return (
    <option key={i} val={item.id}>{item.name}</option> 
); 
}) 

Array.prototype.map функция просто проходит по списку и создает новый список того же но с изменениями, основанными на функции модификатора/обратного вызова.

Обновления на основе комментариев:

На основе документации для DropdownList, у вас есть два варианта для передачи данных в список: плоский массив имен элементов или список объектов с определенными ключами для имени элемента и значение.

Вариант 1: плоский список имен элементов

var itemNames = jsonObject.items.map((item) => item.name); 

Вариант 2: список объектов

var items = jsonObject.items.map((item) => { 
    return { 
    textField: item.name, 
    valueField: item.id 
    } 
}); 

Преимущество использования второго варианта будет, когда кто-то выбирает один из этих пунктов event, который создается с указанием атрибута val HTML <option>. Это полезно для вас, особенно потому, что ваши идентификаторы и имена не совпадают. Пример:

Вариант 1 (сверху):

<DropwdownList 
    data={itemNames} 
    onSelect: (event) => { 
    // Will give the `val` attribute set by DropdownList 
    // This might be the item name, or it might be something unique to DrowdownList 
    console.log(event.target.value); 
    } 
/> 

Вариант 2 (сверху):

<DropwdownList 
    data={items} 
    onSelect: (event) => { 
    // Will give the `valueField` attribute you set, which for you is the item's `id` field 
    // This might be the item name, or it might be something unique to DrowdownList 
    console.log(event.target.value); 
    } 
/>