如何使用 jquery 模板化 json答案

【问题标题】：How to templating json using jquery如何使用 jquery 模板化 json
【发布时间】：2016-05-22 17:58:57
【问题描述】：

假设我的 json 像这样，我有 3 个不同的数据

[  
   {  
      "Pair":"",
      "Id":"8ca2df56-2523-4bc3-a648-61ec4debcaaf",
      "PubDate":"/Date(1463775846000)/",
      "Provider":null,
      "Market":""
   },
   {  
      "Pair":"",
      "Id":"74b2d7c7-bc2c-40ee-8245-7c698befa54d",
      "PubDate":"/Date(1463775247000)/",
      "Provider":null,
      "Market":""
   },
   {  
      "Pair":"",
      "Id":"0ee3cd96-1df8-49ba-b175-7a75d0840973",
      "PubDate":"/Date(1463773687000)/",
      "Provider":null,
      "Market":""
   }
]

我已经尝试过的

JQUERY

$.ajax({ 
            type: 'GET', 
            url: 'news.json', 
            data: { get_param: 'value' }, 
            dataType: 'json',
            success: function (data) { 
                console.log(data);
                $.each(data, function(index, element) {
                   $( ".content-news h3" ).append(  data[0].Title  );
                   **/** Stuck Here and it only call 1 data but i already use each function **/**
                });
            }
        });

HTML

    <div class="news">

                        <div class="ano">
                            <div class="content-news">
                                <h3 id="jtitle"> **/** I Want to Show Id Here **/** </h3>
                                <h4 id="jprovider" class="author">**/** I Want To Show  PubDate **/**</h4>
                                <p id="jsummary">
**/** I Want to Show Provider Here **/**
                                </p>
                                <div class="img-head" id="img-container">
    <!--                            <img src="" alt="img" class="img-responsive">-->
                                </div>
                            </div>
                            <div class="social-control">
                                <div class="head-control">
                                    <p id="jdate" class="inline gray"></p>
                                    <a href="#"><p class="pull-right">show more</p></a>
                                </div>
                                <div class="clear"></div>
                                <div class="footer-control">
                                    <p><a href="#"><i class="ion-ios-heart ion-spacing"></i>20</a></p>
                                    <p><a href="#" data-toggle="modal" data-target="#myModal"><i class="ion-chatbox ion-spacing"></i>2 comments</a></p>
                                    <p><a href="#"><i class="ion-android-share-alt ion-spacing"></i>share</a></p> 
                                </div>
                            </div>
                        </div>





                    </div>

JSFiddle

我只得到了 1 个结果。你们能给我一个提示或提示，告诉我如何使用 json 模板化 jquery。请对我放轻松。谢谢

这是我现在得到的结果，只有 1 个数据显示..

【问题讨论】：

@robert 请告诉我如何做到这一点。
@robert, dataType: 'json' 会解决这个问题的..
@robert 不生成 html 并且当 dataType 设置为 'json'时也不需要
@Fido 有很多方法可以生成 html。作为字符串......作为 jQuery 对象......使用模板引擎有几种。老实说，你应该很容易找到这方面的教程
@charlietfl 我已经尽力了。我还是找不到路。

标签： javascript jquery html css json

【解决方案1】：

您可以通过 data 属性上的 index 访问属性，如下所示：

$.ajax({
    type: 'GET',
    url: 'news.json',
    data: {
        get_param: 'value'
    },
    dataType: 'json',
    success: function(data) {
        //console.log(data);
        $.each(data, function(index, element) {
            console.log(
                data[index].Id,
                data[index].Pair,
                data[index].PubDate,
                data[index].Provider,
                data[index].Market
            );
        });
    }
});

哪个产生

8ca2df56-2523-4bc3-a648-61ec4debcaaf  /Date(1463775846000)/ null 
74b2d7c7-bc2c-40ee-8245-7c698befa54d  /Date(1463775247000)/ null 
0ee3cd96-1df8-49ba-b175-7a75d0840973  /Date(1463773687000)/ null

要处理模板，您可以创建一个返回每个项目的标记的函数：

function template(title, provider, summary) {
    var $temp = $('<div/>');
    $temp.append($('<h3/>', {
        text: title
    }));
    $temp.append($('<h4/>', {
        text: provider,
        class: 'author'
    }));
    $temp.append($('<p/>', {
        text: summary
    }));
    console.log($temp);
    return $temp;
}

$.ajax({
    type: 'GET',
    url: 'https://cdn.rawgit.com/enki-code/4ec2b6efa84dfed8922b390d2a1a4c5a/raw/dc94405f12d1d5105e54584a6c53ca30d1863b4a/so.json',
    data: {
        get_param: 'value'
    },
    dataType: 'json',
    success: function(data) {
        //console.log(data);
        $.each(data, function(index, element) {
            $('.content-news').append(template(data[index].Id, data[index].PubDate, data[index].Provider));
            console.log(
                data[index].Id,
                data[index].Pair,
                data[index].PubDate,
                data[index].Provider,
                data[index].Market
            );
        });
    }
});

这里以你的小提琴的updated version 为例。

您可能需要对 CSS 进行一些小调整，以使其看起来符合您的喜好。

【讨论】：

仅供参考 data[index] 与 element 或 this 相同
@ᴉʞuǝ 尝试使用此链接 url 插入 subscriptions.fxstreet.com/json/…
适合我吗？有什么问题。
改用url: 'https://subscriptions.fxstreet.com/json/news.aspx?c=A0DC975D13C44CE697EC&i=englishnewscharts',。为我工作。请注意 HTTPS。 See this fiddle
ohh https.. 好的数据已经捕获最后一个问题是你可以看到罗伯特解决方案的布局。但是当我尝试使用他的解决方案时，它不会通过使用 http 或 https 显示任何数据。 jsfiddle.net/robert11094/65zjvy5k/3

【解决方案2】：

你的 json 文件有一个对象数组，所以首先你需要一个一个地循环对象

也不要将each 用于序列化数组，因为使用普通的for 循环会花费更多时间

答案在这里 jsfiddle.net/robert11094/65zjvy5k/3

或者直接使用这个html页面

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: 'http://subscriptions.fxstreet.com/json/news.aspx?c=A0DC975D13C44CE697EC&i=englishnewscharts',
            data: { get_param: 'value' },
            dataType: 'json',
            success: function (data) {
                console.log(data);
                for (var i=0;i<data.length;i++){
                var html=
                    '<div class="ano">'+
                    '    <div class="content-news">'+
                    '        <h3 id="jtitle"> '+data[i].Id+' </h3>'+
                    '        <h4 id="jprovider" class="author">'+data[i].PubDate+'</h4>'+
                    '        <p id="jsummary">'+
                    data[i].Provider+
                    '        </p>'+
                    '        <div class="img-head" id="img-container">'+
                    '            <!-- <img src="" alt="img" class="img-responsive">-->'+
                    '        </div>'+
                    '    </div>'+
                    '    <div class="social-control">'+
                    '        <div class="head-control">'+
                    '        <p id="jdate" class="inline gray"></p>'+
                    '        <a href="#"><p class="pull-right">show more</p></a>'+
                    '    </div>'+
                    '    <div class="clear"></div>'+
                    '        <div class="footer-control">'+
                    '            <p><a href="#"><i class="ion-ios-heart ion-spacing"></i>20</a></p>'+
                    '            <p><a href="#" data-toggle="modal" data-target="#myModal"><i class="ion-chatbox ion-spacing"></i>2 comments</a></p>'+
                    '            <p><a href="#"><i class="ion-android-share-alt ion-spacing"></i>share</a></p>'+
                    '        </div>'+
                    '    </div>'+
                    '</div>';
                    $('.news').append(html);
                }
            }
        });
    });
</script>
<div class="news">
    <div class="ano">
        <div class="content-news">
            <h3 id="jtitle">Hello World</h3>
            <h4 id="jprovider" class="author">David</h4>
            <p id="jsummary">
                This is content
            </p>
            <div class="img-head" id="img-container">
                <!--                            <img src="" alt="img" class="img-responsive">-->
            </div>
        </div>
        <div class="social-control">
            <div class="head-control">
                <p id="jdate" class="inline gray"></p>
                <a href="#"><p class="pull-right">show more</p></a>
            </div>
            <div class="clear"></div>
            <div class="footer-control">
                <p><a href="#"><i class="ion-ios-heart ion-spacing"></i>20</a></p>
                <p><a href="#" data-toggle="modal" data-target="#myModal"><i class="ion-chatbox ion-spacing"></i>2 comments</a></p>
                <p><a href="#"><i class="ion-android-share-alt ion-spacing"></i>share</a></p>
            </div>
        </div>
    </div>
</div>

【讨论】：

这个答案在没有解释的情况下几乎没有用，它对生成 html 没有任何作用
我还在做，需要时常保存
那就不要发布部分无用的答案
当然更完整...虽然不删除反对票...您第一次发布的内容纯属垃圾。写一个简洁的解决方案...然后发布它
没关系，我已经弄清楚了。哈哈它的工作我删除
直到
然后结果它不显示空白 html

【解决方案3】：

尝试使用$.parseJSON 或$.getJSON。会更容易发现问题。
参考：jQuery API

【讨论】：

$.parseJSON 与此处无关。传递给成功处理程序的数据已经被解析