How to templating json using jquery

Question

Let's say my json like this and i have 3 different data

[  
   {  
      "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":""
   }
]

What I already try

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

I managed to out only 1 result. Can you guys give a hint or tips show me how to templating jquery using json. Please be easy on me. Thanks

THIS IS THE RESULT WHAT I GET RIGHT NOW, Only 1 data display..

Answer 1

You can access the properties via the index on the data property as so:

$.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
            );
        });
    }
});

Which produces

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

To handle the templating you can create a function that returns the markup for each item:

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
            );
        });
    }
});

Here is an updated version of your fiddle as an example.

You'll likely have to make a few small adjustments to the CSS and whatnot to get it looking how you like.

Answer 2

you json file have array of objects so first you need to loop for the objects one by one

also don't use each for serialized array cause it takes more time just use the normal for loop

answer is here jsfiddle.net/robert11094/65zjvy5k/3

or just use this html page

<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

Try to use $.parseJSON or $.getJSON . It will be easier to find problems.
Reference: jQuery API