How to map json to list element in javascript?-CodePudding

From a json array I have to show the chapter name within the nested subchapter name and nested slide name to the li element in ul in sidebar nav list. Here is the output of my code. https://prnt.sc/hNqhpZTtQyc but it is repeating chapter name e.g. chapter 1. How to avoid repeat of chapter names. enter image description here

var myChapters = [{
    "chapterName": "Chapter 1",
    "subChapterName": "Orientation\r",
    "slide": "Slide 1"
  },
  {
    "chapterName": "Chapter 1",
    "subChapterName": "Control Systems / Dashboard\r",
    "slide": "Slide 2"
  },
  {
    "chapterName": "Chapter 1",
    "subChapterName": "Vehicle Inspections\r",
    "slide": "Slide 3"
  },
  {
    "chapterName": "Chapter 2",
    "subChapterName": "Visual Search\r",
    "slide": "Slide 9"
  },
  {
    "chapterName": "Chapter 2",
    "subChapterName": "Distraction while driving\r",
    "slide": "Slide 10"
  },
  {
    "chapterName": "Chapter 2",
    "subChapterName": "Speed Management\r",
    "slide": "Slide 11"
  },

  {
    "chapterName": "Chapter 3",
    "subChapterName": "Skid Control\r",
    "slide": "Slide 16"
  },
  {
    "chapterName": "Chapter 3",
    "subChapterName": "Railroad Crossings\r",
    "slide": "Slide 17"
  },
  {
    "chapterName": "Chapter 4",
    "subChapterName": "Identification & Diagnosis Malfunctions\r",
    "slide": "Slide 18"
  },
  {
    "chapterName": "Chapter 4",
    "subChapterName": "Roadside Inspections\r",
    "slide": "Slide 19"
  },
  {
    "chapterName": "Chapter 4",
    "subChapterName": "Maintenance\r",
    "slide": "Slide 20"
  },
  {
    "chapterName": "Chapter 5",
    "subChapterName": "Medical Requirements\r",
    "slide": "Slide 21"
  },
  {
    "chapterName": "Chapter 5",
    "subChapterName": "Handling & Documenting Cargo\r",
    "slide": "Slide 22"
  },
  {
    "chapterName": "Chapter 5",
    "subChapterName": "Environmental Compliance Issues\r",
    "slide": "Slide 23"
  }
];

<li >
  <a href="#" ><i ></i><span>Chapter One</span><i ></i></a>
  <ul >
    <li  onclick="">
      <a href="/addstudent" ><i ></i>Heading One</a>
    </li>
    <li >
      <a href="/studentlist" ><i ></i>Heading Two</a>
    </li>
  </ul>
</li>

CodePudding user response：

const chapters = [ 
    { "chapterName": "Chapter 1", "subChapterName": "Orientation\r", "slide": "Slide 1" }, 
    { "chapterName": "Chapter 1", "subChapterName": "Control Systems / Dashboard\r", "slide": "Slide 2" }, 
    { "chapterName": "Chapter 1", "subChapterName": "Vehicle Inspections\r", "slide": "Slide 3" }, 
    { "chapterName": "Chapter 2", "subChapterName": "Visual Search\r", "slide": "Slide 9" }, 
    { "chapterName": "Chapter 2", "subChapterName": "Distraction while driving\r", "slide": "Slide 10" }, 
    { "chapterName": "Chapter 2", "subChapterName": "Speed Management\r", "slide": "Slide 11" },
    { "chapterName": "Chapter 3", "subChapterName": "Skid Control\r", "slide": "Slide 16" },
    { "chapterName": "Chapter 3", "subChapterName": "Railroad Crossings\r", "slide": "Slide 17" },
    { "chapterName": "Chapter 4",  "subChapterName": "Identification & Diagnosis Malfunctions\r", "slide": "Slide 18" },
    { "chapterName": "Chapter 4",  "subChapterName": "Roadside Inspections\r", "slide": "Slide 19" },
    { "chapterName": "Chapter 4",  "subChapterName": "Maintenance\r", "slide": "Slide 20" },
    { "chapterName": "Chapter 5",  "subChapterName": "Medical Requirements\r", "slide": "Slide 21" },
    { "chapterName": "Chapter 5",  "subChapterName": "Handling & Documenting Cargo\r", "slide": "Slide 22" },
    { "chapterName": "Chapter 5",  "subChapterName": "Environmental Compliance Issues\r", "slide": "Slide 23" }
];
const sortedArray = chapters
.sort((a,b) => Number(a.slide > b.slide) - Number(a.slide < b.slide))
.sort((a,b) => Number(a.chapterName > b.chapterName) - Number(a.chapterName < b.chapterName));
// Transform Array to Object[chapterName: string]subChapterName: string
const result = {};
for (const value of sortedArray) {
    if (!result.hasOwnProperty(value.chapterName)) {
        result[value.chapterName] = [];
    }
    result[value.chapterName][value.slide] = value.subChapterName;
}

console.log(`Usage:`);
for (const key of Object.keys(result)) {
    console.log(`${key} have ${Object.keys(result[key]).length} elements`);
    for (const skey of Object.keys(result[key])) {
        console.log(`${skey}: %o`, result[key][skey]);
    }
}

CodePudding user response：

var myChapters = [{
    "chapterName": "Chapter 1",
    "subChapterName": "Orientation\r",
    "slide": "Slide 1"
  },
  {
    "chapterName": "Chapter 1",
    "subChapterName": "Control Systems / Dashboard\r",
    "slide": "Slide 2"
  },
  {
    "chapterName": "Chapter 1",
    "subChapterName": "Vehicle Inspections\r",
    "slide": "Slide 3"
  },
  {
    "chapterName": "Chapter 2",
    "subChapterName": "Visual Search\r",
    "slide": "Slide 9"
  },
  {
    "chapterName": "Chapter 2",
    "subChapterName": "Distraction while driving\r",
    "slide": "Slide 10"
  },
  {
    "chapterName": "Chapter 2",
    "subChapterName": "Speed Management\r",
    "slide": "Slide 11"
  },

  {
    "chapterName": "Chapter 3",
    "subChapterName": "Skid Control\r",
    "slide": "Slide 16"
  },
  {
    "chapterName": "Chapter 3",
    "subChapterName": "Railroad Crossings\r",
    "slide": "Slide 17"
  },
  {
    "chapterName": "Chapter 4",
    "subChapterName": "Identification & Diagnosis Malfunctions\r",
    "slide": "Slide 18"
  },
  {
    "chapterName": "Chapter 4",
    "subChapterName": "Roadside Inspections\r",
    "slide": "Slide 19"
  },
  {
    "chapterName": "Chapter 4",
    "subChapterName": "Maintenance\r",
    "slide": "Slide 20"
  },
  {
    "chapterName": "Chapter 5",
    "subChapterName": "Medical Requirements\r",
    "slide": "Slide 21"
  },
  {
    "chapterName": "Chapter 5",
    "subChapterName": "Handling & Documenting Cargo\r",
    "slide": "Slide 22"
  },
  {
    "chapterName": "Chapter 5",
    "subChapterName": "Environmental Compliance Issues\r",
    "slide": "Slide 23"
  }
];

const groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

let groupedChapters = groupBy(myChapters, "chapterName");

const list = document.createElement('ul');

for (const [key, value] of Object.entries(groupedChapters)) {
  const item = document.createElement('li');
  item.appendChild(document.createTextNode(key));

  for (let i = 0; i < value.length; i  ) {
    var item2 = document.createElement('ul');
    item2.appendChild(document.createTextNode(value[i].subChapterName   " - "   value[i].slide));
    item.appendChild(item2);
  }

  list.appendChild(item);
}

document.getElementById('foo').appendChild(list);

<div id='foo'>
</div>