Как итеративно использовать appendChild и фрагментировать LI в UL? - PullRequest
Новая
       6

Как итеративно использовать appendChild и фрагментировать LI в UL?

0 голосов
/ 16 января 2020

Я пытаюсь создать список в списке. Хотя я могу успешно создать родительский список, мне не удается внедрить итерацию подмассива.

У меня есть массив объектов. Эти объекты могут иметь массивы объектов внутри них. Пример: 

[
    { class: 'math', students: [ student objs ] } 
   ,{ class: 'science', students: [ student objs ] } 
]

Я хочу итеративно составить список классов и внутри классов учащихся. 

var data = [
    // { id:'math', students: [ { id:'math student a' }, { id:'math student b'} ] },
    { id:'sciences', students: [ { id:'sci student c' }, { id:'sci student d', award: [ { id: "award a" }, { id: "award b"} ] }
] } ];

function fillElement( arr, dom ) {
    var outerEl = document.createDocumentFragment();
    dom.appendChild(document.createElement('ul'));

    arr.forEach(function ( obj,idx ) {
      var li = document.createElement('li');
      var ul = document.createElement('ul');

      li.textContent = obj.id;
      outerEl.appendChild( li );
      dom.querySelector('ul:first-of-type').appendChild( outerEl );

      for (var prop in obj) {
        if( Array.isArray( obj[prop] ) ){
          dom = dom.querySelector('li:last-of-type').appendChild(document.createElement('ul'));      
          fillElement( obj[prop], dom );
        }
      }
    });
};

var dom = document.querySelector("#dom");
fillElement( data,dom  );

Как объединить два фрагмента, чтобы получить встроенный домен 

<ul>
    <li>math</li>
    <li>
         <ul>
             <li>student a</li>
             <li>student b</li>
         </ul>
    </li>
</ul>

В настоящее время мой HTML как таковой 

<div id="dom"><ul>
        <li>sciences<ul>
                <ul>
                    <li>sci student c</li>
                    <li>sci student d<ul>
                            <ul>
                                <li>award a</li>
                                <li>award b</li>
                            </ul>
                        </ul>
                    </li>
                </ul>
            </ul>
        </li>
    </ul>
</div>

1 Ответ

0 голосов
/ 16 января 2020

Здесь вы go:

HTML

<body>
    <ul></ul>
</body>

JAVASCRIPT

// Gets the ul tag in the body tag in which we will add our li tags.
var ul = document.querySelector('body > ul');

var classes = [
    { class: 'math', students: ['student a', 'student b'] },
    { class: 'science', students: ['student c', 'student d'] }
];

function fillUlElement(ulElement, classes) {

    // First we iterate over all the classes. 
    // We can't use class as variable name since that is a reserved keyword 
    // in javascript, so we are using classInfo as a variable name instead.
    classes.forEach(function (classInfo) {
        // We create a li tag that we will add to the ul tag at the end
        // of this function.
        var li = document.createElement('li');

        // We set the name of the class as text in our li tag first.
        // Be aware that textContent clears all the content in the li tag.
        // So we need to set the name of the class before we add our
        // list of students.
        li.textContent = classInfo.class;

        // Create the ul tag which will contain the li tags of students.
        var studentsUlElement = document.createElement('ul');
        classInfo.students.forEach(function (student) {
            var studentElement = document.createElement('li');
            studentElement.textContent = student;

            // Add the li tag with the student name to the ul tag of students.
            studentsUlElement.appendChild(studentElement);
        });
        // Add our ul tag which contains a list of li tags/student names.
        li.appendChild(studentsUlElement);

        // And at last add the li tag, which contains the name of the 
        // class and the ul tag with students, to the main ul tag
        ulElement.appendChild(li)
    });
};

// Passing the ul tag and the classes array into this function so we can
// do this with other ul tags and arrays with the same format as well.
fillUlElement(ul, classes);
...