时间戳

首页 > 解决方案 > 根据 JSON 数据将元素附加到 div

javascript - 根据 JSON 数据将元素附加到 div

问题描述

我有一个包含“课程类别”和“标题”的本地 JSON 文件。每个Category有很多Title，每个Title对应一个Category。

我创建了三个单独的 div：“热门课程”、“新添加的课程”，最后是“热门课程”，并且这些 div 由类别填充。单击类别会打开一个模式，该模式会再次显示类别名称和正确的类别描述。它应该显示与该类别相关的所有标题，例如单击“动物”类别应显示“龙猫”、“蝾螈”、“跳蚤”等。

我想这样做，以便单击类别仅显示与该类别关联的标题。我在模式中看到了标题——但是我只看到每个类别中的一个标题。根据标题的顺序，我相信它们来自“所有课程”类别。我不能确定是否是这种方式，但是当我单击不在“全部”下的类别时，我会看到同样的事情。

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> <!-- &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 -->

标签： javascriptjqueryjsontwitter-bootstrapappend

解决方案

看起来你的错误是你迭代到 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>")
}

推荐阅读