如何将数据从JSON加载到Bootstrap表中？

本文介绍了如何使用给定的JSON数据创建Bootstrap表。可以通过导入数据或用JavaScript表示数据来检索数据。下面给出了两种执行此操作的方法。

在不导入任何文件的情况下显示JSON数据：可以使用JavaScript表示必须读取的JSON文件。然后可以将其提供给Bootstrap表来表示数据。

例子：

HTML

  
  
  
    load data from json file 
    into a bootstrap table
  
  
  
  
  
  
  


  
    
      GeeksforGeeks
    
    
      A computer science portal for geeks
    
      
        
          
            
            
            
          
        
      
              
                Employee ID
              
            
              
                Employee Name 
              
            
              
                Joining Date 
              
            
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    $(document).ready(function () {
  
      // Use the given data to create 
      // the table and display it
      $('table').bootstrapTable({
        data: mydata
      });
    });
  
    // Specify the JSON data to be displayed
    var mydata =
      [
        {
          "id": "24323",
          "name": "Mark Smith",
          "date": "25/5/2020"
        },
        {
          "id": "24564",
          "name": "Caitlin MacDonald",
          "date": "17/5/2020"
        },
        {
          "id": "24345",
          "name": "Jessie Johnson ",
          "date": "1/5/2020"
        },
        {
          "id": "24874",
          "name": "Alen Williams",
          "date": "14/5/2020"
        },
        {
          "id": "24323",
          "name": "Maria Garcia ",
          "date": "13/5/2020"
        }
      ];
  

输出：

从文件导入后显示JSON数据：要显示的JSON数据存储在导入的JavaScript文件的本地文件夹中。然后可以将此导入的数据提供给Bootstrap表以表示数据。 ES6特征反引号(“)可用于多行字符串值插值。

例子：

• JSON数据：以下示例中存储的JSON数据：

  Java脚本

  // Contents for test.js
  // Represents JSON of the data
    
  var da = `[
      { "id": "24323", 
        "name": "Mark Smith", 
        "date": "25/5/2020" },
      { "id": "24564",
        "name": "Caitlin MacDonald", 
        "date": "17/5/2020" }
  ]`;
  

• 程序：将数据从JSON加载到Bootstrap表中

  的HTML

    
    
    
      load data from json file
      into a bootstrap table
    
    
    
    
    
    
    
  
  
    
      
        GeeksforGeeks
      
      
        A computer science portal for geeks
      
        
          
            
              
              
              
            
          
        
                
                  Employee ID
                
              
                
                  Employee Name 
                
              
                 
                  Joining Date 
                
              
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      $(document).ready(function () {
    
        // Use the given data to create 
        // the table and display it
        $('table').bootstrapTable({
          data: mydata
        });
      });
    
      // Parse the imported data as JSON
      // and store it
      var mydata = JSON.parse(da)
    

• 输出：