0

I have a Javascript function that fetch dynamic random recipes from spoonacular API and then append some HTML to an Element, the HTML includes dynamic links HREFs, if one is clicked it will go to dynamic route, such as www.example.com/recipe/782585 (depends on the ID value)

const spoonacular = async () => {
  const response = await fetch(
    "https://api.spoonacular.com/recipes/complexSearch?apiKey=c0c692d2b8be4e92a29883049789419b&includeNutrition=true.",
    {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    }
  );

  const data = await response.json();

  data.results.forEach((e) => {
    const html = `
    <div class="dish" id="a${e.id}">
      <a href="recipe/${e.id}"><img src=${e.image} alt="" class="dishImg" /></a>
      <h2 class="dishTitle">
        ${e.title}
      </h2>
  </div>
    `;
    dishes.insertAdjacentHTML("afterbegin", html);
  });
};

spoonacular();

the plan here is to make dynamic component recipe.html that will send request to spoonacular with the ID param and get informations about the recipe like ingredients and instructions..etc, now this looks easy using some JS libraries like react, but can I do that without using any Library or backend routing?

Improve this question
3
  • 1
    At the root, those UI libraries are built from plain javascript talking to the DOM, so yes, you can make the same DOM calls from javascript that those frameworks do. Not sure how routing comes into the problem, so maybe you need to be more specific about the issue you're asking about Commented Apr 10, 2023 at 19:41
  • in react we can make dynamic routes using react-router-dom, e.g. <Route path="/:component" element={<ComponentContainer />}></Route> then we can make Link to that route with dynamic parameter : <Link to="/employees"> , then we can use useParams to get the parameter value, i want to do the same thing but without using react Commented Apr 10, 2023 at 20:54
  • if you want react stuff, then use react. If you want to see how react implements it, then you can look at the source. Fundamentally, you'll be storing some strings in some context (a javascript data model, or attached somewhere in the DOM)) and gluing them together to form URLs to fetch data. Libraries exist to give you higher-level abstractions than building everything from scratch, so if you want those abstractions, probably best to use the library rather than reinvent that wheel. Commented Apr 10, 2023 at 21:29
Related questions
2943
I need an unordered list without any bullets
1119
How to insert an element after another element in JavaScript without using a library?
1402
How do I reformat HTML code using Sublime Text 2?
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.