如何根据内容类型在 html 格式之间切换？

Question

我正在寻找一种解决方案，如何根据存储在我的 JSON 中的内容类型在多种 html 格式之间切换。

我现在使用AJAX和JSON来填写html格式：format-text.html.

      $.ajax({
                    url: 'api/datacontent.json',
                    dataType: 'json',
                    success: function(data) {

                        root.dataArr = data;
                        root.objectArr = root.dataArr.content;
                        root.timeEvent;     
                        root.triggeredId = -1; 


                        $.get('directives/format-text.html', function(response){
                            console.log('succes');
                        })

                        .done(function (response) {
                              // Here I fill in the blanks with a for loop
                        }

                        .fail(function (response) {
                             console.dir(response); 
                        });
}

JSON：

{
        "title":    "Data content",
        "content":  [
            {
                "type" :        "youtube",
                "timeTrigger":  5,
                "title":        "Youtube",
                "subtitle":     "YouTube Channel",
                "picture" :     "images/content/london.jpg",
                "text":         "Visit their YouTube channel here.",
            },{
                "type" :        "location",
                "timeTrigger":  25,
                "title":        "London",
                "google":       "https://www.google.nl/maps/place/Londen,+Verenigd+Koninkrijk/@51.5340878,-0.0978221,12z/data=!4m2!3m1!1s0x47d8a00baf21de75:0x52963a5addd52a99"
            },{
                "type":         "text",
                "timeTrigger":  34,
                "title":        "Sherlock Holmes",
                "subtitle":     "Detective",
                "picture" :     "images/content/sherlockholmes.jpg",
                "text":         "Sherlock Holmes is a fictional detective created by British author Sir Arthur Conan Doyle. Holmes is known for his astute logical reasoning, his ability to adopt almost any disguise, and his use of forensic science to solve difficult cases.",
                "readmore":     "https://en.wikipedia.org/wiki/Sherlock_Holmes"
            }

如您所见，我使用 format-text.html 来填写内容。但我的 JSON 文件包含多种类型的内容，例如位置、文本和外部链接，每种类型都有不同的 css 样式。 如何在这些 html 内容之间切换并填写正确的内容块？

留意一些建议。提前谢谢你。

Answer 1

有点混乱，你没有告诉我们你想如何在视图中对这些数据类型进行分类。

无论如何，如果 API 处理单个列表中的所有内容，那么您可以将结果分类到一个新数组中。

var formattedArr = {
  'videos' : [],
  'locations' : [],
  'texts' : []
};

for( var i =0; i <= dataContent.content.length; i++ ) {
  switch( dataContent.content[i].type ) {
    case 'youtube' : formatedArr.videos.push( dataContent.content[i] ); break;
    case 'location' :formatedArr.locations.push( dataContent.content[i] ); break;
    case 'text' : formatedArr.texts.push( dataContent.content[i] );
  }
}

然后您可以轻松地遍历类型。当然，如果 API 能够为您提供所需的格式，那就更好了。