I'm seeking assistance with handling a intricate JavaScript Object that is retrieved from Firebase

Question

I'm seeking assistance with handling a intricate JavaScript Object that is retrieved from Firebase

As a newcomer to the world of Firebase and JavaScript, I am facing challenges in accessing data from an array of complex objects.

Specifically, I need to retrieve the Date '02-01-2018' from each record. While I can retrieve the key, I am unsure how to access this particular date. I have shared screenshots of my database and the returned values for reference:

https://i.sstatic.net/h6wm8.png

https://i.sstatic.net/fsihK.png

{
"dailyPrices": {
"01-50005": {
"04-01-2018": {
"brands": "",
"editorID": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086269666d6d6e486269666d6d6e266b6765">[email protected]</a>",
"name": "dddf",
"phone": "",
"place": "errr"
},
// more data follows in a similar format
}
}
}

<input type="text" name="ordDetailTXT" id="ordDetailTXT" value="dailyPrice">

Code

function findOrderDetails(parentKey) 
{
   var returnArr = [];
      var fetchRecord = database.ref(parentKey);
        fetchRecord.on('value', function(snapshot) {
            var item = snapshot.val();
            item.key = snapshot.key; 
            returnArr.push(item);            
    });
}

function btnClickedOrdDetails(){
  var parentkey = ("#ordDetailTXT").val();
findOrderDetails(parentKey);
}

javascript json firebase firebase-realtime-database

Answer 1

Answer №1

To make it work and create the database structure as needed, simply insert your Firebase credentials into firebase.js. Unfortunately, I am unable to provide Firebase credentials here.

View the working gif here

var returnArr = [];  
function LookForDates()
{
findPrices();
return false;
}

function findPrices(){

returnArr = [];  
var database = firebase.database();
var strtDate = $('#strtDate').val().split('-');
strtDate = strtDate[2] + '-' + strtDate[1] + '-' + strtDate[0];

var endDate = $('#endDate').val().split('-');
endDate = endDate[2] + '-' + endDate[1] + '-' + endDate[0]; 
  
  var fetchDeleted = database.ref('dailyPrices');
  fetchDeleted.on('value', function(snapshot)
  {
    snapshot.forEach(function(snapshot) {
        var item = snapshot.val();
        item.key = snapshot.key;
        item.parentKey = snapshot.key;
         snapshot.forEach(function(child) {
                    item.childKey = child.key;
                });
                if(item.childKey >= strtDate && item.childKey <= endDate)
        {
        returnArr.push(item);
        }
    });
  });
  createPricesTable(returnArr);
}
function createPricesTable(returnArr)
{
$('#DateList')
    .find('option')
    .remove()
    .end()
    .append('<option value="">Select a district</option>')
    .val('whatever');
    returnArr.forEach(function(child) {
                   $('#DateList').append('<option value="'+ child.childKey +'">'+ child.childKey +'</option>');
                });
    }
    function DateSelected(value){
    //perform some functionality
    }

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Maps Website</title>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-3ziFidFTgxJXHMDttyPJKDuTlmxJlwbSkojudK/CkRqKDOmeSbN6KLrGdrBQnT2n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic">
    <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
  
</head>
<body>

 <div class="container">
        <div class="row">
              
             <div class="col-sm-12" style="margin-top: 5px;">
         
                           <div class="col col-sm-6"> <input required="" class="form-control" type="date" id="strtDate" name="Date"></div>
                            <div class="col col-sm-6"><input required="" class="form-control" type="date" id="endDate" name="Date"></div>
                            <div class="col col-sm-5"></div>
                            <div class="col col-sm-5"><br />
                            <button type="submit" onclick="return LookForDates();" class="btn btn-primary">Submit</button></div>
             </div>
             <button type="submit" style="display: block-inline; float: right;" onclick="ratelistExport()" id="ratelistExportBtn" class="btn btn-primary">Export to Excel</button>
            <div class="col-sm-12" style="margin-top: 10px;">
            <select name="DateList" onchange="DateSelected(value)" class="form-control" id="DateList" required></select>
            </div>
        </div>
    </div>
<script type="text/javascript" src="JS/Firebase.js"></script>
    <script type="text/javascript" src="JS/JSFidlle.js"></script>
</body>
</html>

Answer 2

To make it work and create the database structure as needed, simply insert your Firebase credentials into firebase.js. Unfortunately, I am unable to provide Firebase credentials here.

View the working gif here

var returnArr = [];  
function LookForDates()
{
findPrices();
return false;
}

function findPrices(){

returnArr = [];  
var database = firebase.database();
var strtDate = $('#strtDate').val().split('-');
strtDate = strtDate[2] + '-' + strtDate[1] + '-' + strtDate[0];

var endDate = $('#endDate').val().split('-');
endDate = endDate[2] + '-' + endDate[1] + '-' + endDate[0]; 
  
  var fetchDeleted = database.ref('dailyPrices');
  fetchDeleted.on('value', function(snapshot)
  {
    snapshot.forEach(function(snapshot) {
        var item = snapshot.val();
        item.key = snapshot.key;
        item.parentKey = snapshot.key;
         snapshot.forEach(function(child) {
                    item.childKey = child.key;
                });
                if(item.childKey >= strtDate && item.childKey <= endDate)
        {
        returnArr.push(item);
        }
    });
  });
  createPricesTable(returnArr);
}
function createPricesTable(returnArr)
{
$('#DateList')
    .find('option')
    .remove()
    .end()
    .append('<option value="">Select a district</option>')
    .val('whatever');
    returnArr.forEach(function(child) {
                   $('#DateList').append('<option value="'+ child.childKey +'">'+ child.childKey +'</option>');
                });
    }
    function DateSelected(value){
    //perform some functionality
    }

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Maps Website</title>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-3ziFidFTgxJXHMDttyPJKDuTlmxJlwbSkojudK/CkRqKDOmeSbN6KLrGdrBQnT2n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic">
    <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
  
</head>
<body>

 <div class="container">
        <div class="row">
              
             <div class="col-sm-12" style="margin-top: 5px;">
         
                           <div class="col col-sm-6"> <input required="" class="form-control" type="date" id="strtDate" name="Date"></div>
                            <div class="col col-sm-6"><input required="" class="form-control" type="date" id="endDate" name="Date"></div>
                            <div class="col col-sm-5"></div>
                            <div class="col col-sm-5"><br />
                            <button type="submit" onclick="return LookForDates();" class="btn btn-primary">Submit</button></div>
             </div>
             <button type="submit" style="display: block-inline; float: right;" onclick="ratelistExport()" id="ratelistExportBtn" class="btn btn-primary">Export to Excel</button>
            <div class="col-sm-12" style="margin-top: 10px;">
            <select name="DateList" onchange="DateSelected(value)" class="form-control" id="DateList" required></select>
            </div>
        </div>
    </div>
<script type="text/javascript" src="JS/Firebase.js"></script>
    <script type="text/javascript" src="JS/JSFidlle.js"></script>
</body>
</html>

I'm seeking assistance with handling a intricate JavaScript Object that is retrieved from Firebase

Answer №1

Similar questions

Guidelines on extracting information from a POST request, evaluating it based on a specified criteria, and providing a corresponding feedback

Capture the occurrence of a form not being submitted to the server because of validation issues

Creating a conditional statement in jQuery that will append text to a specific DIV element after a form has been successfully

Building a REST application using the CodeIgniter framework with database integration

How to submit the next row using jQuery AJAX only when the previous submission is successful without using a loop - could a counter

Issue: Nav component did not return any content during rendering. This typically indicates that a return statement is absent. To render nothing, you can return null

Platform error: Responses not specified for DIALOGFLOW_CONSOLE

What is the method for incorporating an infowindow into a data layer using Google Maps API?

Am I using the if statement correctly?

Uploading Multiple Files Using ReactJS

Processing JSON text input using ActionScript (AS3) object

Executing JavaScript code from an external file using AJAX

Using jQuery and CSS to Filter and Sort Content

Utilizing JSON object retrieval within a Node.js server

Strange behavior in Vue observed. The v-if directive is not properly monitoring changes

Encountering an error while configuring webpack with ReactJS: Unexpected token found while

Decoding a barcode using JavaScript

While v-carousel adjusts to different screen sizes, the images it displays do not adapt to

What about a CSS element that is partially fixed?

res.json transmitting outdated information