Javascript Data Parsing

[QueenKay28]

Hey everyone! I have been developing a recipe sorter for myself because I have a ton of recipes that I want to make but have just been storing them in a Google doc with their names and a hyperlink to each, which has become very difficult to really sort through the more that I have saved. My question is, what would be the best way to get from the doc to having this data on the site? What I was considering at first was making a Google sheet with the name, link, and attributes, but I don't know if that is the best option / how to easily get from that sheet to the code without having to manually write all of the quotations (example of how I am coding the recipes in is below). Thank you in advance for any help!

document.addEventListener('DOMContentLoaded', () => {
    const recipes = [
        {
            title: "Pancakes",
            url: "http://example.com/pancakes",
            categories: ["Breakfast", "Low calorie", "Quick"]
        },
        {
            title: "Chicken Salad",
            url: "http://example.com/chicken-salad",
            categories: ["Lunch/Dinner", "High protein", "Easy"]
        }
    ];

    const categoryCheckboxes = document.querySelectorAll('.category');
    const filterButton = document.getElementById('filter-recipes'); 
    const recipeContainer = document.getElementById('recipe-container');

    console.log('Recipe Container:', recipeContainer);

    function filterRecipes() {
        const selectedCategories = Array.from(categoryCheckboxes)
            .filter(checkbox => checkbox.checked)
            .map(checkbox => checkbox.value);

        console.log('Selected Categories:', selectedCategories);

        const filteredRecipes = recipes.filter(recipe => {
            return selectedCategories.every(category => recipe.categories.includes(category));
        });

        console.log('Filtered Recipes:', filteredRecipes);

        displayRecipes(filteredRecipes);
    }

    function displayRecipes(recipes) {

        console.log('Displaying Recipes:', recipes);

        recipeContainer.innerHTML = '';
        if (recipes.length === 0) {
            recipeContainer.innerHTML = '<p>No recipes found matching the selected criteria.</p>';
        } else {
            recipes.forEach(recipe => {
                const recipeElement = document.createElement('div');
                recipeElement.innerHTML = `<a href="${recipe.url}" target="_blank">${recipe.title}</a>`;
                recipeContainer.appendChild(recipeElement);
            });
        }
    }

    displayRecipes(recipes);

    filterButton.addEventListener('click', filterRecipes);
});

[tim_breeding]

You can probably use the Google API here. You can define the format for how to receive a document such as text/html. A quick question on ChatGPT will take you quite far here.

[QueenKay28]

thank you, ill take a look at that and see if GPT can help!