Question

[
  {
    "children": [
      {
        "children": [
          {
            "dateAdded": 1493033302670,
            "id": "1534",
            "index": 0,
            "parentId": "1",
            "title": "data1",
            "url": "data2"
          },
          {
            "children": [
              {
                "dateAdded": 1489571506844,
                "id": "1451",
                "index": 0,
                "parentId": "1401",
                "title": "data3",
                "url": "data4"
              }
            ],
            "dateAdded": 1490363326576,
            "dateGroupModified": 1490363326576,
            "id": "1401",
            "index": 1,
            "parentId": "1",
            "title": "daily"
          },
          {
            "children": [
              {
                "dateAdded": 1481787664555,
                "id": "1429",
                "index": 0,
                "parentId": "1407",
                "title": "data56",
                "url": "data"
              },
              {
                "dateAdded": 1483365608504,
                "id": "1430",
                "index": 1,
                "parentId": "1407",
                "title": "data34",
                "url": "data55"
              }
            ]
          }
        ]
      }
    ]
  }
]

这是Chrome书签数据的表示。

如果对象具有 url 属性，则表示它是书签。如果它没有 url 属性，则它是一个文件夹。

这是一种树状结构。

我想使用名为 type 的附加属性创建展平对象。像：

[
{
    "dateAdded": 1489571506844,
    "id": "1451",
    "index": 0,
    "parentId": "1401",
    "title": "title",
    "url": "some url",
    "type": "bookmark"

},
{
    "dateAdded": 1489571506844,
    "id": "1451",
    "index": 0,
    "parentId": "1402",
    "title": "title2",
    "url": "some url2"
    "type": "folder"
}
]

提前致谢。

Answer 1

我已经创建了一个迭代包含对象的数组的函数。如果给定对象具有名为children的属性，则该函数会调用自身。如果它没有，那么它将被推送到新的数组flattenedBookmarks。

解决方案

var flattenedBookmarks = [];

flattenBookmarks(bookmarks);

function flattenBookmarks(bookmarks) {
    for (var i = 0; i < bookmarks.length; i++) {
        var potentialBookmark = bookmarks[i];

        if (potentialBookmark.hasOwnProperty("url")) {
            potentialBookmark.type = "bookmark";
        } else {
            potentialBookmark.type = "folder";
        }

        if (potentialBookmark.hasOwnProperty("children")) {
            flattenBookmarks(potentialBookmark.children);

            if (potentialBookmark.hasOwnProperty("dateGroupModified")) {
                flattenedBookmarks.push(potentialBookmark);
            }
        } else {
            flattenedBookmarks.push(potentialBookmark);
        }
    }
}

您可能应该从函数返回展平数组，而不是将其存储在新的全局数组flattenedBookmarks中，但至少这会让您开始。

https://jsfiddle.net/s9ur35re/

Answer 2

您可以使用迭代和递归方法获取平面数据。

＆＃13;

function flatten(array) {
    var result = [];
    array.forEach(function iter(o) {
        var temp = {},
            keys = Object.keys(o);

        if (keys.length > 1) {
            keys.forEach(function (k) {
                if (k !== 'children') {
                    temp[k] = o[k];
                }
            });
            temp.type = 'url' in o ? 'bookmark' : 'folder';
            result.push(temp);
        }
        Array.isArray(o.children) && o.children.forEach(iter);
    });
    return result;
}

var data = [{ children: [{ children: [{ dateAdded: 1493033302670, id: "1534", index: 0, parentId: "1", title: "data1", url: "data2" }, { children: [{ dateAdded: 1489571506844, id: "1451", index: 0, parentId: "1401", title: "data3", url: "data4" }], dateAdded: 1490363326576, dateGroupModified: 1490363326576, id: "1401", index: 1, parentId: "1", title: "daily" }, { children: [{ dateAdded: 1481787664555, id: "1429", index: 0, parentId: "1407", title: "data56", url: "data" }, { dateAdded: 1483365608504, id: "1430", index: 1, parentId: "1407", title: "data34", url: "data55" }] }] }] }];

console.log(flatten(data));

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

Answer 3

该示例显示了如何操作

data = [
  {
    "children": [
      {
        "children": [
          {
            "dateAdded": 1493033302670,
            "id": "1534",
            "index": 0,
            "parentId": "1",
            "title": "data1",
            "url": "data2"
          },
          {
            "children": [
              {
                "dateAdded": 1489571506844,
                "id": "1451",
                "index": 0,
                "parentId": "1401",
                "title": "data3",
                "url": "data4"
              }
            ],
            "dateAdded": 1490363326576,
            "dateGroupModified": 1490363326576,
            "id": "1401",
            "index": 1,
            "parentId": "1",
            "title": "daily"
          },
          {
            "children": [
              {
                "dateAdded": 1481787664555,
                "id": "1429",
                "index": 0,
                "parentId": "1407",
                "title": "data56",
                "url": "data"
              },
              {
                "dateAdded": 1483365608504,
                "id": "1430",
                "index": 1,
                "parentId": "1407",
                "title": "data34",
                "url": "data55"
              }
            ]
          }
        ]
      }
    ]
  }
];
data2 = [];
function search(data) {
 for (n in data) {
  if (typeof data[n] == 'object') {
   if (data[n].id != undefined) {
    if (data[n].url != undefined) {
     data[n].type="folder";
    } else {
     data[n].type="bookmark";
    }
    data2.push(data[n]);
   }
   search(data[n]);
  }
 }
}
search(data);
console.log(data2);

展平嵌套的json对象

3 个答案: