Question

您好我是jquery的新手并且我有很强的HTML javascript和angular技能，所以我知道如何在json中创建一个带响应的表。

我有这个JSON，我想用它制作一个HTML表格，请一些人帮忙吗

[
    {
        "id": "5a6f8f9eafb2b40824cfde8e",
        "prodName": "Dummy Product 1",
        "prodDesc": "The Fresh Dummy Product in The world part 1",
        "prodPrice": 100,
        "prodImage": "https://dummyimage.com/600x400/000/fff",
        "prodManufacturer": null
    },
    {
        "id": "5a7031b8afb2b40824cfde8f",
        "prodName": "Dummy Product 2",
        "prodDesc": "The Fresh Dummy Product in The world part 2",
        "prodPrice": 150,
        "prodImage": "https://dummyimage.com/600x400/000/fff",
        "prodManufacturer": null
    },
    {
        "id": "5a7031c5afb2b40824cfde90",
        "prodName": "Dummy Product 3",
        "prodDesc": "The Fresh Dummy Product in The world part 3",
        "prodPrice": 250,
        "prodImage": "https://dummyimage.com/600x400/000/fff",
        "prodManufacturer": null
    },
    {
        "id": "5a7031d4afb2b40824cfde91",
        "prodName": "Dummy Product 4",
        "prodDesc": "The Fresh Dummy Product in The world part 4",
        "prodPrice": 300,
        "prodImage": "https://dummyimage.com/600x400/000/fff",
        "prodManufacturer": null
    },
    {
        "id": "5a7031e9afb2b40824cfde92",
        "prodName": "Dummy Product 5",
        "prodDesc": "The Fresh Dummy Product in The world part 5",
        "prodPrice": 330,
        "prodImage": "https://dummyimage.com/600x400/000/fff",
        "prodManufacturer": null
    },
    {
        "id": "5a7031f9afb2b40824cfde93",
        "prodName": "Dummy Product 6",
        "prodDesc": "The Fresh Dummy Product in The world part 6",
        "prodPrice": 390,
        "prodImage": "https://dummyimage.com/600x400/000/fff",
        "prodManufacturer": null
    },
    {
        "id": "5a703208afb2b40824cfde94",
        "prodName": "Dummy Product 7",
        "prodDesc": "The Fresh Dummy Product in The world part 7",
        "prodPrice": 400,
        "prodImage": "https://dummyimage.com/600x400/000/fff",
        "prodManufacturer": null
    },
    {
        "id": "5a7032ebafb2b40824cfde95",
        "prodName": "Dummy Product 8",
        "prodDesc": "The Fresh Dummy Product in The world part 8",
        "prodPrice": 490,
        "prodImage": "https://dummyimage.com/600x400/000/fff",
        "prodManufacturer": null
    },
    {
        "id": "5a703a52afb2b40824cfde96",
        "prodName": "Orio-biscuits",
        "prodDesc": "The fresh milk biscuits for children",
        "prodPrice": 30,
        "prodImage": "https://dummyimage.com/600x400/000/fff",
        "prodManufacturer": null
    },
    {
        "id": "5a7048acd5a5e430d8362671",
        "prodName": "Orio-biscuits-2",
        "prodDesc": "The fresh milk biscuits for children",
        "prodPrice": 30,
        "prodImage": "https://dummyimage.com/600x400/000/fff",
        "prodManufacturer": "Nestle"
    },
    {
        "id": "5a75f0e4d5a5e430585908d6",
        "prodName": "Orio-biscuits-3",
        "prodDesc": "The fresh milk biscuits for children",
        "prodPrice": 30,
        "prodImage": "https://dummyimage.com/600x400/000/fff",
        "prodManufacturer": "Nestle"
    },
    {
        "id": "5a75fce5d5a5e41f6067ede7",
        "prodName": "Orio-biscuits-3",
        "prodDesc": "The fresh milk biscuits for children",
        "prodPrice": 30,
        "prodImage": null,
        "prodManufacturer": "Nestle"
    },
    {
        "id": "5a7615f2d5a5e42f8463c1c3",
        "prodName": "parle",
        "prodDesc": "The fresh milk biscuits for children",
        "prodPrice": 30,
        "prodImage": null,
        "prodManufacturer": "biscuits"
    },
    {
        "id": "5a76ee9ad5a5e45884569f26",
        "prodName": "parle_chickli",
        "prodDesc": "The fresh milk biscuits for children",
        "prodPrice": 30,
        "prodImage": null,
        "prodManufacturer": "biscuits"
    },
    {
        "id": "5a775728afb2b451708d0254",
        "prodName": "helo",
        "prodDesc": "check me",
        "prodPrice": 19,
        "prodImage": null,
        "prodManufacturer": "test_one1"
    },
    {
        "id": "5a77581cafb2b451708d0255",
        "prodName": "skype",
        "prodDesc": "comm IDE",
        "prodPrice": 180,
        "prodImage": null,
        "prodManufacturer": "microsoft"
    }
]

请一些人帮我，我怎样才能在jquery中形成一个表或做出反应

非常感谢帮助。

Answer 1

对于这种渲染，首先要考虑到你将如何为json文件提供服务是通过模块捆绑器（Webpack）在组件中使用它 import jsonObj from 'path_to_json_file'; 或你可以通过这个名为json-server npm i -s json-server的npm包来提供它。阅读文档here 您可以通过运行以下json-server命令来运行json-server： json-server --watch path_to_your_json_file

以任何你需要的方式获得json之后您需要发出fetch请求，这是从您的服务获取数据的“HTTP”库然后编写一个反应渲染函数，如下所示：

`

import React from 'react'; import PropTypes from 'prop-types'; import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './Carousel.css'; import Thumbnail from '../Thumbnail'; class Carousel extends React.Component { static propTypes = { titles: PropTypes.string.isRequired, }; render() { const propsTitles = this.props.titles && this.props.titles.titles.length ? this.props.titles.titles : []; if (propsTitles.length < 1) return <div>There are no items here</div>; return ( <div> {propsTitles.map(title => ( <div className={s.root}> <div className={s.container}>{title.title}</div> <div className={s.container}>{title.year}</div> <div className={s.bannerThumbnail}> <Thumbnail thumbItems={title.thumbnails} /> </div> </div> ))} </div> ); } } export default withStyles(s)(Carousel);

`

同样对于渲染组件，您需要查看JSX反应模板，您可以通过.map函数迭代您的对象

如何使用JSON制作动态表？

1 个答案: