我可以在 $.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

我认为您的错误在于变量链接的声明： 它必须在我认为的递归函数之外。 在函数内部每次都会重新初始化。

var links = [];

$.getJSON("file.json", function getText (oValue, sKey) {

         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" );
});

Answer 2

尝试将您的函数定义移到事件处理程序之外：

 function getText (links, oValue, sKey) {


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

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

$.getJSON("file.json", function(data, success){
  var links = [];  

  getText (links, data, 0);
});

如有错误，请随时编辑。

目的是将链接数组传递给递归函数，并避免将命名函数定义与 getJSON 混合，至少为了清楚起见，并确保您可以传递初始化的 sKey。

Answer 3

你可以，但在你的情况下你可能不应该

您可以将命名函数作为回调函数传递——这对递归很有用（参见：Using Named Callback Functions In Javascript Methods，Ben Nadel）——但在你的情况下，你可能不应该。

根据您的示例，在调用递归函数之前和之后，您需要做一些事情。这些事情，例如声明变量和将元素附加到主体，将需要在递归之外发生[一次]。

因此，传递一个匿名函数作为您的回调，其中包含您的递归函数定义并根据需要调用它。

在您的情况下，您需要为 JSON 响应数组中返回的每个对象调用它。因此，您也可以将其放在迭代器中。这里为了方便我使用了jQuery的$.each()。

/* FUNCTION THAT MAKES JSON REQUEST */
function doJsonThing() {
  
  /* BEGIN REWRITE OF OP's EXAMPLE CODE */
  $.getJSON('file.json', function (json) {
    var links = [];
    function getText (key, val) {
      if (typeof val === 'object' || typeof val === 'array') {
        for (i in val) {
          getText(i, val[i]);
        }
      } else {
        links.push('<li id="' + val + '">' + key + ' (' + val + ')</li>' );
      }
    }
    $.each(json, function (key, val) {
      getText(key, val);
    });
    $('<ul/>', {
      "class": "my-new-list",
      "html" : links.join('')
    }).appendTo('body');
  });
  /* END REWRITE OF EXAMPLE CODE */
  
}

/* THE FOLLOWING IS NOT PART OF THE EXAMPLE,
// IT IS JUST USED TO SIMULATE A SERVER RESPONSE */

/* BEGIN UNIT TEST */
// CREATE CLOSURE TO RETURN DUMMY FUNCTION AND FAKE RESPONSE
function json_response(response) {
  return function (url, success) {
    success(response);
  };
}

// OVERRIDE $.getJSON WITH DUMMY FUNCTION AND FAKE RESPONSE
$.getJSON = json_response(
  
  // SIMULATED CONTENTS OF 'file.json'
  $.parseJSON(
    '['
  + '  {'
  + '    "type": "firsttype",'
  + '    "text": {'
  + '      "id": "content"'
  + '    }'
  + '  },'
  + '  {'
  + '    "type": "secondtype",'
  + '    "text": {'
  + '      "id": "other"'
  + '    }'
  + '  }'
  + ']'
  )
);
doJsonThing();
/* END UNIT TEST */

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

Answer 4

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

您想遍历任意 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]
}

这个sn-p会在上面的json中搜索some_key1，它的值以blah开头：

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>