Search code examples
pythonhtmlfirebaseflaskraspberry-pi

Flask app not displaying data from Firebase properly

I am experiencing issues displaying data on my Flask web app. I have RPi connected to three sensors, load cell, ultrasonic, and PIR. Every time motion is detected, readings are sent to Flask web app to display live readings. Also, data is stored to Firebase Realtime DB.

I have a function to get latest readings for each day, everything displays normally except items, which is basicly an integer counter.

I get an error: <built-in method items of dict object at 0x7f7de1cbc0>

As I understand items are somehow dictionary, but I can't figure out the solution.

get latest entries for each day function:

def fetch_latest_data_each_day():
    ref = db.reference('Smart Bin')
    all_data = ref.get()
    latest_entries = {}

    if all_data:
        for key, value in all_data.items():
            date_part = key.split('_')[0] 
            if date_part not in latest_entries or key > latest_entries[date_part]['timestamp']:
                # Parse and format the timestamp before storing it
                timestamp = datetime.strptime(key, '%Y-%m-%d_%H-%M-%S')
                formatted_timestamp = timestamp.strftime('%Y-%m-%d at %H:%M:%S')
                latest_entries[date_part] = {
                    'timestamp': formatted_timestamp,  # Store the formatted timestamp
                    'data': value
                }
    return latest_entries

index.html

<div class="historical-data">
            <h1>Historical Data</h1>
            {% for date, info in latest_entries.items() %}
                <div class="historical-entry">
                    <h2>Date: {{ date }}</h2>
                    <div class="data">
                        <strong>Time of latest record:</strong> <span>{{ info.timestamp }}</span>
                    </div>
                    <div class="data">
                        <strong>Distance:</strong> <span>{{ info.data.distance }} cm</span>
                    </div>
                    <div class="data">
                        <strong>Weight:</strong> <span>{{ info.data.weight }} grams</span>
                    </div>
                    <div class="data">
                        <strong>Items:</strong> <span>{{ info.data.items }}</span>
                    </div>
                </div>
            {% endfor %}
        </div>

latest entries data example: Latest entries data structure: {'2024-06-22': {'timestamp': '2024-06-22 at 21:04:57', 'data': {'distance': 120, 'items': 2, 'weight': 0}}, '2024-06-23': {'timestamp': '2024-06-23 at 21:27:32', 'data': {'distance': 170.8, 'items': 2, 'weight': 0}}, '2024-06-24': {'timestamp': '2024-06-24 at 01:43:02', 'data': {'distance': 170.47, 'items': 2, 'weight': 0}}, '2024-06-28': {'timestamp': '2024-06-28 at 11:50:32', 'data': {'distance': 171.52, 'items': 2, 'weight': 15587}}}

Pictures of Firebase structure and display error attached.

Any ideas? Thank you all in advance!

enter image description here

firebase_data_structure

I tried indexing items on first index -> info.data.items[0] -> I get nothing (blank on web page)

Solution

  • Since you are creating another dict which you most probably accidentally builded like this (nested & multiple data key value pairs):

    {
    "timestamp": "2024-06-24",
    "data": {
        "timestamp": "2024-06-24 at 01:43:02",
        "data": {
            "distance": 170.47,
            "items": 2,
            "weight": 0
        }
    }
}

    So the first adjustment would be access path and way of accessing keys in dictionaries: info['data']['data']['weight']