Angular PDF-Crear tabla dinámica con JSON anidado.
He utilizado un código que encontré aquí https://stackoverflow.com/questions/26658535/building-table-dynamically-with-pdfmake y funciona perfectamente bien con datos dinámicos provenientes de una API. Pero mi problema es JSON anidado.
Así es como se ve el JSON:
dataseries:"[
{
"timepoint":3,
"cloudcover":2,
"seeing":6,
"transparency":2,
"lifted_index":10,
"rh2m":2,
"wind10m":{
"direction":"N",
"speed":2
},
"temp2m":23,
"prec_type":"none"
},
{
"timepoint":6,
"cloudcover":2,
"seeing":6,
"transparency":2,
"lifted_index":15,
"rh2m":3,
"wind10m":{
"direction":"N",
"speed":2
},
"temp2m":21,
"prec_type":"none"
},
Estoy tratando de generar el contenido de wind10m específicamente la dirección y la velocidad en el archivo PDF. ¿Cómo puedo acceder y generar dos columnas diferentes de dirección y velocidad?
Este es mi demo de Stackblitz: https://stackblitz.com/edit/angular-ojgxtj?file=src%2Fapp%2Fapp.component.ts
davy.ai
Para acceder a los campos de dirección y velocidad del objeto wind10m en los datos JSON, se puede usar la notación de punto para acceder a los campos anidados. En su código, puede acceder a los campos de dirección y velocidad de la siguiente manera:
en este código, primero accede al objeto wind10m para cada serie de datos utilizando
data.dataseries[i].wind10m. luego puede acceder a sus campos usando la notación de punto (wind.directionywind.speed). finalmente, puede agregar los valores de dirección y velocidad a la fila, y agregar la fila a los datos de la tabla.puede actualizar la función
generatepdf()en su código con este fragmento de código para generar dos columnas diferentes de dirección y velocidad. i++)=”” {=”” const=”” row=”[];” acceder=”” al=”” objeto=”” wind10m=”” y=”” sus=”” campos=”” const=”” wind=”data.dataseries[i].wind10m;” const=”” direction=”wind.direction;” const=”” speed=”wind.speed;” agregar=”” la=”” dirección=”” y=”” velocidad=”” a=”” la=”” fila=”” row.push(direction);=”” row.push(speed);=”” agregar=”” la=”” fila=”” a=”” los=”” datos=”” de=”” la=”” tabla=”” tabledata.push(row);=”” }=”” “`=”” en=”” este=”” código,=”” primero=”” accede=”” al=”” objeto=”” wind10m=”” para=”” cada=”” serie=”” de=”” datos=”” utilizando=””data.dataseries[i].wind10m.=”” luego=”” puede=”” acceder=”” a=”” sus=”” campos=”” usando=”” la=”” notación=”” de=”” punto=”” (wind.direction=”” y=””wind.speed).=”” finalmente,=”” puede=”” agregar=”” los=”” valores=”” de=”” dirección=”” y=”” velocidad=”” a=”” la=”” fila,=”” y=”” agregar=”” la=”” fila=”” a=”” los=”” datos=”” de=”” la=”” tabla.=”” puede=”” actualizar=”” la=”” función=””generatepdf()=”” en=”” su=”” código=”” con=”” este=”” fragmento=”” de=”” código=”” para=”” generar=”” dos=”” columnas=”” diferentes=”” de=”” dirección=”” y=””></data.dataseries.length; i++) {const row = [];
// acceder al objeto wind10m y sus campos
const wind = data.dataseries[i].wind10m;
const direction = wind.direction;
const speed = wind.speed;
// agregar la dirección y velocidad a la fila
row.push(direction);
row.push(speed);
// agregar la fila a los datos de la tabla
tabledata.push(row);
}
“`
en este código, primero accede al objeto wind10m para cada serie de datos utilizando
data.dataseries[i].wind10m. luego puede acceder a sus campos usando la notación de punto (wind.directionywind.speed). finalmente, puede agregar los valores de dirección y velocidad a la fila, y agregar la fila a los datos de la tabla.puede actualizar la función
generatepdf()en su código con este fragmento de código para generar dos columnas diferentes de dirección y velocidad.>