Question

我试图在javascript中使用一组对象构建一个族树。数据存储在MySQL数据库中，并通过PHP页面访问。

我将PHP中的对象数组返回到javascript，如下所示：（基本上都是所有条目）

0 : {id: 24, sheep_name: "Mick", dam: 17, sire: 16}
1 : {id: 25, sheep_name: "Wendy", dam: 17, sire: 16}
2 : {id: 26, sheep_name: "Will", dam: 0, sire: 0}
3 : {id: 27, sheep_name: "a", dam: 25, sire: 26}
4 : {id: 28, sheep_name: "b", dam: 25, sire: 26}
5 : {id: 29, sheep_name: "c", dam: 25, sire: 26}
6 : {id: 30, sheep_name: "d", dam: 25, sire: 26}
7 : {id: 23, sheep_name: "h", dam: 19, sire: 18}
8 : {id: 21, sheep_name: "f", dam: 19, sire: 18}
9 : {id: 19, sheep_name: "Karen", dam: 0, sire: 0}
10 : {id: 20, sheep_name: "e", dam: 19, sire: 18}
11 : {id: 16, sheep_name: "Bob", dam: 0, sire: 0}
12 : {id: 17, sheep_name: "Stella", dam: 0, sire: 0}
13 : {id: 18, sheep_name: "Joe", dam: 17, sire: 16}
14 : {id: 22, sheep_name: "g", dam: 19, sire: 18}

最终目标是按如下方式生成HTML列表：

<ul>
    <li>a [27]
        <ul>
            <li>Wendy [25]
                <ul>
                    <li>Stella [17]</li>
                    <li>Bob [16]</li>
                </ul>
            </li>
            <li>Will [26]</li>
        </ul>
    </li>
</ul>

所以，给定一个起点 - id：27 - sheep_name：＆＃39; a＆＃39;，如何生成数据以创建列表？

我知道我将不得不多次遍历数据，直到没有返回结果但是它的机制丢失了。

数据集没有固定为父母，孩子可以随时添加。

我可以完全控制这个方面，javascript，PHP＆amp; MySQL包括数据库结构。

感激地收到任何指示或建议......

作为参考，这是一个绵羊的家谱和起点＆＃39;是一个孩子，然后是家谱：

父母 - 祖父母=曾祖父母 - 伟大的曾祖父母 - 等等。

它就像人类的家谱，但却相反。

*注意：Dam =母亲，父亲=父亲

Answer 1

这是一个简单的递归函数，可以创建一个可以使用的html字符串：

＆＃13;

var sheep = [
{id: 24, sheep_name: "Mick", dam: 17, sire: 16},
{id: 25, sheep_name: "Wendy", dam: 17, sire: 16},
{id: 26, sheep_name: "Will", dam: 0, sire: 0},
{id: 27, sheep_name: "a", dam: 25, sire: 26},
{id: 28, sheep_name: "b", dam: 25, sire: 26},
{id: 29, sheep_name: "c", dam: 25, sire: 26},
{id: 30, sheep_name: "d", dam: 25, sire: 26},
{id: 23, sheep_name: "h", dam: 19, sire: 18},
{id: 21, sheep_name: "f", dam: 19, sire: 18},
{id: 19, sheep_name: "Karen", dam: 0, sire: 0},
{id: 20, sheep_name: "e", dam: 19, sire: 18},
{id: 16, sheep_name: "Bob", dam: 0, sire: 0},
{id: 17, sheep_name: "Stella", dam: 0, sire: 0},
{id: 18, sheep_name: "Joe", dam: 17, sire: 16},
{id: 22, sheep_name: "g", dam: 19, sire: 18}
];

function createSheepHTML(id) {
  var s = sheep.find(e => e.id == id);
  if (s) {
    var out = "<li>" + s.sheep_name + " [" + s.id + "]";
    if (s.dam || s.sire) {
      out += "<ul>";
      if (s.dam) {
        out += createSheepHTML(s.dam);
      }
      if (s.sire) {
        out += createSheepHTML(s.sire);
      }
      out += "</ul>";
    }
    out += "</li>";
    return out;
  }
}

document.getElementById("sheepGoHere").innerHTML = createSheepHTML(27);

＆＃13;

<ul id="sheepGoHere"></ul>

＆＃13;

Answer 2

我首先按照ES6 Map中的id键入对象。然后使用递归函数：

在地图中查找给定的id以检索具有该/ id（s）的对象
跳过id不匹配的那些（例如0）
使用递归为每个对象构建父亲和母亲的HTML，并将该对象的HTML与ul tag
将这些HTML加在一起，并将结果包装在function toHTML(sheep, id) { return (function recurse(map, ids, indent) { const html = ids.map( id => map.get(id) ) // Retrieve the sheep objects by id .filter(Boolean) // Remove non-matches .map(obj => `${indent} <li>${obj.sheep_name} [${obj.id}]\n` + recurse(map, [obj.dam, obj.sire], indent+' ') + // Recurse `${indent} </li>\n`) .join(''); return html.length ? `${indent}<ul>\n${html}${indent}</ul>\n` : ''; })(new Map(sheep.map(obj => [obj.id, obj])), [id], ''); // Create map } const sheep = [{id: 24, sheep_name: "Mick", dam: 17, sire: 16},{id: 25, sheep_name: "Wendy", dam: 17, sire: 16},{id: 26, sheep_name: "Will", dam: 0, sire: 0},{id: 27, sheep_name: "a", dam: 25, sire: 26},{id: 28, sheep_name: "b", dam: 25, sire: 26},{id: 29, sheep_name: "c", dam: 25, sire: 26},{id: 30, sheep_name: "d", dam: 25, sire: 26},{id: 23, sheep_name: "h", dam: 19, sire: 18},{id: 21, sheep_name: "f", dam: 19, sire: 18},{id: 19, sheep_name: "Karen", dam: 0, sire: 0},{id: 20, sheep_name: "e", dam: 19, sire: 18},{id: 16, sheep_name: "Bob", dam: 0, sire: 0},{id: 17, sheep_name: "Stella", dam: 0, sire: 0},{id: 18, sheep_name: "Joe", dam: 17, sire: 16},{id: 22, sheep_name: "g", dam: 19, sire: 18}]; const html = toHTML(sheep, 27); console.log(html);标记

作为可选添加，您可以传递缩进级别。

以下是ES6代码：

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

{{1}}

Answer 3

您可以获取一个包含对父项的所有引用的对象，并选择该人的id并获取嵌套对象。

var family = [{ id: 24, sheep_name: "Mick", dam: 17, sire: 16 }, { id: 25, sheep_name: "Wendy", dam: 17, sire: 16 }, { id: 26, sheep_name: "Will", dam: 0, sire: 0 }, { id: 27, sheep_name: "a", dam: 25, sire: 26 }, { id: 28, sheep_name: "b", dam: 25, sire: 26 }, { id: 29, sheep_name: "c", dam: 25, sire: 26 }, { id: 30, sheep_name: "d", dam: 25, sire: 26 }, { id: 23, sheep_name: "h", dam: 19, sire: 18 }, { id: 21, sheep_name: "f", dam: 19, sire: 18 }, { id: 19, sheep_name: "Karen", dam: 0, sire: 0 }, { id: 20, sheep_name: "e", dam: 19, sire: 18 }, { id: 16, sheep_name: "Bob", dam: 0, sire: 0 }, { id: 17, sheep_name: "Stella", dam: 0, sire: 0 }, { id: 18, sheep_name: "Joe", dam: 17, sire: 16 }, { id: 22, sheep_name: "g", dam: 19, sire: 18 }],
    ids = {};

family.forEach(function (person) {
    ids[person.id] = Object.assign(ids[person.id] || {}, person);
    ids[person.dam] = ids[person.dam] || {};
    ids[person.id].dam = ids[person.dam];
    ids[person.sire] = ids[person.sire] || {};
    ids[person.id].sire = ids[person.sire];
});

console.log(JSON.stringify(ids, 0, 4));

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

从对象数组

3 个答案: