将 JSON 移动到 Python 时处理 space 的问题

Question

我是高中数学老师，正在自学编程。如果我没有正确表达其中的某些内容，请提前致歉。

我正在从用户那里收集 CSV 数据，并试图通过 Python 将其移动到 SQLite 数据库。

一切正常，除非其中一个值包含 space。

例如，这是我的 JavaScript 对象的一部分：

Firstname: "Bruce"
Grade: ""
Lastname: "Wayne Jr"
Nickname: ""

这里是应用JSON.stringify后对应的片段：

{"Firstname":"Bruce","Lastname":"Wayne Jr","Nickname":"","Grade":""}

然后通过表单将其传递给 Python。在 Python 中，我使用：

data = request.form.get("data")
print(data)
data2 = json.loads(data)
print(data2)

我收到一堆错误消息，结尾为：json.decoder.JSONDecodeError: Unterminated string starting at: line 1 column 250 (char 249)，第一个打印的日志给出：

[{"Firstname":"Jason","Lastname":"Bourne","Nickname":"","Grade":"10"},
 {"Firstname":"Steve","Lastname":"McGarret","Nickname":"5-0","Grade":""},
 {"Firstname":"Danny","Lastname":"Williams","Nickname":"Dano","Grade":"12"},
 {"Firstname":"Bruce","Lastname":"Wayne

所以它似乎在 "Wayne Jr" 中的 space 上中断了。

我使用在这里学到的知识来构建基础知识：
https://bl.ocks.org/HarryStevens/0ce529b9b5e4ea17f8db25324423818f

我相信这个 JavaScript 函数正在解析用户数据：

function changeDataFromField(cb){
   var arr = [];
   $('#enter-data-field').val().replace( /\n/g, "^^^xyz" ).split( "^^^xyz" ).forEach(function(d){
     arr.push(d.replace( /\t/g, "^^^xyz" ).split( "^^^xyz" ))
   });
   cb(csvToJson(arr));
 }

根据评论更新：
我正在使用 POST 请求。没有 AJAX.

实际上有 2 个用户输入。他们可以在其中粘贴 CSV 数据的文本框和文件上传选项。这是 JavaScript.

的更多内容

// Use the HTML5 File API to read the CSV
  function changeDataFromUpload(evt, cb){
    if (!browserSupportFileUpload()) {
      console.error("The File APIs are not fully supported in this browser!");
    } else {
      var data = null;
      var file = evt.target.files[0];
      var fileName = file.name;
      $("#filename").html(fileName);

      if (file !== "") {
        var reader = new FileReader();

        reader.onload = function(event) {
          var csvData = event.target.result;
          var parsed = Papa.parse(csvData);
          cb(csvToJson(parsed.data));
        };
        reader.onerror = function() {
          console.error("Unable to read " + file.fileName);
        };
      }

      reader.readAsText(file);
      $("#update-data-from-file")[0].value = "";
    }
  }

  // Method that checks that the browser supports the HTML5 File API
  function browserSupportFileUpload() {
    var isCompatible = false;
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      isCompatible = true;
    }
    return isCompatible;
  }

  // Parse the CSV input into JSON
  function csvToJson(data) {
    var cols = ["Firstname","Lastname","Nickname","Grade"];
    var out = [];
    for (var i = 0; i < data.length; i++){
      var obj = {};
      var row = data[i];
      cols.forEach(function(col, index){
        if (row[index]) {
          obj[col] = row[index];
        }
        else {
          obj[col] = "";
        }
      });
      out.push(obj);
    }
    return out;
  }

  //  Produces table for user to check appearance of data and button to complete upload
  function makeTable(data) {
    console.log(data);
    send_data = JSON.stringify(data);
    console.log(send_data);
      var table_data = '<table style="table-layout: fixed; width: 100%" class="table table-striped">';
      table_data += '<th>First name</th><th>Last name</th><th>Nickname</th><th>Grade</th>'
      for(var count = 0; count < data.length; count++) {
        table_data += '<tr>';
            table_data += '<td>'+data[count]['Firstname']+'</td>';
            table_data += '<td>'+data[count]['Lastname']+'</td>';
            table_data += '<td>'+data[count]['Nickname']+'</td>';
            table_data += '<td>'+data[count]['Grade']+'</td>';
        table_data += '</tr>';
        }
      table_data += '</table>';
      table_data += '<p><form action="/uploaded" method="post">';
      table_data += 'Does the data look OK? If so, click to upload.  ';
      table_data += '<button class="btn btn-primary" type="submit">Upload</button><p>';
      table_data += '<input type="hidden" id="data" name="data" value='+send_data+'>';
      table_data += '<input type="hidden" name="class_id" value="{{ class_id }}">';
      table_data += '</form>';
      table_data += 'Otherwise, fix the file and reload.';
      document.getElementById("result_table").innerHTML = table_data;
  }
  </script>

Answer 1

JavaScript可以简单很多。如果改为执行以下操作，JSON 被切断是否有任何问题？

document.getElementById('update-data-from-file').addEventListener('change', function(evt){
  var file = evt.target.files[0];
  document.getElementById('filename').innerText = file.name

  if (file === "")
    return;

  Papa.parse(file, {
    header: true,
    skipEmptyLines: true,
    complete: function(results) {
      json = results.data
      console.log(json)
      // Do stuff with the json here
    }
  });

  document.getElementById('update-data-from-file').value = ''
})

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.0.2/papaparse.min.js"></script>
  </head>
  <body>

    <label>
      Upload CSV
      <input type="file" name="File Upload" id="update-data-from-file" accept=".csv" />
    </label>
    <div id="filename">No file chosen</div>
    
  </body>
</html>

Answer 2

问题是我发送 JSON 字符串的方式 -- 它没有用引号引起来，所以只要值中有 space，就会出现问题。

修复它：我从上面的答案中得到了 JSON，然后在通过 POST 请求发送 JSON 字符串之前，我将它括在引号中。

send_data = JSON.stringify(json);
send_data = "'" + send_data + "'";

我现在可以发送包含 space 的值。

将 JSON 移动到 Python 时处理 space 的问题

Problem dealing with a space when moving JSON to Python

python

json

stringify