metoda foreach

metoda foreach
mistrzkrisu6
M6
mistrzkrisu6
M6
  • Rejestracja:około 8 lat
  • Ostatnio:12 miesięcy
  • Postów:202
0

Witam, robię stronę, która pokazuje pojazdy komunikacji miejskiej o danym numerze, jest kilka pojazdów jednej linii i chciałbym odświeżać ich pozycje na mapie, po wybraniu numeru wybieram pojazdy o danym numerze, jednak nie wiem jak zrobić znacznik dla każdego pojazdu o danym numerze, myślę, że ten kod powinien być w funkcji foreach, bo odpowiada on za tworzenie znacznika o danych współrzędnych:

Kopiuj
                const lat = vehicles["Vehicles"][line]["Lat"];
                const lon = vehicles["Vehicles"][line]["Lon"];

                marker.setLatLng([lat, lon]);
                mymap.setView([lat, lon], 12)

dane pobierane są stąd: https://ckan2.multimediagdansk.pl/gpsPositions?

jest kilka pojazdów jednej linii, unikalna właściwość to VehicleCode, jednak jak podstawiam ją zamiast line to strona mi nie działa, wyskakuje mi: index2.html:126 Uncaught (in promise) TypeError: Cannot read property 'Lat' of undefined
at getISS (index2.html:126)

oto cały kod:

Kopiuj
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>
    <style>
        #mapid {
            height: 720px;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <button type="button">Wybierz linie</button>
    <div id="mapid"></div>
    <script>


        const mymap = L.map('mapid').setView([54.352024, 18.646639], 12);
        const marker = L.marker([54.352024, 18.646639]).addTo(mymap);
        const attribution =
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
        const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        const tiles = L.tileLayer(tileUrl, { attribution });
        tiles.addTo(mymap);
        const api_url = "https://ckan2.multimediagdansk.pl/gpsPositions?";
        let start;
        function chooseLine() {

            async function getISS() {
                const response = await fetch(api_url);
                const vehicles = await response.json();



                let result = vehicles["Vehicles"].filter(obj => {
                    return obj.Line === line
                })

                console.log(result)


                const lat = vehicles["Vehicles"][line]["Lat"];
                const lon = vehicles["Vehicles"][line]["Lon"];

                marker.setLatLng([lat, lon]);
                mymap.setView([lat, lon], 12)
            }
            const line = prompt('wybierz linie');
            clearInterval(start);
            start = setInterval(getISS, 1000);

        }
        const el = document.querySelector("button");
        el.addEventListener("click", chooseLine);



    </script>
</body>

</html>
złoty
Mógłbyś wrzucić jakieś przykładowe dane z tego endpointu?
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
mistrzkrisu6
M6
mistrzkrisu6
M6
  • Rejestracja:około 8 lat
  • Ostatnio:12 miesięcy
  • Postów:202
0

np. po wybraniu linii 112, nie wiem czy o to chodziło

(2) [{…}, {…}]
0:
DataGenerated: "2020-08-09 07:41:48"
Delay: 316
GPSQuality: 3
Lat: 54.332088470458984
Line: "112"
Lon: 18.809030532836914
Route: "61"
Speed: 65
VehicleCode: "2686"
VehicleId: 145739
VehicleService: "112-01"
proto: Object
1:
DataGenerated: "2020-08-09 07:41:49"
Delay: 0
GPSQuality: 3
Lat: 54.311248779296875
Line: "112"
Lon: 18.91737937927246
Route: "11"
Speed: 0
VehicleCode: "8502"
VehicleId: 145638
VehicleService: "112-04"
proto: Object
length: 2
proto: Array(0)

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
złoty
złoty
złoty
złoty
  • Rejestracja:ponad 17 lat
  • Ostatnio:29 dni
  • Lokalizacja:Warszawa
  • Postów:108
0
Kopiuj
const line = "262";
document.addEventListener("DOMContentLoaded", function () {
    const vehicleData = fetch("https://ckan2.multimediagdansk.pl/gpsPositions?")
        .then(response => response.json())
        .then(vehicleData => {
            const vehicles = vehicleData.Vehicles;
            const lineVehicles = vehicles.filter(v => v.Line === line);
            for(let vehicle of lineVehicles) {
                console.log(`[${vehicle.Lat}; ${vehicle.Lon}]`);
            }
        });
});

Wydaje mi się, że w zły sposób odwoływałeś się do danych z tego endpointu. Zapis

Kopiuj
const lat = vehicles["Vehicles"][line]["Lat"];

Zakłada, że w tablicy vehicles, dla danej linii line, istnieje wewnętrzna tablica z pojazdami dla danej linii, podczas gdy endpoint zwraca jedną płaską tablicę ze wszystkimi pojazdami.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
mistrzkrisu6
M6
mistrzkrisu6
M6
  • Rejestracja:około 8 lat
  • Ostatnio:12 miesięcy
  • Postów:202
0

result zawiera tablice z pojazdami o danym numerze, a cała strona działa tak, że znajduje dane lat i lon pojazdu o danym numerze i go wyświetla więc chyba jest ok, może tak myślisz bo w pliku jest LastUpdateData i Vehicles i w Vehicles są wszystkie pojazdy, dlatego tak to jest zapisane, tylko problem jest taki, że wyświetla dane jednego pojazdu o danym numerze a ich jest klka

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto