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"
}
]