How to import a dataset directly into my javascript code

Question

I would like to know if I could import a dataset directly into my code (javascript), because I want to make a condition for when the user presses a certain function, to display a given dataset.

What's the format of this dataset? – Luís Ramalho Apr 08 '20 at 01:35 — Luís Ramalho, Apr 08 '20 at 01:35

score 0 · Answer 1 · answered Apr 08 '20 at 01:34

0

You make a fetch request to get data that you can display.

fetch('http://localhost:portOfDatabase/path')
.then(resp => resp.json())
.then(r => {
  //use r which holds the response from your database
})

answered Apr 08 '20 at 01:34

tim

677
9
11

score 0 · Accepted Answer · answered Apr 08 '20 at 01:37

If you can get your data in String format as JSON array or dictionary you can just use JSON.parse() to create an object from your data in string format. Then use that object for extracting all info for display. Here are some examples

From w3schools:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');
obj.name // "John"
obj.age  // 30
obj.city // "New York"

score 0 · Answer 3 · answered Apr 08 '20 at 08:10

From the tags you have added it seems as if you would like to add a dataset you can use to populate a Mapbox map.

As the other answers mentioned, you can load data from a JSON file. Please note that the data needs to be of geoJSON format.

This would create the geoJSON data source at runtime. But you can also point it to a source file. (see second code snippet)

map.addSource('route', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625]
]
}
}
)

From file:

  map.addSource(<sourcename>, {
            'type': 'geojson',
            'data': <URL> 
        });

Please also see these examples:

How to import a dataset directly into my javascript code

3 Answers3