为什么我不能从json获取我的项目？

bwitn5fc 于 2021-09-13 发布在 Java

关注(0)|答案(3)|浏览(268)

我试图从json包中获取数据，但控制台没有显示任何内容，它在“products.getproducts（）.then（data=>console.log（data））”行中宣布“undefined”。
我不知道我的js出了什么问题，有人知道能帮我吗？非常感谢。
这是我的js：

const cartBtn = document.querySelector('.cart-btn')
const closeCartBtn = document.querySelector('.close-btn')
const cartDOM = document.querySelector('.cart')
const cartOverlay = document.querySelector('.cart-overlay')
const cartItems = document.querySelector('.cart-items')
const cartTotal = document.querySelector('.cart-total')
const cartContent = document.querySelector('.cart-content')
const productDom = document.querySelector('.product-center')
    //cart
let cart = []
    //getting the products
class Products {
    async getProducts() {
        try {
            let result = await fetch('products.json')
            let data = await result.json()
            let products = data.items;
            products = products.map(item => {
                const { title, price } = item.fields;
                const { id } = item.sys;
                const image = item.fields.image.fields.file.url;
                return {
                    title,
                    price,
                    id,
                    image
                }
                return products

            })
        } catch (error) {
            console.log(error)
        }

    }
}
//display products
class UI {

}
//local storage
class Storage {

}
document.addEventListener('DOMContentLoaded', () => {
    const ui = new UI()
    const products = new Products()
        //get all products
    products.getProducts().then(data => console.log(data))

})

这是我的json：

{
  "items": [
    {
      "sys": { "id": "1" },
      "fields": {
        "title": "queen panel bed",
        "price": 10.99,
        "image": { "fields": { "file": { "url": "./images/product-1.jpeg" } } }
      }
    },
    {
      "sys": { "id": "2" },
      "fields": {
        "title": "king panel bed",
        "price": 12.99,
        "image": { "fields": { "file": { "url": "./images/product-2.jpeg" } } }
      }
    },
    {
      "sys": { "id": "3" },
      "fields": {
        "title": "single panel bed",
        "price": 12.99,
        "image": { "fields": { "file": { "url": "./images/product-3.jpeg" } } }
      }
    },
    {
      "sys": { "id": "4" },
      "fields": {
        "title": "twin panel bed",
        "price": 22.99,
        "image": { "fields": { "file": { "url": "./images/product-4.jpeg" } } }
      }
    },
    {
      "sys": { "id": "5" },
      "fields": {
        "title": "fridge",
        "price": 88.99,
        "image": { "fields": { "file": { "url": "./images/product-5.jpeg" } } }
      }
    },
    {
      "sys": { "id": "6" },
      "fields": {
        "title": "dresser",
        "price": 32.99,
        "image": { "fields": { "file": { "url": "./images/product-6.jpeg" } } }
      }
    },
    {
      "sys": { "id": "7" },
      "fields": {
        "title": "couch",
        "price": 45.99,
        "image": { "fields": { "file": { "url": "./images/product-7.jpeg" } } }
      }
    },
    {
      "sys": { "id": "8" },
      "fields": {
        "title": "table",
        "price": 33.99,
        "image": { "fields": { "file": { "url": "./images/product-8.jpeg" } } }
      }
    }
  ]
}

这是我的html：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet"  href="style.css">
    <link rel="stylesheet"  href="/css/all.min.css">
</head>
<body>
<nav class="navbar">
    <div class="navbar-center">
        <span class="nav-icon">
            <i class="fas fa-bars"></i>
        </span>
        <img src="images/logo.svg" alt="">
        <div class="cart-btn">
        <span class="nav-icon">
            <i class="fas fa-cart-plus"></i>    
        </span>
        <div class="cart-items">0</div>
        </div>      
    </div>  
</nav>
<header class="hero">
    <div class="banner">
        <h1 class="banner-title">furniture collection</h1>
        <button class="banner-btn">shop now</button>
    </div>
</header>
<section class="products">
    <div class="section-title">
        <h2>Our Products</h2>
    </div>
    <div class="products-center">
    <!--single product-->
    <article>
        <div class="img-container">
            <img src="images/product-1.jpeg" alt="" class="product-img">
            <button class="bag-btn" data-id="1">
                <i class="fas fa-shopping-cart"></i>add to bag
            </button>
        </div>
        <h3>Queen bed</h3>
        <h4>$16</h4>
    </article>
    <!--single product-->
    <article>
        <div class="img-container">
            <img src="images/product-1.jpeg" alt="" class="product-img">
            <button class="bag-btn" data-id="1">
                <i class="fas fa-shopping-cart"></i>add to bag
            </button>
        </div>
        <h3>Queen bed</h3>
        <h4>$16</h4>
    </article>

    </div>

</section>

<!--cart-->
    <div class="cart-overlay">
        <div class="cart">
            <span class="close-cart">
                <i class="fas fa-window-close"></i>
            </span>
            <h2>your cart</h2>
                <div class="cart-content">
                <!--cart-item-->
                    <div class="cart-item">
                        <img src="images/product-1.jpeg" alt="">
                        <div>
                            <h4>queen bed</h4>
                            <h5>$9.00</h5>
                            <span class="remove-item">remove</span>
                        </div>
                        <div>
                            <i class="fas fa-chevron-up"></i>
                            <p class="item-amount">1</p>
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>

                <!--end of cart item-->

                </div>
                <div class="cart-footer">
                    <h3>your total: $ <span class="cart-total">0</span></h3>
                    <button class="clear-cart banner-btn">clear cart</button>
                </div>
        </div>

<!--end of cart-->
    </div>
    <script src="cart.js"></script>

</body>
</html>

JSON JavaScript Fetch destructuring

来源：https://stackoverflow.com/questions/68333735/why-cant-i-fetch-my-my-items-from-my-json

3条答案

按热度按时间

sc4hvdpw1#

我想你的 return products 线路在错误的地方。
目前，它是无法到达的，因为它跟随着另一个 return 在您的呼叫中声明 products.map(...) . 试着把它移到呼叫之外 products.map(...) :

try {
            let result = await fetch('products.json')
            let data = await result.json()
            let products = data.items;
            products = products.map(item => {
                const { title, price } = item.fields;
                const { id } = item.sys;
                const image = item.fields.image.fields.file.url;
                return {
                    title,
                    price,
                    id,
                    image
                }
            });

            // Moved outside call to products.map(...).
            return products

        } catch (error) {
            console.log(error)
        }

赞(0）回复(0）举报 2021-09-13

mitkmikd2#

/*  1. first add the url to the requested json file */
let requestURL = 'products.json';

/* 
    2. To create a request, we need to create a new request object instance from the XMLHttpRequest constructor,
 using the new keyword

* /

let request = new XMLHttpRequest();

/*
    3. Now we need to open the request using the open() method. Add the following line

* /

request.open('GET', requestURL);

/*
    4. set the response to json so that XHR knows that the server will be returning JSON */
request.responseType = 'json';
request.send();

/*
    5. Once the json is load , get the response 

* /

request.onload = function() {
    // get the response 
    const response = request.response;
    const items    = response.items; //contains the array of objects
    console.log(items)

    /* use your own business logic to display / process the response */
}

赞(0）回复(0）举报 2021-09-13

zsohkypk3#

做这样的事情，会得到想要的结果。

products = products.map(item => {
     const {
       title,
       price
     } = item.fields;
     const {
       id
     } = item.sys;
     const image = item.fields.image.fields.file.url;
     return {
       id,
       image,
       price,
       title
     }
   })
   return { products }; // replace your return as object

赞(0）回复(0）举报 2021-09-13

我来回答

为什么我不能从json获取我的项目？

3条答案

相关问题

热门标签

最新问答