Displaying json results (from php) in html div (using Ajax with jQuery)

Question

I get json results from a php file and I want to append them to a specific div section in another php file using ajax with jQuery.For now I have to results..Please help me in this

json results:

[
{
    "title": "Welcome!",
    "description": "The world has changed dramatically..",
    "image": "img/article1.jpg"
},
{
    "title": "Welcome 2!",
    "description": "It is time for a new start..",
    "image": "img/article2.jpg"
}
]

And the jQuery I am using is:

<script type="text/javascript">

   $(document).ready(function(){
     $.ajax({
     url: 'ajax_json.php',
     type: 'post',
     data: {tag: 'getData'},
     dataType: 'json',
     success: function(data){
            if(data.success){
                $.each(data, function(index, record){
                    if($.is_numeric(index)){
                        var row = 
                        $("#output").append('<div class="article"><div>' + item.title + '</div><div style="width:200px;height:100px;background-image: url(' + item.image + ')"></div></div>');
        });
                    }
                })
              }
            }
        });
    });

Div section:

<div class="row top-buffer" id="output">
       <div class="col-md-6" >
         <img class="img-rounded" src="json image" alt="MyImage" width="550px" height="240px">
          </div>
          <div class="col-md-6">

          <h3>json title</h3>
          <p class="well">json description<p>
     </div>

I just updated my code.It is the first time I am using AJAX so it is a little bit tricky for me now. — gdim
– gdim, Commented Jun 24, 2016 at 8:01
you are making so much mistake in a simple Ajax, you are appending item.title where is item. if want rewrite all. ask ? — user4520208
– user4520208, Commented Jun 24, 2016 at 8:06
Sorry I cannot understand you.What is the wrong in the code? — gdim
– gdim, Commented Jun 24, 2016 at 8:11
OK, copy all inside #output div and paste it inside .append Now you replace your json image, json title and json description to item.title , item.description etc... You should append inside #output. and remove var row — user4520208
– user4520208, Commented Jun 24, 2016 at 8:19

score 2 · Accepted Answer · 2016-06-24 08:42:08Z

2

Html should be

<div class="row top-buffer" id="output">


</div>

Your JS should be

var json_ = {
    "0": {
        "title": "Welcome!",
        "description": "The world has changed dramatically..",
        "image": "img\/article1.jpg"
    },
    "1": {
        "title": "Welcome 2!",
        "description": "It is time for a new start..",
        "image": "img\/article2.jpg"
    },
    "success": "true"
};

if (json_.success){  
    $.each(json_, function (index, item) {
        if ('success'!= index){
 $('#output').append("<div class='col-md-6' ><img class='img-rounded' src="+item.image+"alt='MyImage' width='550px' height='240px'></div><div class='col-md-6'><h3>"+item.title+"</h3><p class='well'>"+item.description+"<p></div>");

        }
    });
};

Check result Here : http://codepen.io/ihemant360/pen/BzpKew

You are using external php file so your code should be :

<script type="text/javascript">

   $(document).ready(function(){
     $.ajax({
     url: 'ajax_json.php',
     type: 'post',
     data: {tag: 'getData'},
     dataType: 'json',
     success: function(data){
            if(data.success){
                $.each(data, function (index, item) {
            if ('success'!= index){
     $('#output').append("<div class='col-md-6' ><img class='img-rounded' src="+item.image+"alt='MyImage' width='550px' height='240px'></div><div class='col-md-6'><h3>"+item.title+"</h3><p class='well'>"+item.description+"<p></div>");
                });
              }
            };
        });
    });

edited Jun 24, 2016 at 8:42

answered Jun 24, 2016 at 8:34

user4520208

Sign up to request clarification or add additional context in comments.

2 Comments

gdim Over a year ago

Any ideas how can I remove these [ ] from json format?

user4520208 Over a year ago

this is json array. learn syntax here : JSON Syntax

Maksym Semenykhin · Accepted Answer · 2016-06-24 08:41:59Z

lost of small errors you have

demo

fixed html code:

<div class="row top-buffer" id="output">
    <div class="col-md-6" >
        <img class="img-rounded" src="json image" alt="MyImage" width="550px" height="240px">
    </div>
    <div class="col-md-6">

        <h3>json title</h3>
        <p class="well">json description<p>
    </div>
</div>

fixed js code :

if (data.success){  
    $.each(data, function (index, item) {
        if ('success'!= index){
                $("#output").append('<div class="article">1<div>' + item.title + '</div><div style="width:200px;height:100px;background-image: url(' + item.image + ')"></div></div>');
        }
    });
};

The main error is there:

 $.each(data, function(index, record){
//item is in record var but then you are trying to use item var
$("#output").append('<div class="article">1<div>' + item.title + '</div><div style="width:200px;height:100px;background-image: url(' + item.image + ')"></div></div>');

hope it will help =)

Rahul Vartak · Accepted Answer · 2016-06-24 08:18:45Z

0

You may be getting json as string from server.

Try using before your if condition and use articleData for processing -

var articleData = JSON.parse(data);

Also, it should be record.title instead of item.title.

answered Jun 24, 2016 at 8:18

Rahul Vartak

955 bronze badges

Collectives™ on Stack Overflow

Displaying json results (from php) in html div (using Ajax with jQuery)

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related