从高度嵌套的外部文件中选择 JSON 节点

Question

我正在使用本地 json 文件并尝试从中渲染某些节点。然而，我在 StackOverflow 上询问它的原因是 json 文件本身严重嵌套了大量子节点，我不知道如何遍历像这样的 json 文件。我将数据展平以试图缓解该问题，但它似乎并没有起到太大的作用。

我正在尝试专门访问__text（即__text": "Guides ＆ Protocols"）

以下是数据示例：

{
    "feed": {
        "id": "[redacted]",
        "title": "",
        "updated": "2019-01-17T21:01:03Z",
        "entry": [
            {
                "id": "Web/Lists(guid'[redacted]')/Items(1)",
                "category": {
                    "_term": "[redacted]",
                    "_scheme": "[redacted url]"
                },
                "link": {
                    "_rel": "edit",
                    "_href": "Web/Lists(guid'[redacted]')/Items(1)"
                },
                "title": "",
                "updated": "2019-01-17T21:01:03Z",
                "author": {
                    "name": ""
                },
                "content": {
                    "properties": {
                        "ResourceType": {
                            "element": {
                                "Label": {
                                    "__prefix": "d",
                                    "__text": "Guides ＆ Protocols" <--------------------
                                },
                                "TermGuid": {
                                    "__prefix": "d",
                                    "__text": "[redacted]"
                                },
                                "WssId": {
                                    "_m:type": "[redacted]",
                                    "__prefix": "d",
                                    "__text": "706"
                                },
                                "__prefix": "d"
                            },
                            "_m:type": "Collection([redacted])",
                            "__prefix": "d"
                        },
                        "__prefix": "m"
                    },
                    "_type": "application/xml"
                },
                "_m:etag": "\"2\""
            }
         ...
     ]
 }

JavaScript：

import $ from 'jquery';
import axios from 'axios';

import myJSONfile from '../../../public/myJSONfile.json';
import tinyJsonFlat from '../../../public/tinyJsonFlat.json'; // Top 10, ResourceTypes only

import { basename } from 'path';


    export default class {
        constructor() {
            $('<div class="test-div">testing</div>').appendTo(document.body);

            this.loadData();
        }


        loadData() {
            var data = tinyJsonFlat // syntax seems off

            var result = $.map(data.data, function(obj) {
                return obj.Label + obj.__text

                $(document.body).append(result);
                console.log(result);
                // $('#site-labels').text(JSON.stringify(tinyJsonFlat)); /// earlier solution
            });

        }

    }

Answer 1

当你解析一个 JSON 文件时，它的行为就像一个普通的 Javascript 对象，那么：

myJSONfile.feed.entry[index].content.properties.ResourceType.element.Label.__text

注意您要访问的条目的索引：

myJSONfile.feed.entry[index]

const json = {
  "feed": {
    "id": "[redacted]",
    "title": "",
    "updated": "2019-01-17T21:01:03Z",
    "entry": [
      {
        "id": "Web/Lists(guid'[redacted]')/Items(1)",
        "category": {
          "_term": "[redacted]",
          "_scheme": "[redacted url]"
        },
        "link": {
          "_rel": "edit",
          "_href": "Web/Lists(guid'[redacted]')/Items(1)"
        },
        "title": "",
        "updated": "2019-01-17T21:01:03Z",
        "author": {
          "name": ""
        },
        "content": {
          "properties": {
            "ResourceType": {
              "element": {
                "Label": {
                  "__prefix": "d",
                  "__text": "Guides ＆ Protocols"
                },
                "TermGuid": {
                  "__prefix": "d",
                  "__text": "[redacted]"
                },
                "WssId": {
                  "_m:type": "[redacted]",
                  "__prefix": "d",
                  "__text": "706"
                },
                "__prefix": "d"
              },
              "_m:type": "Collection([redacted])",
              "__prefix": "d"
            },
            "__prefix": "m"
          },
          "_type": "application/xml"
        },
        "_m:etag": "\"2\""
      }
    ]
  }
}
   
console.log(json.feed.entry[0].content.properties.ResourceType.element.Label.__text)
// Guides ＆ Protocols

Answer 2

试试：

Array.prototype.findKey = function(key){

  let res = [];

  function traverseChildren(input, lookFor) {
    //By default, imagine what we are looking at is JSON...
    let children = Object.keys(input);
    //... however, if it is an array, just stick with that.
    if (Array.isArray(input)){
      children = input;
    }
    //Go through everything in the target
    for (i = 0; i < children.length; i++) {
      //Have we found the *key* we are looking for?
      if (children[i] === lookFor && Array.isArray(input)) {
        //If so, record the value.
        res.push(input[lookFor]);
      } else {
        //If not, keep searching.
        traverseChildren(input[children[i]]);
      }
    }
  }

  traverseChildren(this, key);
  return res;
}