Fiido Firdauz Fiido Firdauz - 6 months ago 14
JSON Question

How to templating json using jquery

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..
enter image description here

Answer

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

then loop for every object take property on every loop

$.ajax({ 
    type: 'GET', 
    url: 'news.json', 
    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);
        }
    }
});

this html page work with me

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