Нужно сделать динамические строки и столбцы на основе JSON в угловых

Question

У меня есть JSON, из которого мне нужно сделать строку и столбцы.Сетка может быть любого типа на основе JSON.2 * 4 (2 строки 4 столбца), 3 * 5 (3 строки и 5 столбцов). Я просто хочу знать, как перебирать эти строки и столбцы.изначально строки, затем строки могут иметь столбцы, и эти вложенные столбцы также могут иметь строки далее

This is the updated JSON
grid_template = {
    type: 'grid',
    rows: [
        {
            columns: [
                {
                    identifier: 'c1',
                    hasRows: false,
                    cashBack: {
                        text: '', image: '', height: '', width: '',
                        '2X': { width: '200px', height: '400px' },
                        '3X': { width: '300px', height: '600px' },
                    },
                    title: {
                        text: '', image: '', height: '', width: '',
                        '2X': { width: '200px', height: '400px' },
                        '3X': { width: '300px', height: '600px' },
                    },
                    images: { leafBannerId: '', listPageBannerId: '', overlayImage: '' },
                    width: '50%',
                    height: '20%',
                    '2X': { width: '200px', height: '400px' },
                    '3X': { width: '300px', height: '600px' },
                },
                {
                    hasRows: true,
                    rows: [
                        {
                            identifier: 'c2',
                            hasColumns: false,
                            cashBack: {
                                text: '', image: '', height: '', width: '',
                                '2X': { width: '200px', height: '400px' },
                                '3X': { width: '300px', height: '600px' },
                            },
                            title: {
                                text: '', image: '', height: '', width: '',
                                '2X': { width: '200px', height: '400px' },
                                '3X': { width: '300px', height: '600px' },
                            },
                            images: { leafBannerId: '', listPageBannerId: '', overlayImage: '' },
                            width: '50%',
                            height: '10%',
                            '2X': { width: '200px', height: '400px' },
                            '3X': { width: '300px', height: '600px' },
                        },
                        {
                            hasColumns: true, columns: [
                                {
                                    identifier: 'c3',
                                    cashBack: {
                                        text: '', image: '', height: '', width: '',
                                        '2X': { width: '200px', height: '400px' },
                                        '3X': { width: '300px', height: '600px' },
                                    },
                                    title: {
                                        text: '', image: '', height: '', width: '',
                                        '2X': { width: '200px', height: '400px' },
                                        '3X': { width: '300px', height: '600px' },
                                    },
                                    images: { leafBannerId: '', listPageBannerId: '', overlayImage: '' },
                                    width: '25%',
                                    height: '10%',
                                    '2X': { width: '200px', height: '400px' },
                                    '3X': { width: '300px', height: '600px' },
                                },
                                {
                                    identifier: 'c4',
                                    cashBack: {
                                        text: '', image: '', height: '', width: '',
                                        '2X': { width: '200px', height: '400px' },
                                        '3X': { width: '300px', height: '600px' },
                                    },
                                    title: {
                                        text: '', image: '', height: '', width: '',
                                        '2X': { width: '200px', height: '400px' },
                                        '3X': { width: '300px', height: '600px' },
                                    },
                                    images: { leafBannerId: '', listPageBannerId: '', overlayImage: '' },
                                    width: '25%',
                                    height: '10%',
                                    '2X': { width: '200px', height: '400px' },
                                    '3X': { width: '300px', height: '600px' },
                                } ]
                        }
                    ]
                }
            ]
        },
        {
            columns: [
                {
                    identifier: 'c5',
                    cashBack: { text: '', image: '', height: '', width: '' },
                    title: {
                        text: '', image: '', height: '', width: '',
                        '2X': { width: '200px', height: '400px' },
                        '3X': { width: '300px', height: '600px' },
                    },
                    images: {
                        leafBannerId: '', listPageBannerId: '', overlayImage: '',
                        '2X': { width: '200px', height: '400px' },
                        '3X': { width: '300px', height: '600px' },
                    },
                    height: '15%',
                    width: '33%',
                    '2X': { width: '200px', height: '400px' },
                    '3X': { width: '300px', height: '600px' },
                },
                {
                    identifier: 'c6',
                    cashBack: {
                        text: '', image: '', height: '', width: '',
                        '2X': { width: '200px', height: '400px' },
                        '3X': { width: '300px', height: '600px' },
                    },
                    title: {
                        text: '', image: '', height: '', width: '',
                        '2X': { width: '200px', height: '400px' },
                        '3X': { width: '300px', height: '600px' },
                    },
                    images: { leafBannerId: '', listPageBannerId: '', overlayImage: '' },
                    height: '15%',
                    width: '33%',
                    '2X': { width: '200px', height: '400px' },
                    '3X': { width: '300px', height: '600px' },
                },
                {
                    identifier: 'c6',
                    cashBack: {
                        text: '', image: '', height: '', width: '',
                        '2X': { width: '200px', height: '400px' },
                        '3X': { width: '300px', height: '600px' },
                    },
                    title: {
                        text: '', image: '', height: '', width: '',
                        '2X': { width: '200px', height: '400px' },
                        '3X': { width: '300px', height: '600px' },
                    },
                    images: { leafBannerId: '', listPageBannerId: '', overlayImage: '' },
                    height: '15%',
                    width: '33%',
                    '2X': { width: '200px', height: '400px' },
                    '3X': { width: '300px', height: '600px' },
                }
            ]
        },
        {
            columns: [
                {
                    identifier: 'c7',
                    cashBack: {
                        text: '', image: '', height: '', width: '',
                        '2X': { width: '200px', height: '400px' },
                        '3X': { width: '300px', height: '600px' },
                    },
                    title: {
                        text: '', image: '', height: '', width: '',
                        '2X': { width: '200px', height: '400px' },
                        '3X': { width: '300px', height: '600px' },
                    },
                    images: { leafBannerId: '', listPageBannerId: '', overlayImage: '' },
                    view_all: '',
                    height: '10%',
                    width: '100%',
                    '2X': { width: '200px', height: '400px' },
                    '3X': { width: '300px', height: '600px' },
                }
            ]
        }
    ]
};