0
226
VistasHacer una tabla en reaccionar js sin valores clave adecuados en datos json
Obtengo datos de una API y no tiene los valores clave ni los encabezados adecuados para usar react-table . No estoy seguro de cómo generar una tabla con los datos.
{ "result": { "DB04571": { "CC1=CC2": -4.204354763031006 }, "DB00855": { "NCC(=O)": -3.666783332824707 }, "DB09536": { "O=[Ti]": -3.1173958778381348 } }} Lo anterior es una muestra de los datos de 1000 entradas. A continuación se muestra la imagen de cómo esperaba que fuera la mesa. Como no tengo los encabezados para la salida json, no pude almacenarlos como una tabla ya que el valor sigue cambiando. al usar react-table debería tener que mencionar los encabezados, pero no puedo extraer los datos ya que el nombre del medicamento sigue cambiando en los datos y no hay ninguna clave adjunta.
2 Respuestas
Responde la pregunta0
Para renderizar con react-table debe convertir su objeto en una matriz de objetos:
const normalizeData = (data) => Object.keys(data).map((key) => ({ drug: key, molecule: Object.keys(data[key]), prediction: Object.values(data[key]) }));La función de normalización devuelve una matriz de objetos que se pueden representar con la tabla de reacción:
[{"drug":"DB04571","molecule":["CC1=CC2"],"prediction":[-4.204354763031006]}, ...]El componente de reacción:
const MyPage = () => { const columns = [{ accessor: "drug" }, { accessor: "molecule" },{ accessor: "prediction" }]; const data = { result: { DB04571: { "CC1=CC2": -4.204354763031006 }, DB00855: { "NCC(=O)": -3.666783332824707 }, DB09536: { "O=[Ti]": -3.1173958778381348 } } }; const normalizeData = (data) => Object.keys(data).map((key) => ({ drug: key, molecule: Object.keys(data[key]), prediction: Object.values(data[key]) })); return <Table columns={columns} data={normalizeData(data.result)} /> }Aquí un ejemplo en vivo:
0
Con nombres de variables explícitos:
Object.keys(data.result).map(( drug ) => { const drugData = data.result[ drug ]; const molecule = Object.keys(drugData)[ 0 ]; const prediction = drugData[ molecule ]; /* More code */ });