Tengo un archivo JSON con alrededor de 700 líneas llenas de dispositivos y alguna información sobre ellos (es decir, número de serie, Macadress, puerto...).
En otro archivo he creado un objeto como
type jsonObj = { serialNumber: string; macAdress: string; port: string; }Y ahora quiero llenar una tabla con estos objetos jsonDevice en un bucle, pero de alguna manera no consigo que funcione.
Mi código se ve así:
const ObjectTable: FC = () => { const entities: jsonObj[] = [ { serNom: jsonDevices[0].serNom, //jsonDevices is my json file macAdr: jsonDevices[0].macAdr, tunPort: jsonDevices[0].tunPort }, ];FC es una importación de reaccionar y con el código anterior está funcionando. Recibo una salida de tabla con los datos para esta línea (por ejemplo, jsonDevices[0].serNom me da correctamente 123456789) pero ahora quiero llenar automáticamente toda la lista/matriz con todas las líneas restantes de los dispositivos json. En Java lo habría resuelto con un bucle como ese:
for (int i = 0, i<jsonObj.length, i++){ ObjectTable.add(jsonObj[i].serNom); ObjectTable.add(jsonObj[i].macAdr); ObjectTable.add(jsonObj[i].tunPort); }Por favor, ayúdame. Tengo dolor de cabeza por este problema.
Supongamos que tiene algunos datos como este:
[ { id: 1, name: "test-1" }, { id: 2, name: "test-random" }, { id: 3, desc: "444" } ] Y tienes alguna estructura de estos datos, crea una interface
interface SomeInterface { id: number; name?: string; desc?: string; } Ahora es simple si los datos de entrada JSON se denominan someData y los datos resultantes se denominan hmm , puede hacer algo como esto:
const hmm: SomeInterface[] = []; someData.map((data) => { hmm.push(data as SomeInterface); });También puedes simplificar por:
hmm: SomeInterface[] = someData as SomeInterface[];Aquí hay un codesandbox, siéntete libre de jugar con él: https://codesandbox.io/s/dreamy-chatelet-hr5ub6?file=/src/App.tsx:343-456
Y aquí hay dos subprocesos suaves, ambos en la misma pregunta, discutiendo por qué la interfaz sobre los tipos :
Nota: Su código no se compilará porque ha declarado que el tipo jsonObj tiene esta forma:
type jsonObj = { serialNumber: string; macAdress: string; port: string; } Pero luego está intentando crear una matriz de objetos jsonObj que usan diferentes nombres de clave:
{ serNom: jsonDevices[0].serNom, //jsonDevices is my json file macAdr: jsonDevices[0].macAdr, tunPort: jsonDevices[0].tunPort } Aparte de eso, la solución a su problema es mucho más simple de lo que parece: Array.prototype.map :
const entities: jsonObj[] = jsonDevices.map((device) => { return { serialNumber: device.serNom, macAddress: device.macAdr, port: device.tunPort, }; }); Otra nota: estos nombres de variables abreviados son difíciles de leer. Recomiendo elegir una convención y apegarse a ella. Si su archivo JSON siguiera la convención de nomenclatura de jsonObj , entonces ni siquiera necesitaría asignar el JSON a una forma diferente; simplemente haría esto:
const entities = jsonDevices as jsonObj[]; (Esto se conoce como aserción de tipo : se usa la palabra clave as seguida de un tipo para asegurar al compilador de TypeScript que el valor de la izquierda es del tipo especificado).