使用 map() 和 JSX 将数据数组渲染到 [[]]

Question

I have a function in JSX that stores value gotten from a database thus:

const data = JSON.parse(xhr.responseText);
               this.setState({ data: data });

The response format is:

[{"id":4,"name":"Avengers: Infinity War","year":2018},{"id":5,"name":"Thor: Ragnarock","year":2017},{"id":6,"name":"Black Panther","year":2018},{"id":7,"name":"Star Wars: The Rise of Skywalker","year":2019}]

However, I am trying to use a react table control that expects the data to be in this format:

const data = [
     ['1st column', '2nd column', '3rd column'],
     ['1st cell', '2nd cell', '3rd cell']
 ]

 render() {
 <ReactTabllist 
             data={data} 
             property={property} />
 }     

So I need to turn the JSON into an javascript array of arrays. What is a good way to do this?

const data = this.state.data.map(movie => ( /* what goes here? */ ));

Answer 1

As per I understand, you need to get every property in the JSON and then put the values of every element into the data -react property.

So, first you would need to make sure, the response from the database is well formatted, and that every element in the json-parsed responseText is the same as the rest of them.

With that into account:

const formattedData = this
    .state
    .data
    .map(movie => Object.keys(movie).map(key => movie[key]));

And that formattedData is what you want to pass as react-attribute of data={formattedData}

Alternatively, if you don't care about the keys of the movie whatsoever, you could do as @Madmadi has suggested:

const formattedData = this
    .state
    .data
    .map(movie => Object.values(movie));