Javascript 需要在json的基础上创建动态行和列

我有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' },
                }
            ]
        }
    ]
};

---

这是正确的吗？它似乎有一些问题。请提供对象的结构而不是值。在json中，row和columns标记可以多次出现？这是修复json吗？嗨，我更新了json