Home > other >  Show JSON in TableView
Show JSON in TableView

Time:12-11

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?

CodePudding user response:

This can be broken down into two parts.

  1. Use GSON to parse a JSON Array to a POJO.
  2. 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<Data> 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<Data> tableView = new TableView();

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


        TableColumn<Data, String> 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<Data> 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();
    }    
}

Output

enter image description here

  • Related