從一系列對象構建家譜

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：'a'，我該如何生成數據以創建列表？

我知道我將不得不多次遍歷數據，直到沒有結果返回，但數據的機制使我迷失了。

數據集不是固定的，因為可以隨時添加父母和孩子。

我對javascript，PHP和MySQL的所有方面都擁有完全控制權，包括數據庫結構。

非常感謝收到的任何指示或建議...

作為參考，這是一棵綿羊的家譜，而“起點”是一個孩子，然后該家譜如下：

父母-祖父母=曾祖父母-曾曾祖父母-等等

就像人類的家譜，但相反。

*注：水壩=母親，父親=父親

Answer 1

這是一個簡單的遞歸函數，它創建一個可以使用的html字符串：

 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); 

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

Answer 2

我首先要在ES6地圖中通過對象的ID來鍵入對象。 然后使用一個遞歸函數，它將：

• 在地圖中查找給定的ID，以檢索具有該ID /該ID的對象
• 跳過那些ID不匹配的內容（例如0）
• 使用遞歸為每個對象的父親和母親構建HTML，並將該對象的HTML和當前對象的信息包裝在li標記中
• 將這些HTML連接在一起，並將結果包裝在ul標簽中

作為可選的補充，您可以傳遞縮進級別。

這是該代碼的ES6代碼：

 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); 

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

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; }