Как преобразовать object в array в React JS

164
18 марта 2018, 22:42

Добрый день всем! Начал изучать реакт и столкнулся с проблемой. Данные, которые я получаю от API и закинул в пропс хранятся в виде object. Как только начинаю перебирать map или forEach ничего не выходит. Начал искать способы конвертнуть из объект в массив, но преобразование проходит не очень успешно. Если в объекте есть вложенные объекты, то вложенности не становятся array. Подскажите как можно преобразовывать данные в массив или вовсе обходится без этого, чтобы это не выглядело плохо? Вот пример моих данных:

{
    id: '1',
    name: "BMW",
    model: "3-series",
    count: '110',
    image: "http://media-dmg.assets-cdk.com/teams/repository/export/v/2/4bd/264d8b39610058e0a0050568ba825/4bd264d8b39610058e0a0050568ba825.png",
    colorHex:'212121',
    color:'aqua Dark',
    equip:'Basic',
    info: {
        engine:'benzin',
        year:'2018',
        ph:'160',
        transmission:'auto',
        drive:'front'
    },
    prices: {
        lease:'220',
        cash:'30000',
        credit:'300'
    },
    specifications: {
        basic: {
            interior: {
                0:'Обивка сидений, ткань Firework',
                1:'Передний подлокотник',
            },
            climate: {
                0:'Крыша и корпуса внешних зеркал в цвет кузова',
                1:'Обогрев форсунок омывателей и внешних зеркал',
            },
            exterior: {
                0:'Крыша и корпуса внешних зеркал в цвет кузова',
                1:'Обогрев форсунок омывателей и внешних зеркал',
                2:'Электрический корректор фар',
                3:'Противотуманные фары',
                4:'15-дюймовые легкосплавные диски Heli Spoke, серебристого цвета',
            },
            comfort: {
                0:'Крыша и корпуса внешних зеркал в цвет кузова',
                1:'Обогрев форсунок омывателей и внешних зеркал',
                2:'Электрический корректор фар',
            },
            multimedia: {
                0:'Крыша и корпуса внешних зеркал в цвет кузова',
            },
            security: {
                0:'Крыша и корпуса внешних зеркал в цвет кузова',
                1:'Обогрев форсунок омывателей и внешних зеркал',
            }
        },
        add: {
            interior: {
                0:'Крыша и корпуса внешних зеркал в цвет кузова',
                1:'Обогрев форсунок омывателей и внешних зеркал',
                2:'Электрический корректор фар',
                3:'Противотуманные фары',
                4:'15-дюймовые легкосплавные диски Heli Spoke, серебристого цвета',
            },
            climate: {
                0:'Крыша и корпуса внешних зеркал в цвет кузова',
                1:'Обогрев форсунок омывателей и внешних зеркал',
                2:'Электрический корректор фар',
                3:'Противотуманные фары',
                4:'15-дюймовые легкосплавные диски Heli Spoke, серебристого цвета',
            },
            exterior: {
                0:'Крыша и корпуса внешних зеркал в цвет кузова',
                1:'Обогрев форсунок омывателей и внешних зеркал',
                2:'Электрический корректор фар',
                3:'Противотуманные фары',
                4:'15-дюймовые легкосплавные диски Heli Spoke, серебристого цвета',
            },
            comfort: {
                0:'Крыша и корпуса внешних зеркал в цвет кузова',
                1:'Обогрев форсунок омывателей и внешних зеркал',
                2:'Электрический корректор фар',
                3:'Противотуманные фары',
                4:'15-дюймовые легкосплавные диски Heli Spoke, серебристого цвета',
            },
            multimedia: {
                0:'Крыша и корпуса внешних зеркал в цвет кузова',
                1:'Обогрев форсунок омывателей и внешних зеркал',
                2:'Электрический корректор фар',
                3:'Противотуманные фары',
                4:'15-дюймовые легкосплавные диски Heli Spoke, серебристого цвета',
            },
            security: {
                0:'Крыша и корпуса внешних зеркал в цвет кузова',
                1:'Обогрев форсунок омывателей и внешних зеркал',
                2:'Электрический корректор фар',
                3:'Противотуманные фары',
                4:'15-дюймовые легкосплавные диски Heli Spoke, серебристого цвета',
            }
        },
        character: {
            fuel: {
                city:'9',
                all:'7',
                track:'8'
            },
            speed: '8'
        }
    }
},

Хочу доставать информацию, например о ценах

          renderPrices(title, price) {
        const {classes} = this.props;
            return (
                <div>
                    <Typography className={classes.titlePrice}>{title}:</Typography>
                    <Typography className={classes.price} component="p">
                        {price}<br />
                    </Typography>
                </div>
            )
        }
    render() {
        return (
            <CardContent>
{this.props.viewModel.prices.map ((key, price)=> this.renderPrices(key, price))}
            </CardContent>
        )
    }
}
READ ALSO
Проблема с htacess в WordPress

Проблема с htacess в WordPress

Привет!Я создал фронт енд для своего сайта на React и залил его на серверНа сервере в корне лежит сам проект а WordPress в папке wp

152
Как запретить нажимать на кнопку

Как запретить нажимать на кнопку

Мне нужно запретить нажимать на кнопку, пока он не нажмёт на checkbox, как реализовать?

186
как обмениваться файлами в чате WebSockets?

как обмениваться файлами в чате WebSockets?

У меня есть чат на вебсокете, как отправить фото на сервер чтоб потом сервер перезаписал эту фото у себя и отправил ссылку на фото пользователем?...

156
&ldquo;Курсоры&rdquo; в браузере

“Курсоры” в браузере

Программирую веб-проект: чистый PHP+MySQLВижу, что в контенте HTML появляется курсор, который перемещается, словно, по таблице или текстому документу

160