loop for fetching json data in html

Question

In this json data fetch from the url through ajax I'm not been able to get the inside elements of the tags through for loop.I'm able to get the data if there are single elements in the array but the problem occurs when there are multiple elements in the array

    <input type="button" value="Get and parse JSON" class="button" />
  <br />
  <span id="results"></span>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <script>

     //When DOM loaded we attach click event to button
     $(document).ready(function() {

        //after button is clicked we download the data
        $('.button').click(function(){

            //start ajax request
            $.ajax({
                url: "http://www.miamia.co.in/dummy/?json=get_recent_posts",
                //force to handle it as text
                dataType: "text",
                success: function(data) {

                    //data downloaded so we call parseJSON function 
                    //and pass downloaded data
                    var json = $.parseJSON(data);
                    //now json variable contains data in json format
                    //let's display a few items
                    $('#results').html('Count: ' + json.count + '<br />' +
     for(var i=0;i<json.posts[0].tags.length-1;i++)
    {
    '<br /> Post tags id: ' + JSON.stringify(json.posts[0].tags[i].id)+'<br /> Post tags slug: ' + JSON.stringify(json.posts[0].tags[0].slug)  //I'm not been able to fetch the elements of tag through the for loop
    }
    );
                }
            });
        });
    });