首页 > 解决方案 > 使用 Javascript 从嵌套的 JSON 数据中提取特定字段的所有行

问题描述

我正在尝试获取用户在 Kendo 电子表格中输入的数据。目前我能够获取电子表格的 JSON 数据。但是 JSON 还包含其他数据,例如样式属性。我只想要单元格中的值或文本。

 var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
                            var sheet = spreadsheet.sheetByIndex(0);
                            var data = sheet.toJSON();

                            var rowCount = data.rows.length;
                            var jsonArray = [];
                            debugger;

var jsondata = JSON.stringify(data, null, 2)

for (var i = 0; i < rowCount ; i++) {


            jsonArray.push(JSON.stringify(data.rows[i].cells, null, 2));
                            }

这将使 JSON 为

{
   "name":"Members",
   "rows":[
      {
         "index":0,
         "cells":[
            {
               "value":"Name",
               "color":"#000000",
               "enable":false,
               "index":0
            },
            {
               "value":"ID",
               "color":"#000000",
               "enable":false,
               "index":1
            },
            {
               "value":"Total",
               "color":"#000000",
               "enable":false,
               "index":2
            },
            {
               "value":"Dec2019_Data",
               "index":3
            },
            {
               "value":"Jan2020_Data",
               "index":4
            }
         ]
      },
      {
         "index":1,
         "cells":[
            {
               "value":"NewMember",
               "color":"#000000",
               "enable":false,
               "index":0
            },
            {
               "value":240,
               "color":"#000000",
               "enable":false,
               "index":1
            },
            {
               "value":200,
               "color":"#000000",
               "enable":false,
               "index":2
            },
            {
               "value":100,
               "color":"#000000",
               "enable":false,
               "index":3
            },
            {
               "value":100,
               "color":"#000000",
               "enable":false,
               "index":4
            }
         ]
      },
      {
         "index":2,
         "cells":[
            {
               "value":"Timo (718)",
               "color":"#000000",
               "enable":false,
               "index":0
            },
            {
               "value":150,
               "color":"#000000",
               "enable":false,
               "index":1
            },
            {
               "value":400,
               "color":"#000000",
               "enable":false,
               "index":2
            },
            {
               "value":300,
               "color":"#000000",
               "enable":false,
               "index":3
            },
            {
               "value":100,
               "color":"#000000",
               "enable":false,
               "index":4
            }
         ]
      },
      {
         "index":3,
         "cells":[
            {
               "color":"#000000",
               "enable":false,
               "index":0
            },
            {
               "color":"#000000",
               "enable":false,
               "index":1
            },
            {
               "color":"#000000",
               "enable":false,
               "index":2
            },
            {
               "color":"#000000",
               "enable":false,
               "index":3
            },
            {
               "color":"#000000",
               "enable":false,
               "index":4
            }
         ]
      }
   ]
}

I want to exclude the attributes like "color":"#000000","enable":false etc.

I can get only the values by looping through the cells collection like this

data.rows[i].cells[0]["value"].

I wanted to know if there is a better way to do this.

At the end i want the cells to push only the "value" and "index" and exclude "enable","color" etc. 

"rows":[
      {
         "index":0,
         "cells":[
            {
               "value":"Name",         
               "index":0
            },
            {
               "value":"ID",             
               "index":1
            },
            {
               "value":"Total",        
               "index":2
            },
            {
               "value":"Dec2019_Data",
               "index":3
            },
            {
               "value":"Jan2020_Data",
               "index":4
            }
         ]
      }

标签: json

解决方案


希望这个示例 dojo 是您所追求的:https ://dojo.telerik.com/OxatiSax

我所做的就是获取您的 json 对象,然后使用一些排序和映射,我已为您按行顺序放置数据,然后创建了一个单元格数据数组数组:

 [
    {
        "cells": [
            "Invoice #52 - 06/23/2015"
        ]
    },
    {
        "cells": [
            "ID",
            "Product",
            "Quantity",
            "Price",
            "Tax",
            "Amount",
            null
        ]
    },
    {
        "cells": [
            216321,
            "Calzone",
            1,
            12.39,
            2.478,
            14.868,
            null
        ]
    }]

所以这里发生了很多事情,所以让我解释一下。

一旦你得到“作为 json 对象的工作表”,我首先根据它们的索引对行进行排序:

这是通过以下方式完成的:

data.rows.sort(function(a, b) {
  return a.index - b.index
})

您可以添加一个额外的检查以确保您有一些行,但我暂时跳过了它。所以这个函数将比较行的索引,然后将它们从 1 到 n+1 顺序排序

一旦我们以正确的顺序排列行,我们只对每行的单元格感兴趣。

我们可以使用该map函数来执行此操作,因此我们遍历每一行并检查以确保它们有一个单元格集合,如果有,那么我们cells array使用 map 函数再次将其推送到我们的主数组:

.map((row) => {
      if (row.cells.length > 0) {
        celldata.push({
          cells: row.cells.map((cell) => {
            return cell.value;
          })
        });

所以我们为cells属性分配一个数组,cell.value然后将其推送到我们的celldata数组中。

如果您只是想要单元格值而不管您想要什么行,那么您可以将单元格直接推送到数组上,并在单个数组中拥有一个巨大的值集合。

如果您需要这方面的任何进一步信息,请告诉我,我会相应地更新答案。

编辑:

对于 IE 11 支持,将arrow函数更改为正确的函数,如下所示:

.map((row) => {
          if (row.cells.length > 0) {
            celldata.push({
              cells: row.cells.map((cell) => {
                return cell.value;
              })
            });

.map(function(row)  {
          if (row.cells.length > 0) {
            celldata.push({
              cells: row.cells.map(function(cell)  {
                return cell.value;
              })
            });

推荐阅读