Javascript 如何解析JSON文件以在html表格单元格中显示其元素_Javascript

Javascript 如何解析JSON文件以在html表格单元格中显示其元素

javascript

Javascript 如何解析JSON文件以在html表格单元格中显示其元素,javascript,Javascript,我正在尝试构建一个仪表板，它是一个包含多个列和行的表。我有一个由后端团队提供的URL，其中包含JSON数据。现在，我必须从该URL读取数据，并将其显示在HTML表的单元格中我必须使用一种称为异步调用的方法，以便在表中显示来自数据库的最新数据。我试着遵循他使用JSON文件的方式，我也试着使用JSON文件。但是，我的console.log中没有任何与他不同的东西。我是javascript新手，不知道该怎么做。我知道我必须循环文件并更改每个单元格的内部HTML的基本概念，但我无法开始一行的HTML

我正在尝试构建一个仪表板，它是一个包含多个列和行的表。我有一个由后端团队提供的URL，其中包含JSON数据。现在，我必须从该URL读取数据，并将其显示在HTML表的单元格中

我必须使用一种称为异步调用的方法，以便在表中显示来自数据库的最新数据。我试着遵循他使用JSON文件的方式，我也试着使用JSON文件。但是，我的console.log中没有任何与他不同的东西。我是javascript新手，不知道该怎么做。我知道我必须循环文件并更改每个单元格的内部HTML的基本概念，但我无法开始

一行的HTML文件如下所示：

<head>

       <link rel="stylesheet" href="index.css">
           <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>

           <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"> 
      </script>

           <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

            <script src="daterange.js" type="text/javascript"></script>

            <script src="get-data.js" type="text/javascript"></script>

    </head>
    <body>
       <br>
       <h1>Demo Request Customer Database</h1>
        <br>
         <div class="">
        <form  class="row" method="post">
            <input type="text" id="myinput" placeholder="Search by email..." name="" value="">

        <input type="text" name="daterange" id="date-range" value="01/01/2018 - 01/15/2018" />

                 <input type="submit" name="" value="Save changes" id="save_button">

        </form>
        </div>
        <table cellpadding="5" style="width:100%;" id="mytable" class="fixed">



    <thead>
               <tr class="header" id="header" style="color:#ffffff">
                 <th class="tab_header">Email</th>
                 <th class="tab_header">Name</th>
                 <th class="tab_header">Position</th>
                </tr></thead>
<tbody id="body_rows">
                </tbody>



      </table>

        <br>


    </body>
</html>

example.JSON文件是：

    [
      {
            "email": "abhinav@musiio.com",
             "name": "Abhinav",
             "position":"software eng"

        },
    ]

我基本上希望从后端团队提供给我的URL中捕获JSON数据。但目前，我正在尝试在example.JSON文件的HTML行中显示JSON数据。

首先，您应该使用and，而不是在您的

我会给你一个简单的例子，这样你可以做类似的事情：

让数据=[{ 电邮：abhinav@musiio.com, 姓名：阿比纳夫，职位：软件工程师 }, ]; 设htmlString=；对于let行数据{ htmlString=； htmlString+=`${row.email}`； htmlString+=`${row.name}`； htmlString+=`${row.position}`； htmlString+=； } getElementById'body_rows'。innerHTML=htmlString；电子邮件名称位置

使用fetchapi从端点加载数据，并循环内容以输出结果。啊，fetchapi，我不知道如何使用它。你有代码片段吗。另外，一旦我从FetchAPI获取数据，我可以将其存储在一个文件中，然后在该文件上循环以html显示它吗？谢谢，伙计！有几点：1我收到一条关于let和of的警告，并告诉我使用es6version。2变量数据和javascript在同一个文件中，对吗？如果是，那么我以后如何从URL读取JSON数据并将其放在这里？此外，html表中未显示任何数据：Ok解决了警告，但仍不显示数据。我在控制台中遇到此错误：UncaughtTypeError:无法将属性“innerHTML”设置为null。我哪里出错了。我删除了表_行中要由JAvascript@user2702225你一定有标签，而不是我做的。。还是一样的问题：我看不出你的代码为什么不能工作。。。这很简单。。。我想知道为什么会有这种奇怪的行为

    [
      {
            "email": "abhinav@musiio.com",
             "name": "Abhinav",
             "position":"software eng"

        },
    ]