I’m encountering an issue with displaying data from a JSONField in a vector tile (MVT) in Django.

The value of the data in the test_json_field column is as follows:

{
  "look": "1",
  "at": 2,
  "some": "asdfjkl;",
  "JSON": [
    {
      "data": 1234,
      "arranged": "(and how!)"
    },
    "as an example"
  ]
}

In my code, I’ve defined the tile_fields as:

tile_fields = ("start_time", "end_time", "test_json_field")

However, when I render the view, I only see the following fields in the JSON response:

`{
  "start_time": "2024-12-12 08:00:00+00",
  "end_time": "2024-12-12 08:15:00+00",
  "at": 2,
  "look": "1",
  "some": "asdfjkl;",
  "layer": "trajectory"
}
`

But the other values in the test_json_field column (such as the JSON array) are not displayed.

Here’s my code:
The TrajectoryTileView class:

`class TrajectoryTileView(VectorLayer):
    """
    A view to represent trajectory data as a vector tile layer.
    """
    model = Trajectory
    id = "trajectory"
    tile_fields = ("start_time", "end_time", "test_json_field")
    geom_field = "geom"

    def get_queryset(self):
        device_id = getattr(self, "device_id", None)
        queryset = Trajectory.objects.all()
        if device_id:
            queryset = queryset.filter(device__uid=device_id)
        return queryset`

The TrajectoryMVTView class:

`class TrajectoryMVTView(MVTView):
    """
    MVTView handles one or more vector layers defined in the layer_classes attribute.
    """
    layer_classes = [TrajectoryTileView]

    def get(self, request, *args, **kwargs):
        device_id = kwargs.get("device_id")
        for layer_class in self.layer_classes:
            layer_class.device_id = device_id
        try:
            response = super().get(request, *args, **kwargs)
        except Exception as e:
            print(f"An error occurred: {e}")
            raise
        return response`

The Trajectory model:

`class Trajectory(models.Model):
    uid = models.UUIDField(primary_key=True, editable=False, default=uuid.uuid4)
    device = models.ForeignKey(Device, on_delete=models.CASCADE, related_name='trajectories')
    geom = models.LineStringField(srid=3857)  # Line representing the trajectory
    device_data = models.JSONField(blank=True, null=True)  # List of attributes associated with each point
    start_time = models.DateTimeField(auto_now_add=True)  # Start time of the trajectory
    end_time = models.DateTimeField(null=True, blank=True)  # End time of the trajectory
    test_json_field = models.JSONField(null=True)
`

Question:
Why are the other values in the test_json_field (such as the JSON array) not displayed in the response? Is there an issue with how I’ve configured the tile_fields or handled the JSONField in the view?

Thank you for your help!

I have already implemented serialization

class TrajectoryPropertiesSerializer(serializers.ModelSerializer):
    device_data = serializers.JSONField(read_only=True, allow_null=True)
    class Meta:
        model = Trajectory
        fields = ['device_data', 'device', "geom", "start_time", "end_time","test_json_field"]

This is the retrieval of a feature in the front-end (Angular):

this.map.on('click', (e) => {
    const clickedFeature = this.map.forEachFeatureAtPixel(e.pixel, (feature) => {
      return feature;
    });

    if (clickedFeature) {
      const feature = clickedFeature as Feature; 
      console.log("FEATURE VALUES ==>>>>>>  ", feature);
    }
});