Qt Quick QML GridLayout с несколькими строками и столбцами с использованием JSON

Question

У меня есть ниже JSON, который я хочу отобразить внутри GridLayout.
Это JSON получено внутри файла QML и назначено свойству.

{
    {
        "id":1
        "name": "abc1"
        "age": 10
        "city": "xvy"
        "gender": "m/f"
    },
    {
        "id":2
        "name": "abc2"
        "age": 10
        "city": "xvy"
        "gender": "m/f"
    },
    {
        "id":2
        "name": "abc3"
        "age": 10
        "city": "xvy"
        "gender": "m/f"
    }
}

Я хочу отобразить это JSON в 5-Columns и 3-Rows GridLayout.
Как показано в таблице ниже:

+---------+--------------------+-----------------+-----------------+----------------+
|   Id    |  Name              |  Age            |    City         |    Gender      |
+---------+--------------------+-----------------+-----------------+----------------+
|    1    |    TextFiled       | TextFiled       | TextFiled       | ComboBox       |
+---------+--------------------+-----------------+-----------------+----------------+
|    2    |    TextFiled       | TextFiled       | TextFiled       | ComboBox       | 
+---------+--------------------+-----------------+-----------------+----------------+
|    3    |    TextFiled       | TextFiled       | TextFiled       | ComboBox       |
+---------+--------------------+-----------------+-----------------+----------------+

До сих пор я думал решения ниже:

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4

Window {
    width: 600; height: 400; visible: true

    GridLayout {
        id: grid
        anchors.fill: parent
        columns: 5
        rowSpacing: 2
        columnSpacing: 2
        anchors.margins: 5

        // example models
        property var id: [ 1, 2, 3, 4, 5 ]
        property var name: [ "value1", "value2", "value3", "value4", "value5" ]
        property var age: [ 10, 20, 30, 40, 50 ]
        property var city: [ "value1", "value2", "value3", "value4", "value5" ]
        property var gender: [ "m", "f", "m", "f", "m" ]

        Repeater {
            model: grid.id
            Label {
                Layout.row: index
                Layout.column: 0
                Layout.fillWidth: true
                Layout.fillHeight: true
                text: modelData
            }
        }

        Repeater {
            model: grid.name
            TextFiled {
                Layout.row: index
                Layout.column: 1
                Layout.fillWidth: true
                Layout.fillHeight: true
                text: modelData
            }
        }

        Repeater {
            model: grid.age
            TextFiled {
                Layout.row: index
                Layout.column: 2
                Layout.fillWidth: true
                Layout.fillHeight: true
                text: modelData
            }
        }


        // And rest of Repeater for next columns 
        // ....

    }
}

Это правильный подход?
Кроме того, я хочу сохранить обновленные значения из ComboBox и TextFiled из сетки в JSON, как я могу это сделать ?

Answer 1

Предположим, вы указали неверный JSON (я исправил). Я бы использовал следующее решение. То же решение может быть основано на Object.keys (), как уже упоминалось в @Amfasis, но в этом случае все свойства должны быть в одном порядке во всех объектах массива.

Component {
    id: tableHeader
    Text {
        text: modelData
        font.bold: true
    }
}

Component {
    id: tableCell
    Repeater {
        property var arr: modelData
        model: layout.cols.length
        delegate: Text {
            text: arr[layout.cols[index]]
        }
    }
}

GridLayout {
    id: layout
    columns: 5
    anchors.fill: parent
    anchors.margins: 10
    property var cols: ['id','name','age','city','gender']
    property var json: [
        {
            "id": 1,
            "name": "abc1",
            "age": 10,
            "city": "xvy",
            "gender": "m/f"
        },
        {
            "id": 2,
            "name": "abc2",
            "age": 20,
            "city": "xvy",
            "gender": "m/f"
        },
        {
            "id": 3,
            "name": "abc3",
            "age": 30,
            "city": "xvy",
            "gender": "m/f"
        }
    ]

    Repeater {
        model: layout.cols
        delegate: tableHeader
    }

    Repeater {
        model: layout.json
        delegate: tableCell
    }
}