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

Posted 2023-02-22

【中文标题】根据 JSON 数据将元素附加到 div

【英文标题】：Appending elements to div depending on JSON data

【发布时间】：2019-08-05 14:47:45

【问题描述】：

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

我创建了three separate divs：“Top Courses”、“New-Added Courses”，最后是“Top Courses”，div 由类别填充。单击类别会打开一个模式，该模式会再次显示类别名称和正确的类别描述。它应该显示与该类别关联的所有标题，例如点击“动物”类别应显示“龙猫”、“蝾螈”、“跳蚤”等。

我希望点击一个类别仅显示与该类别关联的标题。我在模式中看到标题---但是I'm only seeing one Title 来自每个类别。根据标题的顺序，我相信它们来自“所有课程”类别。我不能确定是否是这种方式，但是当我单击“全部”下 not 的类别时，我会看到相同的内容。

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

newCourses.js fiddle

allCourses.js fiddle

【参考方案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>")

【讨论】：

是的，做到了！我有一种预感，topCrs 被过滤是问题的一部分，但我不知道如何将它集成到我的代码中。我还在var titles 之前添加了$(".training-titles").empty();，以防止点击时出现重复项。谢谢！