Expression to get value from nested objects

Question

I am struggling to write a style expression in Mapbox/Maplibre GL JS to set a circle-radius based on a value in my geojson. I have many features, whose properties look something like this:

"properties": {
  "name": "Site A",
  "type": "Bucket Trap",
  "data": [
    {
      "date": "2019-08-26",
      "catch": 21,
    },
    {
      "date: "2019-08-27",
      "catch": 15
    }
}

Upon the user selecting a date from a form control, I want to set the circle-radius to equal the catch value for that particular date.

I thought maybe I could use index-of to find the object with the requested date, then get the catch value from that object.

I’ve tried the following:

let selectedDate = '2019-08-26';
map.setPaintProperty(
  'traps',
  'circle-radius',
  [
    'get',
    'catch',
    [
      'at',
      [
        'index-of',
        selectedDate,
        [
          'get',
          'date',
          [
            'get',
            'avgdata'
          ]
        ]
      ],
      [
        'get',
        'avgdata'
      ]
    ]
  ]
);

and receive this error on the console:

Expected value to be of type object, but found array<object, 26> instead.

If it’s easier for you to read the expression on one line, here’s what I’ve been trying:

['get', 'catch', ['at', ['index-of', selectedDate, ['get', 'date', ['get', 'avgdata']]], ['get', 'avgdata']]]

Thanks in advance for any suggestions!

Answer 1

Nested objects can be done by nesting the expression and using the 'properties' object:-

{
  "description" : {"title" : "foo"}
}

['get', 'title', ['get','description', ['properties']]]

Answer 2

I'm not sure if it's possible to write the expression you want with your GeoJSON structured the way it is. But since you control the GeoJSON you can simply restructure it first, so it looks like this:

{
  "properties": {
    "name": "Site A",
    "type": "Bucket Trap",
    "2019-08-26": 21,
    "2019-08-27": 15
  }
}

Now you can access the catch count for a given date like this:

map.setPaintProperty('traps', 'circle-radius', ['get', selectedDate]);