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.
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.
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;
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>