menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

JSONForms

JSON Forms is a JSON Schema based approach for creating forms and comes with support for React, Angular and Vue. Support here is free, but might involve some delay in the replies based on our current workload for paying customers. We also offer PROFESSIONAL SUPPORT packages to get you started quickly with JSON Forms and to help you with any questions and technical difficulties for JSON Forms with guaranteed response time and in-depth technical solutions. For details please see our web page linked below.

Channels
Team

Looping through data by using map

March 8, 2021 at 3:52pm

Looping through data by using map

March 8, 2021 at 3:52pm (Edited 1 year ago)
I am looking into creating my own renderer for tables and treeview (material-ui/lab). There is right now one problem: I cannot build my own structure by looping through the data. Instead of looping, it says "data.baseProperties is undefined". But when debugging, the whole information of data.baseProperties is in fact available. Probably using the wrong export? Thanks!

March 8, 2021 at 3:53pm
const MyArrayTester = ({
data,
cells,
handleChange,
rootSchema,
uischema,
schema,
path
}: InputControlProps) => (
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell align="right">Type</TableCell>
<TableCell align="right">Description</TableCell>
<TableCell align="right">Example</TableCell>
</TableRow>
</TableHead>
<TableBody>
{cells.map((row, index) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.baseProperties}
</TableCell>
<TableCell
align="right"
onClick={(ev: any) => {//debugging
var all = "";
for(var prop in data) {
all+=prop + '\n';
}
alert(all);
alert(data.baseProperties);
}}
>
{row.name}</TableCell>
<TableCell align="right">{row.type}</TableCell>
<TableCell align="right">{row.description}</TableCell>
<TableCell align="right">{row.example}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
export const myArrayTester = rankWith(1000, scopeEndsWith('baseProperties'));
export default withJsonFormsLayoutProps(MyArrayTester);

March 9, 2021 at 10:38am
Hi (seprech), looks like you are using the wrong HOC. withJsonFormsLayoutProps doesn't provide data as there is no data to show for a layout renderer. You probably want to use withJsonFormsControlProps or withJsonFormsArrayControlProps.
Hi Stefan, thanks for the fast reply! cells.map is wrong, I've used that to get no error and have in fact access to the data when doing the onclick function. data has the property baseProperties which is a array so normaly it should work with data.baseProperties.map(... but somehow I get the a typerror "data is undefined". I've tried your recommendations but still ending in getting an error before even the loop gets started.
Found the solution: it is all about preventing an possible error therefore the map function needs to be called like data&& data.map(...

March 11, 2021 at 8:18am
Great that you found a solution!