page-application
在 javascript
中,没有 framework
。我被这个返回未定义的承诺问题所困扰。我只是在 html 页面上未定义。
我在两个函数 getJsonData
和 showPhotographers
之间传递变量时遇到了很多麻烦。
- 为此,我使用了块
if(1 ==1)
内的变量定义并定义了json = getJsonData()
;就像这样,变量定义得很好。 如果您有此问题的解决方案,请提前致谢 这是我的代码:
let json;
// get Json Data
const getJsonData = () => {
return fetch('../../db/FishEyeData.json').then((response) => {
return response
.json()
.then((data) => {
json = data;
return data;
})
.catch((err) => {
console.log(err);
});
});
};
// get Photographers
const getPhotographers = () => {
return new Promise((resolve,reject) => {
getJsonData().then((data) => {
console.log(data);
return resolve(data.photographers);
});
});
};
// share scope json
if(1 == 1) {
json = getJsonData();
}
const showPhotographers = () => {
// get the values
if (json !== undefined) {
// load the images
// function html Photographers section
console.log(json);
const html = JSON.stringify(json)
.photographers?.map((user) => {
const str = user.name;
const dash = str.replace(" ","-");
console.log(dash);
return `
<div class="user ">
<a href="#${dash}">
<div class="circle thumb">
<div class="crop">
<img src="img/${user.portrait}" alt="" />
</div>
<h2 class="name">${user.name}</h2>
</div>
</a>
<p class="city">${user.city}</p>
<p class="tagline">${user.tagline}</p>
<p class="price">${user.price} €/jour</p>
<ul class="tags">
${user.tags
.map((tag) =>
`
<li>
<a href="#" class="${tag}">#${tag}</a>
</li>
`.trim()
)
.join("")}
</ul>
</div>
`;
})
.join("");
document.querySelector("#app").insertAdjacentHTML("afterbegin",html);
}
}
export { json,getJsonData,getPhotographers,showPhotographers };
文件 FishEyeData.json
看起来像这样
{
"photographers":[
{
"name":"Mimi Keel","id":243,"city":"London","country":"UK","tags":[
"portrait","events","travel","animals"
],"tagline":"Voir le beau dans le quotidien","price":400,"portrait":"MimiKeel.jpg"
}
]