Unexpected identifier error for shieldui export to excel

Question

I need to export all my datas to excel sheet. I have below columns in my grid

<table id="exportTable" class="table table-responsive  table-condensed table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>User ID</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>   
        <tr>
          <td>1</td>
          <td>Vino</td>
          <td>vino123</td>
          <td>vino@gmail.com</td>
        </tr>
      </tbody>
 </table>

I used below code to export to excel sheet.

<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/jszip.min.js"></script>

<script type="text/javascript">
  jQuery(function ($) {
    $("#exportButton").click(function () {
        // parse the HTML table element having an id=exportTable
        var dataSource = shield.DataSource.create({
            data: "#exportTable",
            schema: {
                type: "table",
                fields: {
                    Name: { type: String },
                    User ID: { type: String },
                    Email: { type: String }    
                }
            }
        });

        // when parsing is done, export the data to Excel
        dataSource.read().then(function (data) {
            new shield.exp.OOXMLWorkbook({
                author: "PrepBootstrap",
                worksheets: [
                    {
                        name: "PrepBootstrap Table",
                        rows: [
                            {
                                cells: [
                                    {
                                        style: {
                                            bold: true
                                        },
                                        type: String,
                                        value: "Name"
                                    },
                                    {
                                        style: {
                                            bold: true
                                        },
                                        type: String,
                                        value: "User ID"
                                    },
                                    {
                                        style: {
                                            bold: true
                                        },
                                        type: String,
                                        value: "Email"
                                    }
                                ]
                            }
                        ].concat($.map(data, function(item) {
                            return {
                                cells: [
                                    { type: String, value: item.Name },
                                    { type: String, value: item.User ID },
                                    { type: String, value: item.Email }

                                ]
                            };
                        }))
                    }
                ]
            }).saveAs({
                fileName: "Processhistoryexcel"
            });
        });
    });
});

Its Working when the column name dont have space. For example i have one column User ID its gives error when i give User ID but its working when it have no space like UserID .

Its give me error in fields and cells mentioning place.

Answer 1

For your User ID key it looks like the white space is causing the error

Uncaught SyntaxError: Unexpected identifier

You can resolve this by surrounding the User ID key in the fields object with quotes like

"User ID": { type: String },

then in your cells array you would access it using bracket notation since there is now white space in the key

{ type: String, value: item["User ID"] },

Its also worth mentioning why you need to use bracket notation:

However, any property name that is not a valid JavaScript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation

Source: MDN Working with objects