如何用JavaScript遍历多维数组填充Google OrgChart的data.addRows？

我编写了一段用于生成组织结构图的JavaScript代码，已构建包含ID、名称等信息的数组，但无法用该数组填充JavaScript数据数组。以下是我的代码：

<script>
  google.charts.load('current', {packages:["orgchart"]});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var passedArray = <?php echo json_encode($reeco_net); ?>;
    const jid =(passedArray[1][0]);
    const jpa =(passedArray[1][1]);
    const jav =(passedArray[1][2]);
    const jcd =(passedArray[1][3]);
    const jre=(passedArray[1][4]);
    const jno=(passedArray[1][5]);
    
    
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');
    data.addRows([
    
      [{'v':`'${jre}'`, 'f':`${jno}`+ '&lt;a href=&quot;hhh.com?thx='+jid+'&quot;&gt;&lt;button type=&quot;button&quot; style=&quot;border:none;background-color: transparent;&quot;&gt;&lt;img class=&quot;table-avatar circular-square_v&quot; src=&quot;../img/avatar/'+jav+'&quot; width=&quot;40px&quot; height=&quot;40px&quot;&gt;&lt;/button&gt;&lt;/a&gt;'},
       '', 'toolTip'],
      
    ]);

    // Create the chart.
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    // Draw the chart, setting the allowHtml option to true for the tooltips.
    chart.draw(data, {'allowHtml':true});
  }
</script>

我需要用passedArray中的数据填充data.addRows([....])。已知passedArray数据有效，将元素索引替换为1、2、3等时名称可正常显示，但不知如何遍历整个passedArray实现自动填充？

解决方案 #

核心思路是遍历passedArray数组，将每一项数据转换为OrgChart要求的行格式，再批量添加到数据表格中。修改后的代码如下：

<script>
  google.charts.load('current', {packages:["orgchart"]});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var passedArray = <?php echo json_encode($reeco_net); ?>;
    
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');
    
    // 遍历数组生成所有行数据（若数组首项是表头，用passedArray.slice(1)跳过）
    const chartRows = passedArray.map(item => {
      const jid = item[0];
      const jpa = item[1]; // 假设jpa是上级节点的标识值，对应父节点的v字段
      const jav = item[2];
      const jre = item[4];
      const jno = item[5];
      
      return [
        {
          'v': jre, // 节点唯一标识，原代码多余的单引号已移除
          'f': `${jno}<a href="hhh.com?thx=${jid}"><button type="button" style="border:none;background-color: transparent;"><img class="table-avatar circular-square_v" src="../img/avatar/${jav}" width="40px" height="40px"></button></a>`
        },
        jpa || '', // 上级节点标识，根节点传空字符串
        'toolTip' // 可根据需求自定义每个节点的提示文本
      ];
    });
    
    // 批量添加所有行
    data.addRows(chartRows);

    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    chart.draw(data, {'allowHtml':true});
  }
</script>

关键说明 #

• 使用Array.map()遍历数组，自动将每一项转换为OrgChart需要的行结构，无需手动指定索引。
• 移除了原代码中v字段多余的单引号，避免标识值被错误包裹导致层级关联失效。
• 用模板字符串${}替代传统字符串拼接，语法更简洁且不易出错。
• 若passedArray的第一个元素是表头而非有效节点数据，可改用passedArray.slice(1).map(...)跳过首项。

内容的提问来源于stack exchange，提问作者Kliz