Estoy tratando de transformar los datos a continuación de:
{ title: 'The Promise', blurb: 'Lorem Ipsum', cover_image: 'Lorem Ipsum', pub_year: 2002, genre: 'Foobar' }A:
[ { col1: 'The Promise', col2: 'Lorem Ipsum', col3: 'Lorem Ipsum', col4: 2002 col5: 'Foobar' }, ]He estado desconcertando esto durante bastante tiempo y solo puedo hacer que se vea así, que son solo objetos separados en lugar de un solo objeto como parte de una matriz de objetos (hay otros objetos de libros en el JSON devuelto de mi db la función debe funcionar)
{col1: 1} //this is an id {col2: 'The Promise'} {col3: 'Lorem ipsum'} {col4: Lorem Ipsum} {col5: '2002'} {col6: Foobar}Aquí está el código en el que he estado trabajando:
const data = React.useMemo( () => props.tableData.map((object, i) => { Object.values(object).map((value, i) => { let col = `col${i + 1}` const obj = { [col]: value } }) }), [props.tableData] )Al mapear los valores, en lugar de construir un objeto que contenga una sola propiedad, devuelva un par de entradas (una matriz donde el primer valor es la propiedad y el segundo valor es el valor asociado) para que pueda convertir la matriz de entradas en un objeto con Object.fromEntries .
const data = React.useMemo( () => props.tableData.map((object) => ( Object.fromEntries( Object.values(object).map((value, i) => [`col${i + 1}`, value]) ) )), [props.tableData] ); Esto depende de las propiedades de los objetos de entrada que se ordenen. Si bien esto suele ser confiable, no es bueno confiar en él y no funcionará si alguna de las propiedades se vuelve numérica (por ejemplo, 1 o 5 ). Considere si las propiedades del objeto de entrada podrían formatearse como una matriz (ordenada) en su lugar.
Solo necesitaba un pequeño ajuste. En lugar de usar map , que devuelve una nueva matriz de elementos mapeados, use una función de reducer para crear un nuevo objeto singular.
const data = { title: 'The Promise', blurb: 'Lorem Ipsum', cover_image: 'Lorem Ipsum', pub_year: 2002, genre: 'Foobar' } function transformIntoColumns(dataToTransform) { return Object.keys(dataToTransform).reduce((transformed, prop, index) => { transformed[`col${index + 1}`] = dataToTransform[prop]; return transformed; }, {}); } console.log(transformIntoColumns(data));Otra forma de lograr esto es usar un forEach simple, y la ventaja es que tendría una iteración en lugar de dos. Como esto:
const data = { title: "The Promise", blurb: "Lorem Ipsum", cover_image: "Lorem Ipsum", pub_year: 2002, genre: "Foobar" }; const formatData = () => { let result = {}; Object.values(data).forEach((v, i) => { result["column" + Number(i + 1)] = v; }); return result; }; console.log(formatData());Para adaptarse a su caso de uso:
const data = React.useMemo(() => { let result = {}; Object.values(props.tableData).forEach((v, i) => { result["column" + Number(i + 1)] = v; }); return result; }, [props.tableData]);