jquery 我应该如何在JSON中表示表格数据?

ivqmmu1c  于 2022-11-03  发布在  jQuery
关注(0)|答案(6)|浏览(192)

我正在编写一个API,用于通过JSON从JDBC连接的Java Servlet中检索数据。我选择使用JSON是因为我们希望在浏览器中对数据进行排序和其他操作,并且我们将跨域访问数据。
因为我基本上是在JavaScript中执行SQL查询,所以返回的数据本质上是表格式的。我开始写这个代码是为了让你得到一个列标签列表,然后是值数组,例如:

{
  "columns": [
    "given_name",
    "surname",
  ],
  "results": [
    [
      "Joe",
      "Schmoe"
    ],
    [
      "Jane",
      "Doe"
    ]
  ]
}

但是,当我开始编写JavaScript来处理返回的数据时,我想知道输出带有键/值对的结果是否更好,例如:

{
  "results": [
    {
      "given_name": "Joe",
      "surname": "Schmoe"
    },
    {
      "given_name": "Jane",
      "surname" : "Doe"
    }
  ]
}

如果你要返回很多结果,那就是很多重复的文本,但是我们要传输的是gzip文件,所以我不太关心带宽。
基本上,我是否应该设计它,以便使用

$.getJSON(query, function(data) {
  var columns = data.columns;
  var results = data.results;
  $.each(results, function(key, row) {
    console.log(row[columns.indexOf('surname')]);
  });
});

或者更漂亮的

$.getJSON(query, function(data) {
  var results = data.results;
  $.each(results, function(key, row) {
    console.log(row.surname);
  });
});


从本质上讲,我想知道对性能的潜在影响是否证明了后一种选择的更简洁的语法是合理的。

跟进

我确实以两种方式实现了它和分析。分析是一个很好的主意!性能上的差别很小。数据传输大小的差别很大,但是使用Gzip压缩,两种格式之间的差异在非常大和非常小的数据集之间的差异降低到5-6%。所以我选择了更漂亮的实现。对于这个特定的应用程序,我可以预期所有客户机都支持Gzip/Deflate,因此大小并不重要,客户机和服务器上的计算复杂性也足够相似,所以大小也不重要。
对于任何感兴趣的人,这里是my data with graphs!。

q3aa0525

q3aa05251#

对两者进行分析。然后进行优化。

aoyhnmkz

aoyhnmkz2#

综合其他答案:
1.您的Wire格式不必与内存中的格式相同。
1.配置文件哪一个更好-看看它是否有区别。
1.通常从简单开始比较好。
此外:

  • 如果你只有一页结果,而且用户很少,那么第二种格式 * 可能 * 不会比第一种格式差。
  • 如果您的数据非常稀疏,则第二种格式 * 可能 * 会更好。
  • 如果您要发送1000个或1000行数据,并且您有数百万用户,那么您发送的数据大小可能会开始起作用,也许第一种格式 * 可能 * 会有所帮助。
  • 您不能保证所有的用户代理都支持gzip / deflate,所以请记住这一点。
3bygqnnd

3bygqnnd3#

这是另一个JSON结构,我从中得到了非常好的结果:

{
    "recordCount": 2,
    "data": {
        "Id": [1, 2],
        "Title": ["First record", "Second record"],
        "Value": [18192, 18176]
    }
}

遍历所有数据:

for (var i = 0; i < recordSet.recordCount; ++i) {
    console.log("Record " + i.toString() + ":");
    for (var field in recordSet.data)
        console.log("\t" + field + ": " + recordSet.data[field][i].toString());
}
ibrsph3r

ibrsph3r4#

您不必将代码绑定到更紧凑但也更麻烦的格式。只需编写一个简单的JS适配器来检查返回的结构中是否存在columns。如果缺少columns,则处理的是一个普通的对象数组。如果存在columns,则可以轻松地将麻烦的格式Map到更方便的格式。

b09cbbtk

b09cbbtk5#

FWIW我会选择第二个选项,正如您所观察到的,它使JavaScript更简洁,也更容易让人阅读和理解。在我看来,可读性胜过选项1所带来的任何性能提升。
我还设想,如果有一天您要添加更多的列或更改列的顺序,使用第一个选项时,您可能必须重写大量JavaScript,因为您将处理响应中数据的位置。

ojsjcaue

ojsjcaue6#

您始终可以将第一个选项转换为其JSON表示形式

const tabularDataToJSON = (rows: string[][], columns: { value: string }[]) => {
return rows.map(function (row) {
    const record: Record<string, string> = {}
    columns.forEach((col, index) => {
        record[col.value] = row[index]
    })
    return record
})}

const json = tabularDataToJSON(results, columns)

相关问题