how to dynamically generate nested li list using js

dynamically-generate-nested-li.md

how to dynamically generate nested li list using js

    
//

https://stackoverflow.com/questions/19363972/create-nested-lists-from-a-dynamically-created-single-list

jquery wrap & wrapall & wrapinner

https://api.jquery.com/wrap/

https://api.jquery.com/wrapall/

https://api.jquery.com/wrapinner/

Wrap an HTML structure around each element in the set of matched elements.

在一组匹配的元素中的每个元素周围包装一个HTML结构。

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

.wrap( wrappingElement )

$( ".inner" ).wrap( "<div class='new'></div>" );

<div class="container">
    <div class="new">
        <div class="inner">Hello</div>
    </div>
    <div class="new">
        <div class="inner">Goodbye</div>
    </div>
</div>

.wrap( function )

$( ".inner" ).wrap(function() {
    return "<div class='" + $( this ).text() + "'></div>";
});

<div class="container">
    <div class="Hello">
        <div class="inner">Hello</div>
    </div>
    <div class="Goodbye">
        <div class="inner">Goodbye</div>
    </div>
</div>

Dynamic nested ul\li list from json data using Javascript

https://stackoverflow.com/questions/21140069/dynamic-nested-ul-li-list-from-json-data-using-javascript

data

[
    {
        "id":"1",
        "name":"name_1",
        "parent_id":"0",
        "depth":"0"
    },
    {
        "id":"2",
        "name":"name_2",
        "parent_id":"0",
        "depth":"0"
    },
    {
        "id":"3",
        "name":"name_3",
        "parent_id":"1",
        "depth":"1"
    },
    {
        "id":"4",
        "name":"name_4",
        "parent_id":"3",
        "depth":"2"
    }
]

want to get this

<ul>
    <li class="depth 0">name_1</li>
    <li class="depth 0">name_2
        <ul>
            <li class="depth 1">name_3
                <ul>
                    <li class="depth 2">name_3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

json data

[
    {
        "id":"1001",
        "name":"公司基本资料",
        "isParent":true
    },
    {
        "id":"1003",
        "name":"股东研究",
        "isParent":true
    },
    {
        "id":"1002",
        "name":"管理层研究",
        "isParent":true
    },
    {
        "id":"1005",
        "name":"财务数据",
        "isParent":true
    },
    {
        "id":"1006",
        "name":"财务分析",
        "isParent":true
    },
    {
        "id":"1004",
        "name":"发行与分配",
        "isParent":true
    },
    {
        "id":"1007",
        "name":"市场交易信息",
        "isParent":true
    },
    {
        "id":"5080",
        "name":"重要事项",
        "isParent":true
    },
    {
        "id":"1008",
        "name":"同行业比较",
        "isParent":true
    }
]

https://cdn.xgqfrms.xyz/json/datalist.json

https://cdn.xgqfrms.xyz/json/data-list.json

collapsible-lists

http://code.stephenmorley.org/javascript/collapsible-lists/

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_wrapall

const data = [
    {"id": "1", "name": "name_1", "parent_id": "0", "depth": "0"},
    {"id": "2", "name": "name_2", "parent_id": "0", "depth": "0"},
    {"id": "3", "name": "name_3", "parent_id": "1", "depth": "1"},
    {"id": "4", "name": "name_4", "parent_id": "3", "depth": "2"}
];

function getMenu(parentID){
    let style = `
        color: rgba(0,2555,0,0.7);
        font-size: 32px;
        border: 1px solid red;
        background: #000;
    `;
    return (
        data.filter(
            // filter parentID
            function(node){
                console.log(`%c nodes = `, `${style}`, node);
                return node.parent_id === parentID;
            }
        ).map(
            // map subMenu
            function(node){
                let exists = data.some(
                    // test childNode
                    function(childNode){
                        console.log(`%c childNode = `, `${style}`, node);
                        return childNode.parent_id === node.id;
                    }
                );
                // recursive
                let subMenu = exists ? `<ul>${getMenu(node.id).join('')}</ul>` : ``;
                return `<li>${node.name}&${subMenu}</li>`;
            }
        )
    );
}


// let initLevel = 0;

let endMenu =getMenu("0");

console.log(`<ul>${endMenu.join('<br/>')}</ul>`);


/*
<ul>
    <li> name_1
        <ul>
            <li> name_3
                <ul>
                    <li> name_4 </li>
                </ul>
            </li>
        </ul>
    </li>
    <li> name_2 </li>
</ul>
*/



/*
<ul>
    <li> name_1 
        <ul>
            <li> name_3 
                <ul> 
                    <li> name_4  </li>
                </ul>
            </li>
        </ul>
    </li>
    <br/>
    <li> name_2  </li>
</ul>
*/

fetch

let url = `https://raw.githubusercontent.com/gildata/json/master/datas/ntb-F9/csjj-old.json`;

fetch(url)
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
})
.then((repos)=>{
    console.log(`repos = ${repos}`);
    // Object.keys(myArray).length
    console.log(`json.length = ${Object.keys(repos).length}`);
    console.log(`Button = ${repos.ToolBar.Button[0]}`);
    console.log(`Button = ${repos.ToolBar.Button[1]}`);
    // "@name"
    // @json-error.json
    let name = "@name";
    console.log(`name = ${repos.name}`);
});



url = `https://raw.githubusercontent.com/gildata/json/master/datas/ntb-F9/csjj.json`;

fetch(url)
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
})
.then((repos)=>{
    console.log(`repos = ${repos}`);
    // Object.keys(myArray).length
    console.log(`json.length = ${Object.keys(repos).length}`);
    console.log(`Button[0] = ${repos.ToolBar.Button[0]}`);
    console.log(`ToolBar.Button[1].name = ${repos.ToolBar.Button[1].name}`);
    console.log(`ToolBar.Button[1].Captio = ${repos.ToolBar.Button[1].Caption}`);
    console.log(`name = ${repos.name}`);
    console.log(`name = ${repos.caption}`);
    console.log(`ToolBar.Caption = ${repos.ToolBar.Caption}`);
    console.log(`ToolBar.name= ${repos.ToolBar.name}`);
});













url = `https://cdn.xgqfrms.xyz/json/user1.json`;

fetch(url)
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
})
.then((repos)=>{
    console.log(`firstName = ${repos.firstName}`);
    console.log(`age = ${repos.age}`);
    console.log(`city = ${repos.address.city}`);
    console.log(`phoneNumber = ${repos.phoneNumber[0].number}`);
    console.log(`repos.length = ${repos.length}`);
});





fetch('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest',{
    method: 'get',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'X-Api-Key': `0987b00e542141369049e647701b65d9`
    }
})
.then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});


// https://gist.github.com/xgqfrms-GitHub/a3fcffb6d7923e2a7471041053f00162

https://gist.github.com/xgqfrms-gildata/5acc4a357722e9e2636009fbd6846338#gistcomment-2133459

React & GraphQL

https://gist.github.com/xgqfrms-GitHub/d3f1ac685335d481572d5390d7c31a1c

dynamically-add-child-components-in-react

https://gist.github.com/xgqfrms-gildata/5acc4a357722e9e2636009fbd6846338#gistcomment-2133571

how to dynamically generate nested li list using js

https://gist.github.com/xgqfrms-gildata/50d9af7fe5749fe199146e4e5e2f3f1e#gistcomment-2133425

https://jsfiddle.net/sW58K/1/

https://jsfiddle.net/paska/wdb151m8/1/

https://jsfiddle.net/paska/wdb151m8/2/

https://gist.github.com/xgqfrms-gildata/5acc4a357722e9e2636009fbd6846338

https://github.com/gildata/RAIO/issues/3

Ant bug & Solution

https://gist.github.com/xgqfrms-GitHub/4cf5cc3a67a9ed094cf008f13457bfac

native JS sort div !

https://gist.github.com/xgqfrms-GitHub/e3915ad946c6008e6a0d4d7335ae3112#gistcomment-2243564

RAIO/HTML5-Drag-Drop/F9-v2.0.0-modules/fast-preview/sortable.html