Most efficient way to save a lot of data from java script to Bubble?

[Orbit]

Hello Bubble,

So i have this Java script (Genereated with ChatGPT) to gather som information about the user. This information will be saved in a Data Type called device_info, this device_info will contain the following data fileds:

• IP Address
• City
• Country
• ISP
• Latitude
• Longitude
• Browser
• Language
• Screen size
• Platform
• Cookies enabled

Java script (by chatGPT):

async function getUserInfo() {
    let info = "";

    // Get IP and location
    try {
        const ipRes = await fetch("https://ipapi.co/json/");
        const ipData = await ipRes.json();

        info += `IP Address: ${ipData.ip}\n`;
        info += `City: ${ipData.city}\n`;
        info += `Country: ${ipData.country_name}\n`;
        info += `ISP: ${ipData.org}\n`;
        info += `Latitude: ${ipData.latitude}, Longitude: ${ipData.longitude}\n\n`;
    } catch (error) {
        info += "Unable to fetch IP information.\n\n";
    }

    // Browser information
    info += `Browser: ${navigator.userAgent}\n`;
    info += `Language: ${navigator.language}\n`;
    info += `Screen size: ${screen.width}x${screen.height}\n`;
    info += `Platform: ${navigator.platform}\n`;
    info += `Cookies enabled: ${navigator.cookieEnabled}\n`;

    document.getElementById("info").innerText = info;
}

// Run the function
getUserInfo();

I have used Java script to bubble and the Tool box plugin before to save 1 data type but not sure how to do it with so many and what the best way is?

Thankful for any help or guidance

[Orbit]

Found the soluction:

Step 1. Put your code in a HTML element on the page in script tags:

<script>
function sendToBubble(value) {
    bubble_fn_jsToBubble_userInfo(value); // Must match Bubble's "Javascript to Bubble" suffix
}

async function getUserInfo() {
    let userInfo = {};

    try {
        const ipRes = await fetch("https://ipapi.co/json/");
        const ipData = await ipRes.json();

        // Stores IP-related information
        userInfo.ip = ipData.ip;
        userInfo.city = ipData.city;
        userInfo.country = ipData.country_name;
        userInfo.isp = ipData.org;
        userInfo.latitude = ipData.latitude;
        userInfo.longitude = ipData.longitude;
    } catch (error) {
        userInfo.error = "Unable to fetch IP information.";
    }

    // Stores user-related information
    userInfo.browser = navigator.userAgent;
    userInfo.language = navigator.language;
    userInfo.screenSize = `${screen.width}x${screen.height}`;
    userInfo.platform = navigator.platform;
    userInfo.cookiesEnabled = navigator.cookieEnabled;

    // Check if the user prefers dark mode
    userInfo.darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

    // Send the entire object, but without unnecessary quotation marks and keys
    const cleanedUserInfo = {
        ip: userInfo.ip,
        city: userInfo.city,
        country: userInfo.country,
        isp: userInfo.isp,
        latitude: userInfo.latitude,
        longitude: userInfo.longitude,
        browser: userInfo.browser,
        language: userInfo.language,
        screenSize: userInfo.screenSize,
        platform: userInfo.platform,
        cookiesEnabled: userInfo.cookiesEnabled,
        darkMode: userInfo.darkMode
    };

    // Send JSON string to Bubble
    sendToBubble(JSON.stringify(cleanedUserInfo));
}

// Run the function immediately when the page loads
getUserInfo();
</script>

Step 2. Add the Java Script to Bubble

Step 3. Trigger the Java Script to Bubble (i did with a button and create a new thing)

Step 4. Extract the data with Regex, i will share below the regex i used to only get the result and not the full JSON with quotes and everthing: "IP:"192.29.22.22", with Regex you will only save 192.29.22.22 (users IP adress)

Regnex Filters:

• IP Regnex: (?<="ip":")[^"]+
• City Regnex: (?<="city":")[^"]+
• Country Regnex: (?<="country":\s*")[^"]+(?=")
• Browser Regnex: (?<="browser":\s*")[^"]+(?=")
• Dark Mode Regnex: (?<=^|\s)"darkMode":\s*(true|false)
• ISP Regnex: (?<=^|\s)"isp":\s*"([^"]+)"
• Language Regnex: (?<=^|\s)"language":\s*"([^"]+)"
• Platform Regnex: (?<=^|\s)"platform":\s*"([^"]+)"
• Screen Size Regex: (?<=^|\s)"screenSize":\s*"([^"]+)"

DISCLAIMER: I do not have any programing knowlage and im not the best Bubble developer so i do not know if this is the best or most optimal way to do this but it works good for me.
DISCLAIMER 2: If you have your service in the EU, remeber to comply with GDPR when you collect this data

If you found this useful, please consider giving it a like because i spent a lot of time with ChatGPT trying to figure this out.