locked
How to fetch firebase data by child of child in javascript RRS feed

  • Question

  • User2130689380 posted

     locations data keeps added every day datewise, within that date we have a list of employee IDs like (1,174), employee id also keeps changes when he login to the app, when an employee moves the latitude-longitude data keeps added new. I want to show all employees location to the map

    @{
    ViewBag.Title = "EmployeeLiveLocationsOnMap";
    Layout = null;
    }

    <h2>Employee Live Locations</h2>

    <!DOCTYPE html>
    <html>
    <head>

    <style>
    #map {
    height: 100%;
    }

    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }

    #over_map {
    ;
    top: 10px;
    left: 89%;
    z-index: 99;
    background-color: #ccffcc;
    padding: 10px;
    }
    </style>
    </head>

    <body>
    @*<div id="map"></div>*@
    <div class="table-responsive">
    <div style="margin-top:20px;margin-left:20px;">
    <div id="map" style="width:1070px; height:570px; margin-top:0px;"></div>
    </div>
    </div>
    <div id="over_map">
    <div>
    <span>Online Users: </span><span id="Employees">0</span>
    </div>
    </div>

    <!-- jQuery CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Firebase -->
    <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
    <script>
    // Replace your Configuration here..
    var config = {

      apiKey: "AIzaSyAOSPK8AvUWj-sT9FeiCg-UHDyr7I3AyrY",
    authDomain: "carrier-35d7c.firebaseapp.com",
    databaseURL: "https://supportsales-2bdf7.firebaseio.com",
    projectId: "supportsales-2bdf7",
    storageBucket: "carrier-35d7c.appspot.com",
    messagingSenderId: "827792028763"
    };

    firebase.initializeApp(config);
    </script>

    <script>
    // counter for online users...
    var cars_count = 0;
    // markers array to store all the markers, so that we could remove marker when any user goes offline and its data will be remove from realtime database...
    var markers = [];
    var map;
    function initMap() { // Google Map Initialization...
    map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: new google.maps.LatLng(31.52011, 74.368604),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    }
    // This Function will create a user icon with angle and add/display that marker on the map
    function AddEmployee(data) {
    var icon = { // user icon

    scale: 0.4,
    fillColor: "#427af4", //<-- user Color, you can change it
    fillOpacity: 1,
    strokeWeight: 1,
    anchor: new google.maps.Point(0, 5),
    /* rotation: data.val().angle*/ //<-- user angle
    };


    var uluru = { lat: parseFloat(data.latitude), lng: parseFloat(data.longitude) };
    var marker = new google.maps.Marker({
    ,
    icon: icon,
    map: map
    });
    markers[data.key] = marker; // add marker in the markers array...
    document.getElementById("Employees").innerHTML = cars_count;
    }

    var root = firebase.database().ref();
    //var database = root.child('locations').child('26-10-2019');
    var database = root.child('locations');
    database.once('value', function (snapshot) {
    snapshot.forEach(function (data) {
    root.child('User').child(data.key).child('username').once('value', function (userSnapshot) {
    data.ref.update({ username: userSnapshot.val() });
    })
    });
    });


    ////get firebase database reference...
    var cars_Ref = firebase.database().ref('/locations');

    //this event will be triggered when a new object will be added in the database...
    //cars_Ref.endAt().limitToLast(1).on('child_added', function (data) {

    cars_Ref.orderByChild('timestamp').limitToLast(1).on('child_added', function (data) {

    var newPlayer = data.val();
    let array = []
    console.log(array)

    var arr2 = Object.keys(newPlayer);
    var key = arr2[0];
    console.log(key)
    console.log(data.key);

    cars_count = arr2.length;
    AddEmployee(data);
    });


    // this event will be triggered on location change of any user...
    cars_Ref.on('child_changed', function (data) {
    markers[data.key].setMap(null);
    AddEmployee(data);
    });


    // If any user goes offline then this event will get triggered and we'll remove the marker of that user...
    cars_Ref.on('child_removed', function (data) {
    markers[data.key].setMap(null);
    cars_count--;
    document.getElementById("Employees").innerHTML = cars_count;
    });

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap">
    </script>

    </body>
    </html>

    Sunday, October 27, 2019 11:02 AM

Answers

  • User665608656 posted

    Hi keshu,

    According to your description, do you monitor the location change on the app client side,then store the data in the database, and monitor the location change on the MVC server side to display the current employee location on the client side?

    If so, I suggest you use signalR and sqldependency to implement your requirements.

    You can refer to this link :

    Detecting Changes with SqlDependency

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 29, 2019 8:26 AM
  • User-474980206 posted

    stackoverflow is probably a better forum for firebase programing questions.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 29, 2019 3:20 PM

All replies

  • User665608656 posted

    Hi keshu,

    According to your description, I'm not sure about your needs.

    First of all, what is your firebase data and where do you put it?

    Do you want to identify the current location of employees after opening the app?

    How do you trigger user location changes?

    I hope you can provide detailed requirements and your code, which will help us solve your problems faster.

    Best Regards,

    YongQing.

    Monday, October 28, 2019 9:38 AM
  • User2130689380 posted

    Actually, location data is coming from android app stores locations latitude -longitude and employee id-data into firebase database .when the employee logs in to the app and changes his position data added like latitude longitude and employee ids get added, I want to fetch that data in my MVC web app.

    and yes, I want to identify the current location of employees after opening the web app.

    as per your needs, I passed my right firebase config.

    Is there anything else do I need to give you and sorry for my  English

    thanks

    https://stackoverflow.com/questions/58578577/how-to-fetch-firebase-data-by-child-of-child-in-javascript

    Monday, October 28, 2019 1:45 PM
  • User665608656 posted

    Hi keshu,

    According to your description, do you monitor the location change on the app client side,then store the data in the database, and monitor the location change on the MVC server side to display the current employee location on the client side?

    If so, I suggest you use signalR and sqldependency to implement your requirements.

    You can refer to this link :

    Detecting Changes with SqlDependency

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 29, 2019 8:26 AM
  • User-474980206 posted

    stackoverflow is probably a better forum for firebase programing questions.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 29, 2019 3:20 PM