Exploring nested objects within GEOJSON using Mapbox

Trying to access data from a large geojson file being read in through mapbox tile server. I can retrieve data up to the "statistics" level, but struggle accessing objects beyond that point. How do I go about this?

 map.on('click', 'area-polygon', (e) => {
        console.log(e.features[0].properties.statistics);
  });

The current output of console.log() is as follows;

{"runs":
    {"byActivity":
        {"downhill":
            {"byDifficulty":
                {"easy":
                    {"count":17,
                    "lengthInKm":14.4112,
                    "minElevation":1553.6,
                    "maxElevation":1999.59,
                    "combinedElevationChange":1996.04},
                "advanced":
                    {"count":4,
                    "lengthInKm":2.33805,
                    "minElevation":1645.08,
                    "maxElevation":1936.27,
                    "combinedElevationChange":628.717},
                "intermediate":
                    {"count":11,
                    "lengthInKm":8.24159,
                    "minElevation":1553.6,
                    "maxElevation":2000.42,
                    "combinedElevationChange":1542.16},
                "other":
                    {"count":5,
                    "lengthInKm":2.42858,
                    "minElevation":1595.16,
                    "maxElevation":2005.37,
                    "combinedElevationChange":208.312}
                }
            }
        },
        "minElevation":1553.6,
        "maxElevation":2005.37  
    },
    "lifts":
        {"byType":
            {"chair_lift":
                {"count":3,
                "lengthInKm":3.82236,
                "minElevation":1553.6,
                "maxElevation":1998.59,
                "combinedElevationChange":863.786
                },
            "magic_carpet":
                {"count":1,
                "lengthInKm":0.962681,
                "minElevation":1580.79,
                "maxElevation":1742.16,
                "combinedElevationChange":161.378},
            "gondola":
                {"count":1,
                "lengthInKm":2.07562,
                "minElevation":1580.44,
                "maxElevation":1998.42,
                "combinedElevationChange":417.985}
            },
            "minElevation":1553.6,
            "maxElevation":1998.59
        },
    "maxElevation":1998.59,
    "minElevation":1553.6
}

How can I access the count under easy under byDifficulty etc? The attempted code below doesn't work:

e.features[0].properties.statistics.runs.byActivity.downhill.byDifficulty.easy.count

Answer №1

It seems there is a peculiar inconsistency - assuming your initial log output is accurate, the second snippet of code should function properly.

Typically, Mapbox GL JS transforms nested objects within GeoJSON into string representations.

Therefore, you may need to execute something along these lines:

JSON.parse(e.features[0].properties.statistics).runs.byActivity.downhill.byDifficulty.easy.count

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilize d3.js to selectively filter through a nested array of objects based on specific object

I have collected a dataset of meteorite landings and organized the data into four keys based on type: var dataByType = d3.nest() .key(function(d) { return d.rectype; }) .entries(dataset); // original dataset You can see the result ...

The counter variable does not function properly within a setInterval function

I have encountered an issue with my scroll-counter variable inside the setInterval function. It increments by 1 each time the setInterval function runs, which is supposed to happen 20 times before stopping. However, I noticed that the value of this variabl ...

Unusual behavior observed when routing onScroll in Next.js, with rendering occurring exclusively on the server side

In my attempt to leverage Next.js imperative routing api within a scroll handler for page navigation, I encountered an almost perfect solution by attaching it to the window. However, there is a slight color 'flash' as the scroll position resets w ...

Minifying HTML, CSS, and JS files

Are there any tools or suites that can minify HTML, JavaScript, and CSS all at once? Ideally, these tools should be able to: Identify links from the HTML document and minify the associated JavaScript and CSS. Remove any unused JavaScript functions and CS ...

The input values passed to "onChange" are not compatible with "NativeSyntheticEvent<TextInputChangeEventData>"

I'm fairly new to React Native and encountered an issue while trying to implement the following code snippet: <TextInput style={styles.input} onChange={(text) => setPontoValue(text)} /> This error message ...

Error Handling in ASP.NET Entity Framework Core JsonResult

I am in the process of developing an application using ASP.Net Core 1.0 and EF Core. I have established my models and view model with the help of AutoMapper. However, upon creating a controller and invoking it, I encounter the following error: Error Nu ...

Modifying the Readonly Attribute of an ASP.NET Web Application with the Power of JQuery

Check out this snippet of HTML code <td style="width: 4pt;"> </td> <td> <span style="display: inline-block; color: Black; font-family: Arial; font-size: 9pt; font-weight: normal; width: 100pt; vertical-align: top;"> ...

"jQuery's toggleClass Method for Efficient Class Swapping

I have been working on a script that is supposed to change the color of a square upon clicking it using the toggleClass() method in jQuery. However, my code seems correct but for some reason, the square's color isn't changing. Can someone help me ...

Using Postman to transmit a JSON API object

I'm currently utilizing the JSONAPI Specification from Here is an example of the data I have: { "data": { "type": "tag", "id": "1", "attributes": { "name": "Test" } } } Is there a way to send a post request to the e ...

Adjust the width of your table content to perfectly fit within the designated width by utilizing the CSS property "table width:

Example of a table <table> <tr> <td>Name</td> <td>John</td> <td>Age</td> <td>25</td> <td>Job Title</td> <td>Software Engineer ...

Assigning attributes to each letter in a pangram

I am attempting to assign the appropriate class to a group of elements, representing each letter in the alphabet. The elements have IDs ranging from #alpha_0 to #alpha_25. If a letter appears just once in the input, it should be displayed in green. If a le ...

Creating clickable buttons in your Facebook chatbot using pymessenger involves sending a JSON payload

I'm currently in the process of developing a Facebook messenger chatbot using pymessenger, flask, and wit.at. My goal is to include buttons as selectable options within the chatbot conversation. For instance: " ...

Use the .replace() method to eliminate all content on the page except for the table

Extracting a table from a page that has been loaded through .ajax() in queue.htm has proven to be challenging. I am attempting to utilize .replace(regex) in order to isolate the specific table needed, but the process is unfamiliar to me. $j.ajax({ ...

Tips for managing a PHP post request without full knowledge of the variables to retrieve

My form allows users to dynamically add new lines using JavaScript. However, when they click the save button, I am struggling to capture and assign the new data to a variable. The current issue is that once the user adds new rows and clicks save, the rows ...

Executing a JavaScript function once an iframe has finished loading

I currently have this code on my index.html file: <body> <iframe id=iframetest src="alt.html"> <p>Your browser does not support iframes.</p> </iframe> <script> $(window).load(function(){ ...

unloading causes a malfunction

Currently, I am working on an online shop that utilizes a plugin known as thickbox. Although thickbox may seem a bit outdated, it is still being used in the shop and I prefer not to make significant changes at this point. The functionality of thickbox is ...

Accelerating Angular DOM Generation

I have encountered a challenge while building a large menu using an extensive JSON object. Initially, with around 250 nodes, the performance was acceptable and I considered the project completed. However, the scope has now expanded to require over 3,000 no ...

Creating a JavaScript/jQuery function for summing input values within an array

I am currently working on developing a function that can add elements from input fields into an array: function addPersonToDatabase(userId){ var name = $('#name').val(); var surname = $('#surname').val(); var age = $(' ...

The video on Videojs fails to show up on the screen

Currently utilizing the most recent version of videojs. Referencing this example http://jsfiddle.net/swinginsam/NWbUG/#share Access source code Having trouble identifying the issue. <!DOCTYPE html> <html> <head> <title>Video.j ...

Importing a substantial number of records from an XML file into an HTML table

Currently, I am working on a project where I am reading records from an XML file and dynamically displaying them in an HTML table using JavaScript's push method. Everything works smoothly when the number of records is below 1000. However, when the num ...