Добавление элементов в div в зависимости от данных JSON

Question

У меня есть локальный файл JSON, который содержит «Категории курсов» и «Заголовки». Каждая категория имеет много названий, и каждый заголовок соответствует одной категории.

Я создал три отдельных блока : «Лучшие курсы», «Недавно добавленные курсы» и, наконец, «Лучшие курсы», и элементы заполнены категориями. При нажатии на категорию открывается модальное окно, которое отображает имя категории во второй раз и правильное описание категории. Предполагается показать все названия, связанные с этой категорией, например, При нажатии на категорию «Животные» должны появиться «Шиншилла», «Аксолотль», «Блоха» и др.

Я хочу сделать так, чтобы при щелчке по категории только отображались заголовки, связанные с этой категорией. Я вижу заголовки в модальном --- однако Я вижу только один заголовок из каждой категории. Судя по порядку названий, я считаю, что они из категории "Все курсы". Я не могу точно сказать, так ли это, но когда я нажимаю на категорию, которая не в разделе «Все», я вижу то же самое.

JS Snippet:

var testjson = {
  "d": {
    "results": [{
      "Title": "Aardvark",
      "Category": "Animals",
      "Description": "a-desc",
      "TopTrainingCourse": false,
      "ID": 1,
      "Modified": "2019-03-05T20:13:46Z",
      "Created": "2019-03-05T20:13:36Z"
    }, {
      "Title": "Red Panda",
      "Category": "Animals",
      "Description": "a-desc",
      "TopTrainingCourse": true,
      "ID": 10,
      "Modified": "2019-03-06T21:08:25Z",
      "Created": "2019-03-06T21:08:25Z"
    }, {
      "Title": "Tennis",
      "Category": "Sports",
      "Description": "s-desc",
      "TopTrainingCourse": true,
      "ID": 11,
      "Modified": "2019-03-06T21:08:35Z",
      "Created": "2019-03-06T21:08:35Z"
    }]
  }
}


///// From topCourses.js /////

import testjson from './test.json';

export default class {
    constructor() {
    }

    loadTopCourses() {
        let topCrs = testjson.d.results
            .filter(x => x.TopTrainingCourse === true)
            .filter((el, idx, self) => { // no duplicates
                return (idx === self.map(el => el.Category).indexOf(el.Category))
            })
            .map(x => {
                return {
                    "Category": x.Category,
                    "Description": x.Description,
                    "Title": x.Title
                }
            });

        let curIndex = 0;
        $.each(topCrs, function(idx, val) {
            curIndex++; // this line must be here---if it's moved down the 1st col doesn't show
            let targetDiv = $("div.top-training-div > div[col='" + curIndex + "']");

            let modalTrigger = $('<div />', {
                'class': 'categoryName',
                'data-category': val.Category,
                'data-target': '#modal-id',
                'data-toggle': 'modal',
                'text': val.Category
            });

            targetDiv.append(modalTrigger);

            if(curIndex == 4) {
                curIndex = 0;
            }
        })

        $('.categoryName').click(function(val) {
            let cat = $(this).data('category');
            $('.modal-title').text(cat);

            // console.log($(this).data('category'));

            $(".category-desc").empty();
            var noDupeDescs = topCrs.filter(function(val) {
                return val.Category == this;
            }, cat)
            .map(function(val) {
                return val.Description;
            });

            $.each(noDupeDescs, function(idx, val) {
                $(".category-desc").append(val + "<br />")
            })

            ///

            $(".training-titles").empty();
            let titles = topCrs;



        $.each(titles, function(idx, val) { // ----- thought something like this could help
            for (var i = 0; i = titles.length; i++) {
                if $(titles.contains(val.Title)
                $(".training-titles").append("<li>" + val.Title + "</li>")
            }
        }
      });

    } // ------------------ loadTopCourses

}

Modal:

<div class="modal fade" id="modal-id" role="dialog" >
     <div class="modal-backdrop">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">CLOSE</span> <!-- &times; -->
            </button>
          </div>
          <div class="modal-body">
            <div class="category-desc"></div>
            <ul class="training-titles"></ul>
          </div>
        </div>
      </div>
     </div> <!-- modal-backdrop -->
    </div> <!-- modal fade -->

• newCourses.js fiddle

• скрипка allCourses.js

Answer 1

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

вам нужно снова выполнить итерацию по всем заголовкам из testjson.d.results и выполнить фильтрацию по категории, по которой вы щелкнули.

var titles = testjson.d.results.filter(x => x.Category === cat);

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

$.each(titles, function(idx, val) {
    $(".training-titles").append("<li>" + val.Title + "</li>")
}