javascript - 我可以在 $.getJSON 函数中使用递归 JavaScript 函数吗？

Question

我有一个可变深度的 JSON 文档。一个例子:

[
    {
        "type": "firsttype",
        "text": {
            "id": "content"
        }
    }
]

我正在尝试做的是检索某些键的值，比如 text。由于我不知道这些键可能出现在 .JSON 中的什么位置，因此我需要使用递归函数。然后我尝试在 HTML 文件中显示这些键和值。

我这里有一个初步的尝试:

$.getJSON("file.json", function getText (oValue, sKey) {
    links = [];
    if (typeof oValue == "object" || typeof oValue == "array") {
        for (i in oValue) {
            getText (oValue [i], i);
        }
    } else {
        links.push ( "<li id='" + oValue + "'>" + sKey + "</li>" );
    }

    $( "<ul/>", {
        "class": "my-new-list",
        html: links.join( "" )
    }).appendTo( "body" );
});

当我在本地或远程或在 python -m SimpleHTTPServer 上加载页面时，我没有收到任何错误，页面上也没有任何内容。我究竟做错了什么？我已将所有 JS 包含在 $.getJSON 调用中，因此不会出现异步问题。

将来我还想包括一个正则表达式检查，这样我就可以用特定的字符串提取值，例如/http/。执行此操作的最佳方法是什么？

Answer 1

由于其他答案涵盖了您应该考虑的大部分内容，我想我将针对您的实际问题发布一个解决方案。 :)

您想遍历任意 JSON 并搜索特定键，并且可能对其值有条件。然后您想要返回指定键的所有值(如果指定，则通过您的条件)。

假设您有以下 json:

{
    "hello": "some text",
    "object": {
        "key1": "hello!",
        "key2": "Bye!"
    },
    "array": [{
        "some_key1": "blah blah blah",
        "some_key2": 24
    }, {
        "some_key1": "ghiojd",
        "some_key2": 13
    }],
    "numeric_array": [2, 3, 4, 5]
}

此代码段将在上面的 json 中搜索其值以 blah 开头的 some_key1:

function regexpConditionFactory(regex) {
    return function(value) { return regex.test(value); };
}

function searchObjectForKey(obj, key, condition, result) {
    if ($.isPlainObject(obj)) {
        if (obj.hasOwnProperty(key)) {
            if (!condition || ($.isFunction(condition) && condition(obj[key])))
                result.push(obj[key]);
        }
    }

    if ($.isPlainObject(obj) || $.isArray(obj)) {
        for (var k in obj) {
            if (obj.hasOwnProperty(k))
                searchObjectForKey(obj[k], key, condition, result);
        }
    }
}

$.getJSON('file.json', function(data) {
    var res = [];

    searchObjectForKey(data, 'some_key1', regexpConditionFactory(/^blah/), res);

    $('<ul/>', {
        'class': 'my-new-list',
        'html': res.map(function(value) { return '<li>' + value + '</li>'; }).join('')
    }).appendTo('body');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>