Fetching Data Attributes – Pseudocode

Overview

This document provides pseudocode for fetching data attributes from HTML elements and logging them to the console.

Basic Concept

HTML Element with Data Attribute

<div id="myElement" data-user-id="12345" data-user-name="John Doe">
    Content here
</div>

JavaScript Pseudocode

// Step 1: Get reference to the HTML element
element = document.getElementById("myElement")

// Step 2: Fetch the data attribute
// Method 1: Using getAttribute()
dataValue = element.getAttribute("data-user-id")

// Method 2: Using dataset property (converts kebab-case to camelCase)
dataValue = element.dataset.userId

// Step 3: Console log the result
console.log("Data attribute value:", dataValue)

Complete Example

FUNCTION fetchAndLogDataAttribute():
    // Get the target element
    targetElement = document.querySelector("[data-user-id]")
    
    // Check if element exists
    IF targetElement EXISTS:
        // Fetch the data attribute
        userId = targetElement.dataset.userId
        userName = targetElement.dataset.userName
        
        // Log to console
        console.log("User ID:", userId)
        console.log("User Name:", userName)
        
        // Return the data for further use
        RETURN { userId, userName }
    ELSE:
        console.log("Element not found")
        RETURN null
    END IF
END FUNCTION

// Call the function
result = fetchAndLogDataAttribute()

Error Handling

FUNCTION safelyFetchDataAttribute(elementId, attributeName):
    TRY:
        element = document.getElementById(elementId)
        
        IF element IS NULL:
            THROW "Element not found"
        END IF
        
        // Fetch attribute value
        attributeValue = element.getAttribute("data-" + attributeName)
        
        IF attributeValue IS NULL:
            console.log("Attribute not found:", attributeName)
            RETURN null
        END IF
        
        console.log("Attribute value:", attributeValue)
        RETURN attributeValue
        
    CATCH error:
        console.error("Error fetching data attribute:", error)
        RETURN null
    END TRY
END FUNCTION

Multiple Elements

FUNCTION fetchDataFromMultipleElements():
    // Get all elements with a specific data attribute
    elements = document.querySelectorAll("[data-user-id]")
    
    // Loop through each element
    FOR EACH element IN elements:
        userId = element.dataset.userId
        console.log("Found user ID:", userId)
    END FOR
END FUNCTION

Key Points

1. Two main methods to access data attributes:
   • getAttribute("data-attribute-name") – exact attribute name
   • dataset.attributeName – camelCase conversion
2. Always check if element exists before accessing attributes
3. Data attributes are always strings – convert to numbers if needed:userId = parseInt(element.dataset.userId)
4. Use descriptive console messages for better debugging
5. Handle errors gracefully to prevent application crashes