Retrieving Information From External Script Using JavaScript

Question

Retrieving Information From External Script Using JavaScript

Struggling with exporting/importing script from model.js, I've used the following code:

import * as model from './model.js';

Below is the code snippet from model.js:

export const state = {
  recipe: {},
};
console.log(state.recipe);
export const loadRecipe = async function (id) {
  try {
    const res = await fetch(
      `https://forkify-api.herokuapp.com/api/v2/recipes/${id}`
    );
    const data = await res.json();
    if (!res.ok) throw new Error(`${data.message} (${res.status})`);
    console.log(data);
    let { recipe } = data.data;
    console.log(recipe);
  } catch (err) {
    console.error(err);
  }
};

In the rendering part, I'm attempting to access the recipe section from model.js.

const showRecipe = async function () {
  try {
    const id = window.location.hash.slice(1);
    if (!id) return;
    renderSpinner(recipeContainer);
    //1.Loading Recipe
    await model.loadRecipe(id);
    const { recipe } = model.loadRecipe.recipe;

I'm encountering an issue trying to access the recipe section here: const { recipe } = model.loadRecipe;

The value returned is undefined. Can you help me pinpoint the problem - whether it's related to importing, exporting, or accessing the data incorrectly? And how should I update the state.recipe with the recipe section?

Thank you for any assistance provided.

javascript

Answer 1

Answer №1

If you want to bring in the data from model.js individually, you can do so.

import { state, loadRecipe } from './model';

After calling the loadRecipe() function, you will be able to access the state variable.

// ...
await loadRecipe(id);
console.log(state.recipe);

However, it seems like you may have overlooked setting the value of recipe within the loadRecipe() function in your model.js as well.

// fetch the recipe data...
// then assign it to state.recipe
state.recipe = recipe;

Answer 2

If you want to bring in the data from model.js individually, you can do so.

import { state, loadRecipe } from './model';

After calling the loadRecipe() function, you will be able to access the state variable.

// ...
await loadRecipe(id);
console.log(state.recipe);

However, it seems like you may have overlooked setting the value of recipe within the loadRecipe() function in your model.js as well.

// fetch the recipe data...
// then assign it to state.recipe
state.recipe = recipe;

Answer 3

Answer №2

const myState = {
  currentRecipe: {},
};
console.log(myState.currentRecipe);
const fetchAndLoadRecipe = async function (recipeId) {
  try {
    const response = await fetch(
      `https://forkify-api.herokuapp.com/api/v2/recipes/${recipeId}`
    );
    const recipeData = await response.json();
    if (!response.ok) throw new Error(`${recipeData.message} (${response.status})`);
    console.log(recipeData);
    myState.currentRecipe = recipeData.data.recipe;
    console.log(currentRecipe);
  } catch (error) {
    console.error(error);
  }
};

await fetchAndLoadRecipe(recipeId);
const { currentRecipe } = myState;

I know it might seem strange not returning the data directly from the fetchAndLoadRecipe function, but saving it to a variable gives more flexibility and control over how we manipulate the data later on.

Answer 4

const myState = {
  currentRecipe: {},
};
console.log(myState.currentRecipe);
const fetchAndLoadRecipe = async function (recipeId) {
  try {
    const response = await fetch(
      `https://forkify-api.herokuapp.com/api/v2/recipes/${recipeId}`
    );
    const recipeData = await response.json();
    if (!response.ok) throw new Error(`${recipeData.message} (${response.status})`);
    console.log(recipeData);
    myState.currentRecipe = recipeData.data.recipe;
    console.log(currentRecipe);
  } catch (error) {
    console.error(error);
  }
};

await fetchAndLoadRecipe(recipeId);
const { currentRecipe } = myState;

I know it might seem strange not returning the data directly from the fetchAndLoadRecipe function, but saving it to a variable gives more flexibility and control over how we manipulate the data later on.

Answer 5

Answer №3

When attempting this with pure JavaScript:

// database.js
const fetchUser = async function (userId) {
    try {
        const response = await fetch(
            `https://users-api.herokuapp.com/api/v2/users/${userId}`
        );
        const userData = await response.json();
        if (!response.ok) throw new Error(`${userData.message} (${response.status})`);
        console.log(userData);
        let { user } = userData.data;
        console.log(user);
    } catch (error) {
        console.error(error);
    }
};

...from a different file (fetchData.js)...

const displayUser = async function () {
    try {
        const userId = window.location.hash.slice(1);
        if (!userId) return;
        showLoader(userContainer);
        // 1. Fetching User Data
        await database.fetchUser(userId);
        const { user } = database.fetchUser.user;

...in your HTML document...

<script type="text/javascript" src="database.js"></script> 
<script type="text/javascript" src="fetchData.js"></script>

Answer 6

When attempting this with pure JavaScript:

// database.js
const fetchUser = async function (userId) {
    try {
        const response = await fetch(
            `https://users-api.herokuapp.com/api/v2/users/${userId}`
        );
        const userData = await response.json();
        if (!response.ok) throw new Error(`${userData.message} (${response.status})`);
        console.log(userData);
        let { user } = userData.data;
        console.log(user);
    } catch (error) {
        console.error(error);
    }
};

...from a different file (fetchData.js)...

const displayUser = async function () {
    try {
        const userId = window.location.hash.slice(1);
        if (!userId) return;
        showLoader(userContainer);
        // 1. Fetching User Data
        await database.fetchUser(userId);
        const { user } = database.fetchUser.user;

...in your HTML document...

<script type="text/javascript" src="database.js"></script> 
<script type="text/javascript" src="fetchData.js"></script>

Retrieving Information From External Script Using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

"Enhance the appearance of bootstrap buttons by applying CSS to add shadow and border when the

Using jQuery selectors to assign a value to a particular text input field with a matching name

Exploring Nodejs and delving into fundamental queries

Issue encountered: ENOENT error - The specified file or directory does not exist. This error occurred while attempting to access a directory using the

Error: Unexpected character found at line 1, position 2 in the JSON data caused a syntax error when parsing

Jssor's dynamic slider brings a touch of sophistication to preview upcoming images

Utilize jQuery to dynamically add or remove elements by referencing specific HTML elements

What is the best way to apply a condition within a v-bind in Vue.js?

The equivalent of an event listener in event handling

The react router dom seems to be malfunctioning when attempting to switch between paths

Interruption of client-side JavaScript by the ASP timer tick event

Automated pagination in Jquery running seamlessly

Unable to display image source in viewport

Stretching the limits: Combining and expanding your Styled Components theme

The issue of elements not appearing seems to be related to the passing of parameters to the state

Ways to reduce lag while executing a for loop

Develop a real-time preview of the form inputs

I just installed Electron on my Mac using the command 'sudo npm install electron -g', but now I am encountering an error. How can I resolve this issue

Utilizing Radio buttons for validation in react-hook-form

Flipping back and forth between two images within a single HTML file