Show JSON in TableView

Question

I am developing a generic editor for JSON Array using JavaFX.
The display in the table in such a way that the columns will be the keys, and the value in the rows will be more descriptive. There can be a different number of keys in one JSONObject.

JSON of the form:
"[{\"key1\": 1, \"key2\": 2}, {\"key1\": 3, \"key2\": 4}]"

It needs to look like this:

key1	key2
1	2
3	4

Have any suggestions?

user_2423906 · Answer

This can be broken down into two parts.

Use GSON to parse a JSON Array to an Array of POJOs.
Display a List of Objets in a TableView.

Key Code

//Add data to the TableView!
String jsonString = "[{\"keyOne\":\"1\", \"keyTwo\":\"2\"}, {\"keyOne\":\"3\", \"keyTwo\":\"4\"}]";
Gson gson = new Gson();
Data[] dataList = gson.fromJson(jsonString, Data[].class);
ObservableList observableList = FXCollections.observableArrayList(dataList);
tableView.setItems(observableList);

Main

import com.google.gson.Gson;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;
import javafx.scene.layout.StackPane;


public class App extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage){         
        TableView tableView = new TableView();

        TableColumn column1 = new TableColumn<>("Key One");
        column1.setCellValueFactory(new PropertyValueFactory<>("keyOne"));


        TableColumn column2 = new TableColumn<>("Key Two");
        column2.setCellValueFactory(new PropertyValueFactory<>("keyTwo"));


        tableView.getColumns().add(column1);
        tableView.getColumns().add(column2);

        //Add data to the TableView!
        String jsonString = "[{\"keyOne\":\"1\", \"keyTwo\":\"2\"}, {\"keyOne\":\"3\", \"keyTwo\":\"4\"}]";
        Gson gson = new Gson();
        Data[] dataList = gson.fromJson(jsonString, Data[].class);
        ObservableList observableList = FXCollections.observableArrayList(dataList);
        tableView.setItems(observableList);
    
        Scene scene = new Scene(new StackPane(tableView));

        stage.setTitle("JavaFX 13");
        stage.setScene(scene);
        stage.show();
    }
}

Data Class

/**
 *
 * @author sedj601
 */
public class Data {
    private String keyOne;
    private String keyTwo;
    

    public Data(String keyOne, String keyTwo) {
        this.keyOne = keyOne;
        this.keyTwo = keyTwo;
    }

    public String getKeyOne() {
        return keyOne;
    }

    public void setKeyOne(String keyOne) {
        this.keyOne = keyOne;
    }

    public String getKeyTwo() {
        return keyTwo;
    }

    public void setKeyTwo(String keyTwo) {
        this.keyTwo = keyTwo;
    }

    @Override
    public String toString() {
        StringBuilder sb = new StringBuilder();
        sb.append("Data{keyOne=").append(keyOne);
        sb.append(", keyTwo=").append(keyTwo);
        sb.append('}');
        return sb.toString();
    }    
}

module-info.java

module com.mycompany.javafx_test_2 {
    requires javafx.controls;
    exports com.mycompany.javafx_test_2;
    
    opens com.mycompany.javafx_test_2 to com.google.gson;
    requires com.google.gson;
    
}

Using GSON version 2.8.9.

Output

Show JSON in TableView

1 Answers