2017-04-25 71 views
2

的嵌套數組的值。這是我的實際數組:如何更新對象

let mainArray= [ 
    { 
     value: '/AG_TURF-123', 
     label: 'Ag & Turf', 
     checked: false, 
     id:123, 
     children: [ 
      { 
       value: '/AG_TURF-123/TRACTOR-456', 
       label: 'Tractors', 
       checked: false, 
       id:456, 
       children: [ 
        { 
         value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series', 
         label: 'Large (7, 8, 9) Series', 
         checked: false, 
         id:789, 
         children: [{ 
          value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/7-family-tractor', 
          label: '7 Family Tractor', 
          checked: false, 
          id:101112 
         },{ 
          value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/8-family-tractor', 
          label: '8 Family Tractor', 
          checked: false, 
          id:131415 
         },{ 
          value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/9-family-tractor', 
          label: '9 Family Tractor', 
          checked: false, 
          id:161718 
         }], 
        }, 
        { 
         value: '/app/Http/routes.js', 
         label: 'routes.js', 
         checked: false, 
         id:181920 
        }, 
       ], 
      }, 
      { 
       value: '/app/Providers', 
       label: 'Providers', 
       checked: false, 
       id:212223, 
       children: [{ 
        value: '/app/Http/Providers/EventServiceProvider.js', 
        label: 'EventServiceProvider.js', 
        checked: false, 
        id:242526 
       }], 
      }, 
     ], 
    }, 
    { 
     value: '/config', 
     label: 'config', 
     checked: false, 
     id:272829, 
     children: [ 
      { 
       value: '/config/app.js', 
       label: 'app.js', 
       checked: false, 
       id:303132 
      }, 
      { 
       value: '/config/database.js', 
       label: 'database.js', 
       checked: false, 
       id:333435 
      }, 
     ], 
    }, 
    { 
     value: '/public', 
     label: 'public', 
     checked: false, 
     id:353637, 
     children: [ 
      { 
       value: '/public/assets/', 
       label: 'assets', 
       checked: false, 
       id:383940, 
       children: [{ 
        value: '/public/assets/style.css', 
        label: 'style.css',checked: false, 
        id:404142 
       }], 
      }, 
      { 
       value: '/public/index.html', 
       label: 'index.html', 
       checked: false, 
       id: 434445 
      }, 
     ], 
    }, 
    { 
     value: '/.env', 
     label: '.env', 
     checked: false, 
     id: 464748 
    }, 
    { 
     value: '/.gitignore', 
     label: '.gitignore', 
     checked: false, 
     id: 495051 
    }, 
    { 
     value: '/README.md', 
     label: 'README.md', 
     checked: false, 
     id: 525354 
    }, 
]; 

這就是我的價值列表:

const ids=[525354,123,131415];

我想設置checkedtrue如果ID匹配。 我的主陣列可能會達到6到7步深。

我做了什麼,直到尚未:

setCheckedFlagToItems(checkList, items) { 
     return items.map((item) => { 
      const node = item; 
      if (checkList.indexOf(node.id) !== -1) { 
       node.checked = true; 
      } 
      if ((node.children) && (Array.isArray(node.children) && node.children.length > 0)) { 
       this.setCheckedFlagToItems(checkList, node.children); 
      } 
      return node; 
     }, this); 
    } 

但它不工作如常。

回答

2

對於Array#forEach,您可以使用帶有命名函數的迭代和遞歸方法作爲回調。

let mainArray = [{ value: '/AG_TURF-123', label: 'Ag & Turf', checked: false, id: 123, children: [{ value: '/AG_TURF-123/TRACTOR-456', label: 'Tractors', checked: false, id: 456, children: [{ value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series', label: 'Large (7, 8, 9) Series', checked: false, id: 789, children: [{ value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/7-family-tractor', label: '7 Family Tractor', checked: false, id: 101112 }, { value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/8-family-tractor', label: '8 Family Tractor', checked: false, id: 131415 }, { value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/9-family-tractor', label: '9 Family Tractor', checked: false, id: 161718 }] }, { value: '/app/Http/routes.js', label: 'routes.js', checked: false, id: 181920 }] }, { value: '/app/Providers', label: 'Providers', checked: false, id: 212223, children: [{ value: '/app/Http/Providers/EventServiceProvider.js', label: 'EventServiceProvider.js', checked: false, id: 242526 }] }] }, { value: '/config', label: 'config', checked: false, id: 272829, children: [{ value: '/config/app.js', label: 'app.js', checked: false, id: 303132 }, { value: '/config/database.js', label: 'database.js', checked: false, id: 333435 }] }, { value: '/public', label: 'public', checked: false, id: 353637, children: [{ value: '/public/assets/', label: 'assets', checked: false, id: 383940, children: [{ value: '/public/assets/style.css', label: 'style.css', checked: false, id: 404142 }] }, { value: '/public/index.html', label: 'index.html', checked: false, id: 434445 }] }, { value: '/.env', label: '.env', checked: false, id: 464748 }, { value: '/.gitignore', label: '.gitignore', checked: false, id: 495051 }, { value: '/README.md', label: 'README.md', checked: false, id: 525354 }], 
 
    ids = [525354, 123, 131415]; 
 

 
mainArray.forEach(function iter(a) { 
 
    if (ids.includes(a.id)) { 
 
     a.checked = true; 
 
    } 
 
    Array.isArray(a.children) && a.children.forEach(iter); 
 
}); 
 

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

+0

@Kris霍倫貝克,您的編輯並沒有真正檢查數組,如果它是一個或者不進行遞歸迭代,這是必要的。 –

+0

嗯..也許我看錯了。它在我的IDE中拋出一個錯誤。舊的代碼是'Array.isArray((a.children)&& a.children.forEach(callback);''我得到''''''期望。所以缺少一個括號。 –

+0

也許它應該是'Array.isArray(a.children)&& a.children.forEach(iter);'? –

1

如果您id s爲 「獨一無二」(只有一個每個id屬性唯一的對象),你也可以拆分到兩個步驟這個動作:

  1. 創建一個新的數據結構,將所有項目平滑到一個對象中id: item
  2. 通過ids循環到r從這個對象中檢索項目。

如果您發現自己通過id查找多個對象,則創建此臨時表示可能會更容易。

地圖的創建使用類似於其他答案的遞歸:每當item包含一個children數組時,它會在地圖對象返回之前將其添加到地圖對象中。

const mainArray = [{ value: '/AG_TURF-123', label: 'Ag & Turf', checked: false, id: 123, children: [{ value: '/AG_TURF-123/TRACTOR-456', label: 'Tractors', checked: false, id: 456, children: [{ value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series', label: 'Large (7, 8, 9) Series', checked: false, id: 789, children: [{ value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/7-family-tractor', label: '7 Family Tractor', checked: false, id: 101112 }, { value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/8-family-tractor', label: '8 Family Tractor', checked: false, id: 131415 }, { value: '/AG_TURF-123/TRACTOR-456/Large-7-8-9-series/9-family-tractor', label: '9 Family Tractor', checked: false, id: 161718 }] }, { value: '/app/Http/routes.js', label: 'routes.js', checked: false, id: 181920 }] }, { value: '/app/Providers', label: 'Providers', checked: false, id: 212223, children: [{ value: '/app/Http/Providers/EventServiceProvider.js', label: 'EventServiceProvider.js', checked: false, id: 242526 }] }] }, { value: '/config', label: 'config', checked: false, id: 272829, children: [{ value: '/config/app.js', label: 'app.js', checked: false, id: 303132 }, { value: '/config/database.js', label: 'database.js', checked: false, id: 333435 }] }, { value: '/public', label: 'public', checked: false, id: 353637, children: [{ value: '/public/assets/', label: 'assets', checked: false, id: 383940, children: [{ value: '/public/assets/style.css', label: 'style.css', checked: false, id: 404142 }] }, { value: '/public/index.html', label: 'index.html', checked: false, id: 434445 }] }, { value: '/.env', label: '.env', checked: false, id: 464748 }, { value: '/.gitignore', label: '.gitignore', checked: false, id: 495051 }, { value: '/README.md', label: 'README.md', checked: false, id: 525354 }]; 
 

 
// We reduce the array of nested items in to one object of: 
 
// { id: item } 
 
const idMap = mainArray.reduce(function merge(map, node) { 
 
    map[node.id] = node; 
 
    
 
    if (Array.isArray(node.children)) { 
 
    node.children.reduce(merge, map); 
 
    } 
 
    
 
    return map; 
 
}, {}); 
 

 
const ids = [525354, 123, 131415]; 
 

 
// Whenever you need an item, you can get it 
 
// using idMap[id] 
 
const items = ids.map(id => idMap[id]); 
 
items.forEach(item => item.checked = true); 
 

 
// or: ids.forEach(id => idMap[id].checked = true)