Question

让我们说我的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个数据显示..

Answer 1

您可以通过index媒体资源data访问这些媒体资源：

$.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进行一些小的调整，以及如何让它看起来如你所愿。

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

Answer 3

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

如何使用jquery模板json

3 个答案: