使用Fetch方法将属性提取到HTML
使用Fetch方法将属性提取到HTML
提问于 2021-09-06 01:09:44
我正在学习Javascript，在理解Fetch Api方法的使用方法时，我仍然有一些困难。
我被困在我的项目的第一步，必须让我们更适应Fetch方法。我打算使用这种方法从电子购物中构建第一个页面。
/ HTML
<div class="container-fluid d-flex justify-content-center ">
<main class="row justify-content-around w-100 flex-wrap">
<article id="article-card-1" class="col w-30">
<img src="" class="product-img" id="img-art-1">
</article>
<article id="article-card-2" class="col w-30">
<img class="product-img" id="img-art-2" src="">
</article>
<article id="article-card-3" class="col w-30">
<img class="product-img" id="img-art-3" src="">
</article>
<article id="article-card-4" class="col w-30">
<img class="product-img" id="img-art-4" src="">
</article>
<article id="article-card-5" class="col w-30">
<img class="product-img" id="img-art-5" src="">
</article>
</main >/ Javascript
const img = document.getElementById("img-art-1");
const getImgUrl = fetch('http://localhost:3000/api/cameras');
getImgUrl
.then(response => response.json())
.then(data => console.log(data[0].imageUrl))
.then(replaceImageSrc => img.src = replaceImageSrc[0].imageUrl)
.catch(error => console.log("Erreur" + error))从这里我可以得到第一个promise，第二个允许我访问JSON文件中包含的imageUrl，但我不能在我的HTML中使用它。
https://www.youtube.com/watch?v=sGvEqHkDyFc (FR) -->这个视频准确地展示了我应该做什么，但在我的项目中仍然什么也没做，我开始迷失方向。
编辑:这是我的JSON
Array(5) [ {…}, {…}, {…}, {…}, {…} ]
0: Object { _id: "5be1ed3f1c9d44000030b061", name: "Zurss 50S", price: 49900, … }
_id: "5be1ed3f1c9d44000030b061"
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
imageUrl: "http://localhost:3000/images/vcam_1.jpg"
lenses: Array [ "35mm 1.4", "50mm 1.6" ]
name: "Zurss 50S"
price: 49900
<prototype>: Object { … }
1: Object { _id: "5be1ef211c9d44000030b062", name: "Hirsch 400DTS", description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", … }
_id: "5be1ef211c9d44000030b062"
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
imageUrl: "http://localhost:3000/images/vcam_2.jpg"
lenses: Array(3) [ "50mm 1.8", "60mm 2.8", "24-60mm 2.8/4.5" ]
name: "Hirsch 400DTS"
price: 309900
<prototype>: Object { … }
2: Object { _id: "5be9bc241c9d440000a730e7", name: "Franck JS 105", price: 209900, … }
_id: "5be9bc241c9d440000a730e7"
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
imageUrl: "http://localhost:3000/images/vcam_3.jpg"
lenses: Array [ "25mm 4.5" ]
name: "Franck JS 105"
price: 209900
<prototype>: Object { … }
3: Object { _id: "5be9c4471c9d440000a730e8", name: "Kuros TTS", description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", … }
_id: "5be9c4471c9d440000a730e8"
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
imageUrl: "http://localhost:3000/images/vcam_4.jpg"
lenses: Array [ "50mm 1.7", "35mm 1.4" ]
name: "Kuros TTS"
price: 159900
<prototype>: Object { … }
4: Object { _id: "5be9c4c71c9d440000a730e9", name: "Katatone", description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", … }
_id: "5be9c4c71c9d440000a730e9"
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
imageUrl: "http://localhost:3000/images/vcam_5.jpg"
lenses: Array(3) [ "50mm 1.4", "35mm 1.8", "28-200mm 2.8/4.5" ]
name: "Katatone"
price: 59900
<prototype>: Object { … }
length: 5
<prototype>: Array []回答 2
Stack Overflow用户
发布于 2021-09-06 01:20:47
then函数是promises所具有的函数。fetch返回一个promise，response.json()也是如此。正因为如此，您为它们链接了then调用。
但是console.log(data[0].imageUrl)不返回promise，所以您不能再使用then作为结果。
用.then(data => img.src = data[0].imageUrl)替换.then(data => console.log(data[0].imageUrl))应该可以解决您的问题。
有关promises的更多信息，您可以在here上阅读。
Stack Overflow用户
发布于 2021-09-06 03:41:36
我解决了这个问题。我必须设置路径。然后我按照@tuomokar的建议解决了我的问题。
最终的代码如下所示：
const getJsonData = fetch('http://localhost:3000/api/cameras').then(response => response.json());
getImgUrl = getJsonData
.then(data => document.getElementById("img-art-1").src = data[0].imageUrl)
.catch(error => console.log("Erreur" + error))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69072012
复制相关文章
相似问题
腾讯云开发者
