【问题标题】:Append parent in results of recursive javascript function在递归 javascript 函数的结果中附加父级
【发布时间】:2013-07-14 20:47:56
【问题描述】:

我怎样才能在结果中获得(反向)树中的父级。

var json = '[{"title":"Category1","children":[{"title":"sometitle","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"Subcategory1","children":[{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"}]},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"Subcategory2","children":[{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"}]}]},{"title":"Category2","children":[{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"Subcategory1","children":[{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"}]},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"Subcategory2","children":[{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"}]}]},{"title":"Category3","children":[{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"Subcategory1","children":[{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"}]},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"Subcategory2","children":[{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"}]}]},{"title":"Category4","children":[{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"Subcategory1","children":[{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"}]},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"Subcategory2","children":[{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"},{"title":"video","url":"http:\/\/www.youtube.com\/watch?v=Nk5_1OZ4DVI","thumb":"*.jpg"}]}]}]';

var result = find('sometitle',json);
console.log(result);

function find(needle, arr){
    var results = [];
    for(var k in arr){
        //recursive case
        if(typeof arr[k] === 'object'){
           results = results.concat(find(needle, arr[k]));
        }

        //base case
        if(arr[k]==needle){
            return arr;
        }
    }

    //base case
    return results;
}

我尝试了以下方法,但这会给我带来超过 10 个**结果(对象),

//recursive case
if(typeof arr[k] === 'object'){
   results = results.concat(arr[k]);
   results = results.concat(find(needle, arr[k]));
}

编辑:

当前结果:

0: Object
thumb: "*.jpg"
title: "sometitle"
url: "http://www.youtube.com/watch?v=Nk5_1OZ4DVI"

预期结果: 例如:

   0: Object
     title: "Category1"
      children: Array[1]
        0: Object

谢谢, 雅各布

【问题讨论】:

  • 你的问题有点不清楚。您能否发布 1) 源数据 (jsonstring) 2) 预期结果?
  • 为什么是concat?就去return find(needle, arr[k]);。此外,使用for(var i = 0; i < array.length; i++) { [...] } 遍历数组。
  • 如果您使用 JavaScript 对象文字语法声明变量,则无需调用 JSON 解析器。另外,不要对数组使用for ... in 循环。还使用var! 声明“结果”!
  • 感谢您的编码建议,始终是一个好习惯,我添加了 json 字符串和预期结果。有点不好的符号sry..关于那个

标签: javascript arrays json search recursion


【解决方案1】:

使用 DefiantJS (defiantjs.com) 进行此类查询是微不足道的。这个库使用“搜索”方法扩展了全局对象 JSON。使用此方法,您可以使用 XPath 表达式对 JSON 结构进行查询。

这是下面代码的小提琴
http://jsfiddle.net/hbi99/cPRd9/

像这样(我已经缩短了你的 JSON 以方便概述):

    var data = [
       {
          "title": "Category1",
          "children": [
             { "title": "video 1", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
             {
                "title": "Subcategory1",
                "children": [
                   { "title": "video 2", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
                   { "title": "video 3", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
                   { "title": "video 4", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" }
                ]
             },
             { "title": "video 5", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
             {
                "title": "Subcategory2",
                "children": [
                   { "title": "video 5", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
                   { "title": "video 6", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
                   { "title": "video 7", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" }
                ]
             }
          ]
       },
       {
          "title": "Category3",
          "children": [
             { "title": "video 8", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
             {
                "title": "Subcategory1",
                "children": [
                   { "title": "video 9", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
                   { "title": "video 10", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
                   { "title": "video 11", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" }
                ]
             },
             { "title": "video 12", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
             {
                "title": "Subcategory2",
                "children": [
                   { "title": "video 13", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
                   { "title": "video 14", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" },
                   { "title": "video 15", "url": "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", "thumb": "*.jpg" }
                ]
             }
          ]
       }
    ],
    res1 = JSON.search( data, '//*[title and url]' ),
    res2 = JSON.search( data, '//*[title = "video 13"]' ),
    str = '';

for (var i=0; i<res1.length; i++) {
    str += res1[i].title +'<br/>';
}

document.getElementById('output').innerHTML = str;

console.log( res2[0] );
// {title: "video 13", url: "http://www.youtube.com/watch?v=Nk5_1OZ4DVI", thumb: "*.jpg"} 

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多