如何用 jquery 读取 JSON？ JSON 有 data='[]';

Question

你好吗？

我有以下问题。在大学里，他们给了我一个 JSON 文件，但它的内容很特别。我必须用这个 JSON 文件填写表格，我马上分享它们。

json:

data='[{"ID":"36","name":"Finland","population":"5300000","date":"August 21 2011","percentage":"2.05%"}]';

尝试使用以下代码读取它，但它会抛出错误，因为它不接受 data = '[]';

HTML JQUERY

        //lee el archivo json
        $.getJSON("data/countries.json",function(data){
            //variable contructora de la tabla
            var employee_data = '';
            //obtener valores en bace a la llave
            $.each(data,function(key,value){
                employee_data += '<tr>';
                employee_data += '<td>'+value.ID+'</td>';
                employee_data += '<td><img src="imagenes/'+value.name+'" alt="'+value.name+'"></td>';
                employee_data += '<td>'+value.name+'</td>';
                employee_data += '<td>'+value.date+'</td>';
                employee_data += '<td>'+value.percentage+'</td>';
                employee_data += '</tr>';
            });
            //muestra el resultado de la tabla creada
            $('#tab-paises').append(employee_data);
        },'html').done(function(){
            
        }).fail(function(e){
            console.log("error");
            console.log(e)
        }).always(function(){
            
        });
    });

如何读取这些类型的文件？

Answer 1

谢谢，我已经解决了。使用两个代码的一部分。最后的结果是成功的。我分享代码。

$.ajax({
        url: "data/countries.json",
        dataType: "text",
        success: function(data) {
            eval(data);
            console.log(JSON.parse(data))
            data = JSON.parse(data);
            var row;
            $.each(data, function(i, r) {
                row = $("<tr>");
                $("<td>").html(r.ID).appendTo(row);
                $("<td>").html($("<img>", {
                  src: "imagenes/" + r.name,
                  alt: r.name
                })).appendTo(row);
                $("<td>").html(r.name).appendTo(row);
                $("<td>").html(r.date).appendTo(row);
                $("<td>").html(r.percentage).appendTo(row);
                $('#tab-paises').append(row);
              });
        },
        error: function(e) {
          console.log("error");
          console.log(e)
        }
      });

Answer 2

考虑以下示例。

$(function() {
  // Test Code
  var testData = "data='[{\"ID\":\"36\",\"name\":\"Finland\",\"population\":\"5300000\",\"date\":\"August 21 2011\",\"percentage\":\"2.05%\"}]';";
  var regex = /data='(.*)';/;
  var myData = JSON.parse(testData.replace(regex, "$1"));
  console.log(myData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

您可以使用它来清理文本。一旦输入正确的语法，您就可以解析它。

在这种情况下，您可以考虑使用$.ajax() 与$.getJSON()。

  $.ajax({
    url: "data/countries.json",
    dataType: "text",
    success: function(data) {
      if (data.indexOf("data=") == 0) {
        data.replace(/data='(.*)';/, "$1");
      }
      data = JSON.parse(data);
      var row;
      $.each(data, function(i, r) {
        row = $("<tr>");
        $("<td>").html(r.ID).appendTo(row);
        $("<td>").html($("<img>", {
          src: "images/" + r.name,
          alt: r.name
        })).appendTo(row);
        $("<td>").html(r.name).appendTo(row);
        $("<td>").html(r.date).appendTo(row);
        $("<td>").html(r.percentage).appendTo(row);
        $('#tab-paises').append(row);
      });
    },
    error: function(e) {
      console.log("error");
      console.log(e)
    });
  });

Answer 3

您拥有的字符串实际上是有效的 Javascript 代码。它确实为变量数据分配了一个 JSON 字符串。因此可以这样处理：

const input = 'data=\'[{"ID":"36","name":"Finland","population":"5300000","date":"August 21 2011","percentage":"2.05%"}]\';';
eval(input);
console.log(JSON.parse(data))

甚至更简单，

data='[{"ID":"36","name":"Finland","population":"5300000","date":"August 21 2011","percentage":"2.05%"}]';
console.log(JSON.parse(data))