How do you convert an object to an array in js ? (or is there a better way to dynamically update a nested object)

Basically I'm trying to update some data for the plotly component from an axios request on the fly, but plotly complains it is fed an object instead of an array.

Part of the code :

var trace0 = {
    type: 'ohlc',
    xaxis: 'x',
    yaxis: 'y',

    increasing: {line: {color: 'green'}},
    decreasing: {line: {color: 'red'}},
    line: {color: 'rgba(31,119,180,1)'},

    x: ['2017-01-17'],
    open: [118.339996],
    high: [120.239998],
    low: [118.220001],
    close: [120],
};

var init_data = [trace0];

export default class GraphRAW extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            data: [],
            layout: {},
            config: {},
            checking:false,
            revision: 0
        };
    }

    getStart = () => {
        const symbol = 'tst'
        return axios
            .post(API_URL   "startRAW", {symbol } )
            .then((response) => {
             if (response.data) {
                var newData = Object.assign({}, this.state.data);

                newData[0].x = response.data.x;
                newData[0].close = response.data.close;
                newData[0].open = response.data.open;
                newData[0].low = response.data.low;
                newData[0].high = response.data.high;

                console.log('new data here =>');
                console.log(newData);                   // Data seems ok in console
                console.log(typeof(newData));           // Typeof new data is object

                this.setState({data: newData });
                this.setState({revision: this.state.revision  }); // Update revision to initiate a new plot in the plotly component

                console.log('this data here =>');
                console.log(this.data);                 // Undefined in console       
                console.log(typeof(this.data));         // Undefined in console 

                return response;
             }
            });

    componentDidMount(){
        this.setState({config: init_config});
        this.setState({layout: init_layout});
        this.setState({data: init_data});

        this.getStart();
    }

Warning: Failed prop type: Invalid prop data of type object supplied to PlotlyComponent, expected an array.

It seems response.data.x (~.close ~.open ~.low ~.high) are objects which need to be converted to an array in the data object.

In the render :

<Plot useResizeHandler data={this.state.data} layout={this.state.layout} config={this.state.config} revision={this.state.revision} style={{width: "100%" }} />

Any help highly appreciated

CodePudding user response：

Posting my comment as an answer:

You just need to wrap the values returned from the server in an array, e.g:

newData[0].x = [response.data.x];