Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Как обратиться в реакте к элементам объекта с вложенными массивами (https://javascript.ru/forum/library-toolkit-framework/77654-kak-obratitsya-v-reakte-k-ehlementam-obekta-s-vlozhennymi-massivami.html)

DVV 02.06.2019 20:48

Как обратиться в реакте к элементам объекта с вложенными массивами
 
есть объект с вложенными массивами в json файле

{
"capsules": [
{
"capsule_serial": "C101",
"capsule_id": "dragon1",
"status": "retired",
"original_launch": "2010-12-08T15:43:00.000Z",
"original_launch_unix": 1291822980,
"missions": [
{
"name": "COTS 1",
"flight": 7
}
],
"landings": 0,
"type": "Dragon 1.0",
"details": "Reentered after three weeks in orbit",
"reuse_count": 0
}
]
}
Не получается обратиться к missions name и missions flight

рони 02.06.2019 21:00

DVV,
json.capsules[0].missions[0].name

DVV 02.06.2019 21:53

'json' is not defined no-undef
вот такое выдает
почему именно так вы предлагаете?

вот мой код. я вывожу через https://github.com/typicode/json-server#getting-started

https://yadi.sk/i/L8PLNXLRyCFG4A
https://yadi.sk/i/n6qQot1BvqJXtg
https://yadi.sk/i/sIgwmuk8xwOiOA
https://yadi.sk/i/agb8J_kc5zrfGQ
https://yadi.sk/i/EpYGfPcUdaxE9A
https://yadi.sk/i/GKSVS6waQ0lI9g

рони 02.06.2019 22:20

DVV,
а так?
capsules.missions[0].name

DVV 02.06.2019 23:23

нет. никаких ошибок не выдает, но и данные не выводит именно эти 2 параметра
вот сделал вывод в таблицу. все есть, а два столбца пустые. пытался их в консоль вывести пишет, что undefined
https://yadi.sk/i/GXnEYOH_hkTjhg

рони 03.06.2019 07:42

DVV,
в выводе таблицы у вас name, а в обработке данных missions_name -- сделайте имена одинаковыми.
и лучше код текстом а не картинками.

DVV 03.06.2019 09:31

https://github.com/ViacheslavDemchenko/react-lists

рони 03.06.2019 10:56

DVV,
_transformPosts = (capsules) => {
        return {
            capsule_serial: capsules.capsule_serial,
            capsule_id: capsules.capsule_id,
            status: capsules.status,
            original_launch: capsules.original_launch,
            original_launch_unix: capsules.original_launch_unix,
*!*
            name: capsules.missions[0].name,
            flight: capsules.missions[0].flight,
*/!*
            landings: capsules.landings,
            type: capsules.type,
            details: capsules.details,
            reuse_count: capsules.reuse_count
        }
    }

DVV 03.06.2019 11:55

не помогло, так как тогда все надо и тут аналогичным образом менять

renderItems(arr) {
        return arr.map(capsule => {
            const {
                    capsule_serial,
                    capsule_id,
                    status,
                    original_launch,
                    original_launch_unix,
                    name,
                    flight,
                    landings,
                    type,
                    details,
                    reuse_count
                } = capsule;

            return <Capsule 
                        key={capsule_serial}
                        serial={capsule_serial}
                        id={capsule_id}
                        status={status}
                        launch={original_launch}
                        unix={original_launch_unix}
                        name={name}
                        fight={flight}
                        landings={landings}
                        type={type}
                        details={details}
                        reuse={reuse_count}
                    />
        })
    }


получились те же яйца, но с другой стороны

рони 03.06.2019 12:11

DVV,
тогда тут поменяйте
<td>{this.props.name}</td>
на
<td>{this.props.missions_name}</td>


Часовой пояс GMT +3, время: 22:19.