[FIXED] Filling a Tableview with some data from JSON

Issue

I have a TableView in JavaFX that I want to fill with some JSON data.

The JSON that I receive from the server looks like this:

{"mirelradoi":10,"test":6, "bob":3}

But I'm having a hard time understanding how to use this TableView. I created the TableView in SceneBuilder already (with its coresponding columns) so in my code I'm not initializing it anymore. (I don't think I still need it - I might be wrong, I'm a complete beginner :) )

And here's the way I'm adding that JSON in the tableview:

            tabelClasament.setItems(FXCollections.observableArrayList(receivedJSON.get("clasament")));

Where tableClasament is the TableView I'm talking about, and receivedJSON.get("clasament") gets me the data that I've shown above.

But for some reason, I get this:

so I don't get "No content in the table" like not having data, but it doesn't show either.

How can I import that JSON into this table? The only thing in my code about the table is that line and the definition of tableClasament as TableView.

Thanks.

Solution

When adding data to a TableView, you must also specify how each column should display the given data (ie: the TableView won't magically know which column corresponds to each field or property in your JSON data).

It is recommended to create a data model class to represent the data in your JSON, then load the JSON and populate a list of that new data model class.

Here is a short example of how to populate your TableView with data from any source (by utilizing the ClasamentDisp class, which holds the data from your JSON source).

import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class JsonToTableView extends Application {

    public static void main(String[] args) {

        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        // **********************************************************************************************
        // Create a basic layout
        // **********************************************************************************************
        VBox root = new VBox(5);
        root.setAlignment(Pos.TOP_CENTER);
        root.setPadding(new Insets(10));

        // **********************************************************************************************
        // Create the TableView
        // **********************************************************************************************
        final TableView<ClasamentDisp> tableView = new TableView<>();

        // **********************************************************************************************
        // Create the columns for the TableView (TableColumn cannot handle Integer for some reason, so we
        // set the data type to Number for the Score column)
        // **********************************************************************************************
        final TableColumn<ClasamentDisp, String> colParticipant = new TableColumn<>("Participant");
        final TableColumn<ClasamentDisp, Number> colScore = new TableColumn<>("Score");

        // **********************************************************************************************
        // Add the columns to the TableView (skip if defined in FXML)
        // **********************************************************************************************
        tableView.getColumns().addAll(colParticipant, colScore);

        // **********************************************************************************************
        // In order for the columns to display the properties in our ClasamentDisp objects, we need to
        // define the CellPropertyFactory for each column
        // **********************************************************************************************
        colParticipant.setCellValueFactory(c -> c.getValue().participantPropertyProperty());
        colScore.setCellValueFactory(c -> c.getValue().scorePropertyProperty());

        // **********************************************************************************************
        // Create a list to hold our Clasaments, as loaded from data source (ie: JSON)
        // **********************************************************************************************
        ObservableList<ClasamentDisp> clasaments = FXCollections.observableArrayList();
        clasaments.addAll(new ClasamentDisp("mirelradoi", 10),
                          new ClasamentDisp("test", 6),
                          new ClasamentDisp("bob", 3));

        // **********************************************************************************************
        // Set the items of the TableView to our list of loaded data
        // **********************************************************************************************
        tableView.setItems(clasaments);

        // **********************************************************************************************
        // Finally, here we add the TableView to the Scene (can be skipped if injected via FXML)
        // **********************************************************************************************
        root.getChildren().add(tableView);

        // **********************************************************************************************
        // Set the Scene for the stage
        // **********************************************************************************************
        primaryStage.setScene(new Scene(root));

        // **********************************************************************************************
        // Configure the Stage
        // **********************************************************************************************
        primaryStage.setTitle("Test Application");
        primaryStage.show();
    }
}

class ClasamentDisp {

    // **********************************************************************************************
    // Create Properties to hold the values of each item
    // **********************************************************************************************
    private final StringProperty participantProperty = new SimpleStringProperty();
    private final IntegerProperty scoreProperty = new SimpleIntegerProperty();

    public ClasamentDisp(String participant, int score) {

        this.participantProperty.setValue(participant);
        this.scoreProperty.setValue(score);
    }

    public String getParticipantProperty() {

        return participantProperty.get();
    }

    public void setParticipantProperty(String participantProperty) {

        this.participantProperty.set(participantProperty);
    }

    public StringProperty participantPropertyProperty() {

        return participantProperty;
    }

    public int getScoreProperty() {

        return scoreProperty.get();
    }

    public void setScoreProperty(int scoreProperty) {

        this.scoreProperty.set(scoreProperty);
    }

    public IntegerProperty scorePropertyProperty() {

        return scoreProperty;
    }
}

Answered By - Zephyr
Answer Checked By - Mildred Charles (JavaFixing Admin)