JavaScript Accessing Data From Imported Script-CodePudding

So I'm trying to export/import script from model.js and I use this

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

Here's the script of 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);
  }
};

This is the render part where I'm trying to access recipe part 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 trying to access recipe part here: const { recipe } = model.loadRecipe;

But I'm getting undefined. Please help me identify the problem, is it exporting, importing or I'm accessing data in the wrong way? Also, how should I push the recipe part to the state recipe?

Thank you very much.

CodePudding user response：

You can import the values from model.js separately.

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

Then, you can read the state value after running the loadRecipe() method.

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

But, I think you forget to set recipe value in loadRecipe() function in model.js too.

// get the recipe ...
// then ...
state.recipe = recipe;

CodePudding user response：

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);
    state.recipe = data.data.recipe;
    console.log(recipe);
  } catch (err) {
    console.error(err);
  }
};

await model.loadRecipe(id);
const { recipe } = model.state;

but why you dont want to return the data and save it to a variable instead? normally you will just return the recipe from the loadRecipe function.

CodePudding user response：

If you try it with vanilla JS:

// model.js
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 another file(call.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;

...in your html file...

<script type="text/javascript" src="model.js"></script> 
<script type="text/javascript" src="call.js"></script>