filling an array in typescript/react with objects converted from JSON array

Question

I have a JSON-File with about 700 lines filled with devices and some information about them (i.e. serial number,macadress, port ...).

In another file I have created an object like

type jsonObj = {
serialNumber: string;
macAdress: string;
port: string;
}

And now I want to populate a table with this jsonDevice objects in a loop but somehow I dont get it to work.

My code looks like that:

const ObjectTable: FC = () => {
  const entities: jsonObj[] = [
    {
      serNom: jsonDevices[0].serNom,  //jsonDevices is my json file
      macAdr: jsonDevices[0].macAdr,
      tunPort: jsonDevices[0].tunPort
    },
  ];

FC is an import from react and with the code above it is working. Im receiving a table-output with the data for this line (e.g jsonDevices[0].serNom gives me correctly 123456789) but now I want to automatically fill the whole list/array with all the remaining lines from the json devices. In Java I would have solved it with a loop like that:

for (int i = 0, i<jsonObj.length, i++){
    ObjectTable.add(jsonObj[i].serNom);
    ObjectTable.add(jsonObj[i].macAdr);
    ObjectTable.add(jsonObj[i].tunPort);
    }

Please help me. I getting headache from this issue.

Try `entities = jsonDevices.map(({ serNom, macAdr, tunPort }) => ({ serNom, macAdr, tunPort }))` — iz_, Feb 20 '22 at 13:38

Maifee Ul Asad · Answer 1 · 2022-02-20T13:53:33.237

Let's assume you have some data like this:

[
    { id: 1, name: "test-1" },
    { id: 2, name: "test-random" },
    { id: 3, desc: "444" }
]

And you have some structure of this data, create an interface

interface SomeInterface {
  id: number;
  name?: string;
  desc?: string;
}

Now it's simple if that JSON input data is referred to as someData and resultant data are referred as hmm, you can some something like this:

const hmm: SomeInterface[] = [];
someData.map((data) => {
      hmm.push(data as SomeInterface);
});

You can also simplify by:

hmm: SomeInterface[] = someData as SomeInterface[];

Here is a codesandbox, feel free to play with it: https://codesandbox.io/s/dreamy-chatelet-hr5ub6?file=/src/App.tsx:343-456

And here are two sof threads both on same question though, discussing why interface over types:

score 0 · Accepted Answer · answered Feb 20 '22 at 13:39

Note: Your code will not compile because you've declared the jsonObj type to have this shape:

type jsonObj = {
  serialNumber: string;
  macAdress: string;
  port: string;
}

But then you're attempting to create an array of jsonObj objects that use different key names:

{
  serNom: jsonDevices[0].serNom,  //jsonDevices is my json file
  macAdr: jsonDevices[0].macAdr,
  tunPort: jsonDevices[0].tunPort
}

With that aside, the solution to your problem is much simpler than it seems: Array.prototype.map:

const entities: jsonObj[] = jsonDevices.map((device) => {
  return {
    serialNumber: device.serNom,
    macAddress: device.macAdr,
    port: device.tunPort,
  };
});

Another note: These abbreviated variable names are difficult to read. I recommend picking one convention and sticking with it. If your JSON file were to follow the naming convention of jsonObj, then you wouldn't even need to map the JSON to a different shape—you would just do this:

const entities = jsonDevices as jsonObj[];

(This is known as a type assertion—using the as keyword followed by a type to assure the TypeScript compiler that the left-hand value is of the specified type.)

Omg! thank you so much sir!! I never thought that it would be so easy! I totally need some more reading matter! And ofc, you are right, I have the same key names, but somehow I missspelled it here, sorry! And thank's for the extra advice regarding the conventions. Appreciated! — SillyPhilly, Feb 20 '22 at 13:45

filling an array in typescript/react with objects converted from JSON array

2 Answers2