Какая функция массива является более эффективным выбором для этого объекта и массива отображения?

Я форматирую данные для визуализации дерева D3, мои дети - это как массивы, так и объекты с большим количеством дочерних объектов. Мне нужно, чтобы они были в детском массиве для работы дерева. Сейчас он работает, но похоже, что это не очень эффективный способ достичь этого.Какая функция массива является более эффективным выбором для этого объекта и массива отображения?

У меня есть угловые и доступные методы D3. Я написал эту длинную функцию в ваниле JS.

Данные, зарегистрированные на консоли, находятся в правильном формате. Неформатированные данные являются начальным объектом.

Спасибо для смотреть

<!DOCTYPE html> 
<meta charset="UTF-8"> 
<style> 


</style> 

<body> 

<div id=tree></div> 
<script> 
var unformattedData = { 
    "city": "All Cities", 
    "children": { 
    "group_a": { 
     "wins": "20" 
    }, 
    "group_b": { 
     "wins": "15" 
    }, 
    "group_c": [{ 
     "city": "NYC", 
     "wins": "25", 
     "losses": "2", 
     "children": { 
     "group_a": { 
      "wins": "5" 
     }, 
     "group_b": { 
      "wins": "3" 
     }, 
     "group_c": [{ 
      "city": "SFO", 
      "wins": "3", 
      "losses": "1", 
      "children": { 
      "group_a": { 
       "wins": "0" 
      }, 
      "group_b": { 
       "wins": "0" 
      }, 
      "group_c": [{ 
       "city": "LON", 
       "wins": "2", 
       "losses": "0" 
      }], 
      "group_d": [{ 
       "city": "LAX", 
       "wins": "2", 
       "losses": "0" 
      }] 
      } 
     }, { 
      "city": "SFO", 
      "wins": "2", 
      "losses": "1", 
      "children": { 
      "group_a": { 
       "wins": "0" 
      }, 
      "group_b": { 
       "wins": "0" 
      }, 
      "group_c": [{ 
       "city": "LON", 
       "wins": "2", 
       "losses": "0" 
      }], 
      "group_d": [{ 
       "city": "LAX", 
       "wins": "2", 
       "losses": "0" 
      }] 
      } 
     }, { 
      "city": "NYC", 
      "wins": "2", 
      "losses": "0", 
      "children": { 
      "group_a": { 
       "wins": "0" 
      }, 
      "group_b": { 
       "wins": "0" 
      }, 
      "group_c": [{ 
       "city": "LON", 
       "wins": "2", 
       "losses": "0" 
      }], 
      "group_d": [{ 
       "city": "LAX", 
       "wins": "2", 
       "losses": "0" 
      }] 
      } 
     }], 
     "group_d": [{ 
      "city": "LAX", 
      "wins": "2", 
      "losses": "0", 
      "children": {} 
     }, { 
      "city": "LAX", 
      "wins": "1", 
      "losses": "1", 
      "children": {} 
     }, { 
      "city": "LAX", 
      "wins": "2", 
      "losses": "0", 
      "children": {} 
     }] 
     } 
    }, { 
     "city": "SFO", 
     "wins": "1", 
     "losses": "1", 
     "children": { 
     "group_a": { 
      "wins": "1" 
     }, 
     "group_b": { 
      "wins": "1" 
     }, 
     "group_c": [{ 
      "city": "PDX", 
      "wins": "1", 
      "losses": "0", 
      "children": {} 
     }, { 
      "city": "PHX", 
      "wins": "1", 
      "losses": "0", 
      "children": {} 
     }, { 
      "city": "JFK", 
      "wins": "1", 
      "losses": "1", 
      "children": {} 
     }], 
     "group_d": [{ 
      "city": "LGB", 
      "wins": "1", 
      "losses": "0", 
      "children": {} 
     }, { 
      "city": "SEA", 
      "wins": "1", 
      "losses": "0", 
      "children": {} 
     }, { 
      "city": "JFK", 
      "wins": "1", 
      "losses": "0", 
      "children": {} 
     }] 
     } 
    }, { 
     "city": "NYC", 
     "wins": "1", 
     "losses": "0", 
     "children": { 
     "group_a": { 
      "wins": "1" 
     }, 
     "group_b": { 
      "wins": "1" 
     }, 
     "group_c": [{ 
      "city": "LON", 
      "wins": "1", 
      "losses": "0", 
      "children": {} 
     }, { 
      "city": "LON", 
      "wins": "1", 
      "losses": "0", 
      "children": {} 
     }, { 
      "city": "LON", 
      "wins": "1", 
      "losses": "1", 
      "children": {} 
     }], 
     "group_d": [{ 
      "city": "LAX", 
      "wins": "1", 
      "losses": "0", 
      "children": {} 
     }, { 
      "city": "LGB", 
      "wins": "1", 
      "losses": "0", 
      "children": {} 
     }, { 
      "city": "PHX", 
      "wins": "1", 
      "losses": "0", 
      "children": {} 
     }] 
     } 
    }], 
    "group_d": [{ 
     "city": "CLT", 
     "wins": "6", 
     "losses": "0", 
     "children": { 
     "group_a": { 
      "wins": "0" 
     }, 
     "group_b": { 
      "wins": "0" 
     }, 
     "group_c": [{ 
      "city": "LON", 
      "wins": "2", 
      "losses": "0" 
     }], 
     "group_d": [{ 
      "city": "LAX", 
      "wins": "2", 
      "losses": "0" 
     }] 
     } 
    }, { 
     "city": "DAL", 
     "wins": "5", 
     "losses": "0", 
     "children": { 
     "group_a": { 
      "wins": "0" 
     }, 
     "group_b": { 
      "wins": "0" 
     }, 
     "group_c": [{ 
      "city": "LON", 
      "wins": "2", 
      "losses": "0" 
     }], 
     "group_d": [{ 
      "city": "LAX", 
      "wins": "2", 
      "losses": "0" 
     }] 
     } 
    }, { 
     "city": "BUR", 
     "wins": "4", 
     "losses": "0", 
     "children": { 
     "group_a": { 
      "wins": "0" 
     }, 
     "group_b": { 
      "wins": "0" 
     }, 
     "group_c": [{ 
      "city": "LON", 
      "wins": "2", 
      "losses": "0" 
     }], 
     "group_d": [{ 
      "city": "LAX", 
      "wins": "2", 
      "losses": "0" 
     }] 
     } 
    }] 
    } 
}; 

var formattedData = {}; 

function createTree(d) { 
    if (d.children) { 
     if (d.children.typeof = 'Obj') { 
     var childrenArray = []; 

     if (d.children.group_b) { 
      d.children.group_b.content = 'hello'; 
      d.children.group_b.message_group = 'group b'; 
      childrenArray.push(d.children.group_b); 
     } 

     if (d.children.group_a) { 
      d.children.group_a.content = 'goodbye'; 
      d.children.group_a.message_group = 'group a'; 
      childrenArray.push(d.children.group_a); 
     } 

     if (d.children.group_c) { 
      d.children.group_c.forEach(function(child, index) { 
      child.message_group = 'group c'; 
      childrenArray.push(child); 
      }); 
     } 

     if (d.children.group_d) { 
      d.children.group_d.forEach(function(child, index) { 
      child.message_group = 'group d'; 
      childrenArray.push(child); 
      }); 
     } 

     d.children = childrenArray.reverse(); 
     d.children.forEach(createTree); 
     } 
    } 
    formattedData = d; 
    console.log(formattedData); 
} 

createTree(unformattedData) 

</script> 
</body>

источник

2017-02-16 kinet

Почему бы это не эффективно? Кажется, вы проходите только каждый элемент только один раз. – juvian

Theres не более эффективный способ, может быть немного короче ... –

, так как этот вопрос, кажется, о ** рабочем ** коде, он лучше подходит для [Code Review Stack Exchange] (http://codereview.stackexchange.com/) – Claies

function createTree(d) { 
if (d.children && d.children.typeof = 'Obj') { 
    var childrenArray = []; 
    //may a bit shorter way of assigning the props 
    for(k in d.children){ 
    childrenArray.push(Object.assign(d.children[k], 
    { 
    group_b:{ 
     content:'hello', 
     message_group:'group b', 
    } 
    group_a:{ 
     content:'goodbye', 
     message_group:'group a' 
    } 
    }[k]||{}); 
    } 
     //shorter way of if 
     (d.children.group_c||[]).forEach(function(child, index) { 
     child.message_group = 'group c'; 
     childrenArray.push(child); 
     }); 

     (d.children.group_d||[]).forEach(function(child, index) { 
     child.message_group = 'group d'; 
     childrenArray.push(child); 
     }); 
    } 
    //i think theres no need for this lines 

    d.children = childrenArray.reverse(); 
    setTimeout(function(){d.children.forEach(createTree)});//=> recursion to walking,better performance 
    } 
}

источник

2017-02-16 19:19:40

Какая функция массива является более эффективным выбором для этого объекта и массива отображения?

ответ

Смежные вопросы