根据JSON数据向div添加元素

Question

根据JSON数据向div添加元素

javascriptjqueryjsontwitter-bootstrapappend

7

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

我创建了三个独立的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 -->

- Bodrov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shushu304 · Accepted Answer

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