在不知道任何键的情况下遍历整个 JSON 对象

Question

我正在尝试对我一无所知的 JSON 数据执行操作（更新值、删除键、添加键等）。这些项目本质上是属性文件，而不是从应用程序返回的 JSON 数据。这些文件可能非常不同，我需要开发一种方法来执行这些操作，而无需对 JSON 数据一无所知。

我正在跟踪存储密钥的路径。如果我有如下所示的示例数据，我将存储路径（如“/key1/innerKey5/”）并使用 getNodeData 获取键为 innerKey6 的数据。

如果我有项目的路径和密钥，我如何以编程方式在 JSON 数据中找到该项目并删除或更新该项目？

var originalData = someMethodToGetJSONData();
var currentData; // Global variable storing a copy of the original data which can be modified

json = {
  "key1": {
    "innerKey1": {
      "innerKey2" : {
        "innerKey3": "value1",
        "innerKey4": "value2"
      }
    },
    "innerKey5": {
      "innerKey6": "value1"
    }
  },
  "key2": "value3",
  "key3": "value4"
}

function getKeysFromPath(keyPath) {
  var split = keyPath.split('/');
  var keys = [];

  for(var i = 0; i < split.length; i++) {
    if(split[i] != '') {
      keys.push(split[i]);
    }
  }

  return keys
}

function getNodeData(keyPath) {
  var keys = getKeysFromPath(keyPath);
  nodeData = currentItemData;

  for(var i = 0; i < keys.length; i++) {
    nodeData = nodeData[keys[i]];
  }

  return nodeData;
}

data = getNodeData('/key1/innerKey5/');
key = 'innerKey6';
console.log('Data: ' + data[key]);

Answer 1

Lodash 有一些有用的功能来做这种事情。

_.get、_.set、_.unset

因此，如果您将节点存储为字符串形式，例如。 -> a.b.c[0].k，这3个函数应该可以做你想做的。

Answer 2

这是一个如何遍历未知键的示例

var key;

for (key in arr) {
  if (arr.hasOwnProperty(key)) {
    console.log(key);
    console.log(arr[key]);
  }
}

Answer 3

如果您使用的是 JQuery，请使用 .each() 函数：

$.each(json,function(key,val){
        //You may use key/val for every iteration
});

Answer 4

为了更新或删除，需要获取父对象和最后一个key：

var lastKey = keys.pop();
var parentObj = getNodeByKeys(keys); // refactor your code to make this function
parentObj[lastKey] = newValue;
delete parentObj[lastKey];

Answer 5

通过 XHR 获取数据并解析 JSON：

var getJSON = function(url) {
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.onload = function() {
            var status = xhr.status;
            if (status == 200) {
                resolve(JSON.parse(xhr.response));
            } else {
                reject(status);
            }
        };
        xhr.send();
    });
};

然后使用 jQuery each:

getJSON('//yoursite.com/yourfile.json').then(function(data) {
    $.each(data, function(k, v) {
      console.log(k + ', ' + v);
    });
}, function(status) {
    console.log(status);
});

Answer 6

您可以使用此函数从“路径”获取数据：

/**
 * Get a node from an object according to the given path.
 * @param {String} path Node's path.
 * @param {Object} data Object to retrieve the desired information.
 * @returns {Object} Returns the value from the node, or null in the
 * case the node is not found.
 */
function getNode(path, data)
{
    var currentNode = data;

    path.replace(/^\/|\/$/g, '').split('/').forEach(function(key){
        if(key in currentNode)
        {
            currentNode = currentNode[key];
        }
        else
        {
            currentNode = null;
            return false;
        }
    });

    return currentNode;
}

从那里你可以像这样操作你的对象：

var myData = {
    "key1": {
        "innerKey1": {
            "innerKey2" : {
                "innerKey3": "value1",
                "innerKey4": "value2"
            }
        },
        "innerKey5": {
            "innerKey6": "value1"
        }
    },
    "key2": "value3",
    "key3": "value4"
};

var someNode = getNode('/key1/innerKey5', myData);

// add value
someNode.innerKey7 = 'newValue';

// update existing value
someNode.innerKey7 = 'otherValue';

// delete value
delete someNode.innerKey6;

console.log(myData);