Создайте хлебную крошку в javascript с родительским отношением - PullRequest
Новая
       21

Создайте хлебную крошку в javascript с родительским отношением

1 голос
/ 08 июля 2020

Я пытаюсь показать заголовок в стиле хлебных крошек, в котором каждый дочерний элемент будет связан с несколькими родителями

У меня есть эта структура данных 

const modelData = {
  course: {
    id: 'courseUUID1',
    chapters: ['12345', '678910'],
    title: 'course 1'
  },

  // Chapters are children of course as you see above in chapters array
  chapters: [
    { 
      id: '12345',
      sections: ['88999', '9999888'],
      title: 'chapter 1'
    },
    { 
      id: '678910',
      sections: [],
      title: 'chapter 2'
    }
  ],

  // section is a child of chapters as you see above in array
  sections: [
    {
      id: '88999',
      title: 'Section 1'
    },
    {
      id: '9999888',
      title: 'Section 2'
    }
  ]
}

Итак, как должен выглядеть конечный результат если я просто консолью заголовки каждой модели, он должен показать мне это

Course -> title: Course 1 Глава-> заголовок: Course 1 | chapter 1 section: -> title: Course 1 | chapter 1 | section 1

Итак, чтобы объяснить это дальше, >>> каждый дочерний элемент должен включать заголовок всех своих последующих родителей. как в приведенном выше примере section является дочерним по отношению к chapter, а chapter является дочерним по отношению к course

, самый внешний родительский элемент не будет иметь изменений в заголовке

Спасибо заранее

1 Ответ

1 голос
/ 09 июля 2020

Обычно одна и та же глава не повторяется в курсе или книге.

С точки зрения иерархии, основанной на фрагменте, может быть полезно. 

const modelData = [ 
    { "title" : "Course 1", "id" : "courseUUID1", "children" : [
        { "title" : "Chapter 1", "id" : "12345", "children" : [
            { "title" : "Section 1", "roleId" : "role11", "children" : []},
            { "title" : "Section 2", "roleId" : "role11", "children" : []},
        ]}
    ]},
];


let index = {};

function buildIndex(root, children) {
    for(var i in children) {
        index[children[i].title] = root;
        buildIndex(children[i].title, children[i].children);
    }
}

buildIndex("Book", modelData);

function getIndex(idx) {
    return index[idx] ? getIndex(index[idx]).concat([idx]) : [idx];
}

console.log(  getIndex("Section 2")  );
//Check Console ["Book", "Course 1", "Chapter 1", "Section 2"]
...