Javascript object 展平為陣列

Question

我今天一直在嘗試展平 object 陣列。 我無法實現我所需要的，我需要訪問最內層元素（ 1st ）到最外層元素（ 4th ）這是一個數據樣本，其中有一些 null 值可能會使它變得復雜：

   {
      "School":"Arsenal 2011",          //4th Element in new array
      "Group":{
         "Name":"Previous",             //3rd Element in new array
         "ParentGroup":{
            "Name":"Arsenal",           //2nd Element in new array
            "ParentGroup":{
               "Name":"USA",            //1st Element in new array
               "ParentGroup":null
            }
         }
      },
      "GroupDisplayText":null,
      "Publisher":"Abbot",
      "PublishedDate":"2011",
      "PublishersWebsite":"http://google.com/USA/ADW%202011/Arsenal%202011.pdf"
   },
   {
      "School":"New York 2000",
      "Group":{
         "Name":"New York",
         "ParentGroup":{
            "Name":"USA",
            "ParentGroup":null
         }
      },
      "GroupDisplayText":null,
      "Publisher":"DoE",
      "PublishedDate":"2000",
      "PublishersWebsite":"http://google.com/USA/New York%202000%20Tables.pdf"
   }

我想要的 output 陣列是：

array[0] = { "USA","Arsenal","Previous" } array[x] = 所有其他數據

我將如何在 Javascript 中執行此操作？

如果有幫助，我已經添加了一個 plunker

https://plnkr.co/edit/LNlHArCob4Bix8VYHFwI?p=preview

謝謝

Answer 1

您可以對嵌套屬性進行迭代檢查。

 var data = [{ School: "Arsenal 2011", Group: { Name: "Previous", ParentGroup: { Name: "Arsenal", ParentGroup: { Name: "USA", ParentGroup: null } } }, GroupDisplayText: null, Publisher: "Abbot", PublishedDate: "2011", PublishersWebsite: "http://google.com/USA/ADW%202011/Arsenal%202011.pdf" }, { School: "New York 2000", Group: { Name: "New York", ParentGroup: { Name: "USA", ParentGroup: null } }, GroupDisplayText: null, Publisher: "DoE", PublishedDate: "2000", PublishersWebsite: "http://google.com/USA/New York%202000%20Tables.pdf" }], result = data.map(({ School, Group: ParentGroup }) => { var array = [School]; while (ParentGroup) { array.unshift(ParentGroup.Name); ({ ParentGroup } = ParentGroup); } return array; }); console.log(result);

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

Answer 2

使用Array.prototype.map和_.get()處理 null 場景

 const data = [{ "School":"Arsenal 2011", //4th Element in new array "Group":{ "Name":"Previous", //3rd Element in new array "ParentGroup":{ "Name":"Arsenal", //2nd Element in new array "ParentGroup":{ "Name":"USA", //1st Element in new array "ParentGroup":null } } }, "GroupDisplayText":null, "Publisher":"Abbot", "PublishedDate":"2011", "PublishersWebsite":"http://google.com/USA/ADW%202011/Arsenal%202011.pdf" }, { "School":"New York 2000", "Group":{ "Name":"New York", "ParentGroup":{ "Name":"USA", "ParentGroup":null } }, "GroupDisplayText":null, "Publisher":"DoE", "PublishedDate":"2000", "PublishersWebsite":"http://google.com/USA/New York%202000%20Tables.pdf" }]; const formatted = data.map(item => { return [ _.get(item, 'Group.ParentGroup.ParentGroup.Name'), _.get(item, 'Group.ParentGroup.Name'), _.get(item, 'Group.Name'), _.get(item, 'School') ]; }); console.log(formatted);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>

Answer 3

如果它只有一層深，[_.pluck()] 就可以了。( https://lodash.com/docs/3.10.1#pluck )

從集合中的所有元素獲取路徑的屬性值。

從他們的例子：

var users = [
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 }
];

_.pluck(users, 'user');
// => ['barney', 'fred']

對於嵌套元素，您可以使用_.forEach()

迭代集合的元素，為每個元素調用 iteratee。

循環遍歷這些項目並在迭代 function 中將適當的元素添加到它們各自的 arrays 中。