使用underscore.js在深层嵌套的JSON

时间:2016-04-19 00:22:36

标签: javascript json underscore.js

我对Javascript很陌生,我刚刚了解了underscore.js。我有一个深度嵌套的JSON对象,我需要使用下划线来查找键/值对,然后我将使用它来填充各种HTML表。如果结构更浅,使用像_.pluck这样的东西会很容易,但我不知道如何遍历前几个嵌套级别(即surveyGDB,table,tablenames)。 JSON对象来自XML,它由多个嵌套结构组成(从不同的数据库表中混淆而成)。

var JSONData = 
"surveyGDB": {
      "filename": "..\\Topo\\SurveyGeoDatabase.gdb",
      "table": {
        "tablename": [
          {
            "#text": "SurveyInfo\n      ",
            "record": {
              "OBJECTID": "1",
              "SiteID": "CBW05583-345970",
              "Watershed": "John Day",
              "VisitType": "Initial visit",
              "SurveyInstrument": "Total Station",
              "ImportDate": "2015-07-22T09:08:42",
              "StreamName": "Duncan Creek",
              "InstrumentModel": "TopCon Magnet v2.5.1",
              "FieldSeason": "2015"
          }
        },
        {
          "#text": "QaQcPoints\n      ",
          "record": [
            {
              "OBJECTID": "1",
              "TIMESTAMP": "2015-07-22T09:18:43",
              "Code": "tp",
              "Count": "357"
            },
            {
              "OBJECTID": "2",
              "TIMESTAMP": "2015-07-22T09:18:43",
              "Code": "tb",
              "Count": "92"
            },
            {
              "OBJECTID": "3",
              "TIMESTAMP": "2015-07-22T09:18:43",
              "Code": "to",
              "Count": "8"
            },
            {
              "OBJECTID": "4",
              "TIMESTAMP": "2015-07-22T09:18:43",
              "Code": "bl",
              "Count": "279"
            },
            {
              "OBJECTID": "5",
              "TIMESTAMP": "2015-07-22T09:18:43",
              "Code": "bf",
              "Count": "18"
            }
          ]
        },
        {
          "#text": "QaQcPolygons\n      ",
          "record": [
            {
              "OBJECTID": "1",
              "TIMESTAMP": "2015-07-22T09:43:08",
              "SurveyExtentCount": "",
              "WaterExtentCount": "",
              "ChannelUnitsCount": "",
              "ChannelUnitsUnique": ""
            },
            {
              "OBJECTID": "2",
              "TIMESTAMP": "2015-07-22T13:35:15",
              "SurveyExtentCount": "1",
              "WaterExtentCount": "1",
              "ChannelUnitsCount": "21",
              "ChannelUnitsUnique": "21"
            }
          ]
        }
      ]
    }
  }
}

例如,我想要' Code'的所有值。在QaQCPoints'表,所以我试过了:

var codes = _.flatten(_.pluck(JSONData.surveyGDB.table.tablename[1].record[0], "Code" ));
console.log(codes);

在控制台中,这将返回一个长度为5但具有空值的数组。 我做错了什么?

我也更愿意搜索' Code'表中的值基于' #text'键值,而不是仅仅使用它在对象中的位置。

2 个答案:

答案 0 :(得分:1)

如果我理解正确,您希望始终在record数组中搜索JSONData.surveyGDB.table.tablename数组以查找某些查询。这意味着您需要根据某些参数查找记录并从找到的记录中返回一些内容。

请注意,record属性有时是一个数组,有时候是一个对象(对于表SurveyInfo),因此我假设您需要考虑这一点。 您可以创建一个小函数来提取数据并处理对象和数组:

function extract(record, prop) {
  if (Array.isArray(record)) { 
    return _.pluck(record, prop);
  } else {
    return record[prop];
  }
}

用法示例:

  

我想要' Code'的所有价值观。在QaQCPoints'表。   我也宁愿搜索“代码”#39;表中的值基于' #text'键值,而不是仅仅使用它在对象中的位置。

为实现此目的,您首先使用_.find查找记录,然后使用上述方法从中提取Code值:

var table = JSONData.surveyGDB.table.tablename;

// find an item that has `#text` property equal to `QaQcPoints`
var item = _.find(table, function(r) {
  return r['#text'] === 'QaQcPoints';
});

// extract codes from the found item's record property
var code = extract(item.record, 'Code');
// output ["tp", "tb", "to", "bl", "bf"]

运行样本:



var JSONData = {
  "surveyGDB": {
    "filename": "..\\Topo\\SurveyGeoDatabase.gdb",
    "table": {
      "tablename": [{
        "#text": "SurveyInfo",
        "record": {
          "OBJECTID": "1",
          "SiteID": "CBW05583-345970",
          "Watershed": "John Day",
          "VisitType": "Initial visit",
          "SurveyInstrument": "Total Station",
          "ImportDate": "2015-07-22T09:08:42",
          "StreamName": "Duncan Creek",
          "InstrumentModel": "TopCon Magnet v2.5.1",
          "FieldSeason": "2015"
        }
      }, {
        "#text": "QaQcPoints",
        "record": [{
          "OBJECTID": "1",
          "TIMESTAMP": "2015-07-22T09:18:43",
          "Code": "tp",
          "Count": "357"
        }, {
          "OBJECTID": "2",
          "TIMESTAMP": "2015-07-22T09:18:43",
          "Code": "tb",
          "Count": "92"
        }, {
          "OBJECTID": "3",
          "TIMESTAMP": "2015-07-22T09:18:43",
          "Code": "to",
          "Count": "8"
        }, {
          "OBJECTID": "4",
          "TIMESTAMP": "2015-07-22T09:18:43",
          "Code": "bl",
          "Count": "279"
        }, {
          "OBJECTID": "5",
          "TIMESTAMP": "2015-07-22T09:18:43",
          "Code": "bf",
          "Count": "18"
        }]
      }, {
        "#text": "QaQcPolygons",
        "record": [{
          "OBJECTID": "1",
          "TIMESTAMP": "2015-07-22T09:43:08",
          "SurveyExtentCount": "",
          "WaterExtentCount": "",
          "ChannelUnitsCount": "",
          "ChannelUnitsUnique": ""
        }, {
          "OBJECTID": "2",
          "TIMESTAMP": "2015-07-22T13:35:15",
          "SurveyExtentCount": "1",
          "WaterExtentCount": "1",
          "ChannelUnitsCount": "21",
          "ChannelUnitsUnique": "21"
        }]
      }]
    }
  }
}

function extract(record, prop) {
  if (Array.isArray(record)) {
   return _.pluck(record, prop);
  } else {
    return record[prop];
  }
}

var table = JSONData.surveyGDB.table.tablename;

var item = _.find(table, function(r) {
  return r['#text'] === 'QaQcPoints';
});

console.dir(item);

var code = extract(item.record, 'Code');

console.log(code);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

你有两个阶段的问题。第一阶段是确定哪个表是QaQcPoints。如果那总是JSONData.surveyGDB.table.tablename [1],那你很好。

下一步是获取数据。您可以在大多数时间使用本机数组操作(除非您使用的是非常旧的浏览器)。所以:

var table = JSONData.surveyGDB.table.tablename[1].record;
var codeArray = table.map(function(val) { return val.Code; });

会做的伎俩。