Блог

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

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

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

Фрагмент JS:

 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

}
  

Модальный:

 <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> <!-- amp;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 скрипка

• allCourses.js скрипка

похоже, ваша ошибка заключается в том, что вы выполняете итерацию до 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>")
}