How to fetch JSON object though JavaScript or jQuery and generate dynamically content for multiple record through JavaScript or jQuery?

Question

Understand already done process for single object and single data, which is working pretty cool.

1) output from the PHP Server encoded into JSON format.

JSON OUTPUT:

{"product_id":"1","sku":"FGDGE43","set":"4","type":"simple","categories":["2"],"websites":["1"],"type_id":"simple","name":"Honey","description":"Where sweetness belong.","short_description":"Sweetness.","weight":"100.0000","old_id":null,"news_from_date":null,"news_to_date":null,"status":"1","url_key":"hgjjhgjh","url_path":"hgjjhgjh.html","visibility":"4","category_ids":["2"],"required_options":"0","has_options":"0","image_label":"Honey","small_image_label":"Honey","thumbnail_label":"Honey","created_at":"2014-02-10 14:36:54","updated_at":"2014-02-19 11:37:07","country_of_manufacture":null,"price":"43.0000","group_price":[],"special_price":null,"special_from_date":null,"special_to_date":null,"tier_price":[],"minimal_price":null,"msrp_enabled":"2","msrp_display_actual_price_type":"4","msrp":null,"enable_googlecheckout":"1","tax_class_id":"0","meta_title":null,"meta_keyword":null,"meta_description":null,"is_recurring":"0","recurring_profile":null,"custom_design":null,"custom_design_from":null,"custom_design_to":null,"custom_layout_update":null,"page_layout":null,"options_container":"container2","gift_message_available":null,"0":{"file":"\/h\/o\/honey.jpg","label":"Honey","position":"1","exclude":"0","url":"http:\/\/127.0.0.1\/magento\/media\/catalog\/product\/h\/o\/honey.jpg","types":["image","small_image","thumbnail"]}}

2) Now

I can fetch above mentioned SINGLE JSON object through jQuery and dynamically change the content of the page.

$(document).ready( function() {
alert('bhoom : oh yea its coming');
    $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1/midserver.php',
        data: 'id=testdata',
        dataType: 'text',
        cache: false,
        success: function(data) {

           var json = $.parseJSON(data);   
           $('#pname').html(json.name);
           $('#pdesc').html(json.description);
           $('#pprice').html(json.price);
           $('#pweight').html(json.weight);

        },
    });
});

This is working fine.

Here come my Question

How can i fetch two or more object through JS or JQ and create dynamic elements though JS/JQ or any other mechanism and then put this data in dynamically generated elements.

i.e : for below mentioned JSON object ?

[{"product_id":"1","sku":"FGDGE43","set":"4","type":"simple","categories":["2"],"websites":["1"],"type_id":"simple","name":"Honey","description":"Where sweetness belong.","short_description":"Sweetness.","weight":"100.0000","old_id":null,"news_from_date":null,"news_to_date":null,"status":"1","url_key":"hgjjhgjh","url_path":"hgjjhgjh.html","visibility":"4","category_ids":["2"],"required_options":"0","has_options":"0","image_label":"Honey","small_image_label":"Honey","thumbnail_label":"Honey","created_at":"2014-02-10 14:36:54","updated_at":"2014-02-19 11:37:07","country_of_manufacture":null,"price":"43.0000","group_price":[],"special_price":null,"special_from_date":null,"special_to_date":null,"tier_price":[],"minimal_price":null,"msrp_enabled":"2","msrp_display_actual_price_type":"4","msrp":null,"enable_googlecheckout":"1","tax_class_id":"0","meta_title":null,"meta_keyword":null,"meta_description":null,"is_recurring":"0","recurring_profile":null,"custom_design":null,"custom_design_from":null,"custom_design_to":null,"custom_layout_update":null,"page_layout":null,"options_container":"container2","gift_message_available":null},[{"file":"\/h\/o\/honey.jpg","label":"Honey","position":"1","exclude":"0","url":"http:\/\/127.0.0.1\/magento\/media\/catalog\/product\/h\/o\/honey.jpg","types":["image","small_image","thumbnail"]}],{"product_id":"2","sku":"asdf654a6sd5f4","set":"4","type":"simple","categories":[],"websites":["1"],"type_id":"simple","name":"Butter","description":"Buttery Buttery Buttery","short_description":"Buttery Buttery ","weight":"100.0000","old_id":null,"news_from_date":null,"news_to_date":null,"status":"1","url_key":"butter","url_path":"butter.html","visibility":"4","category_ids":[],"required_options":"0","has_options":"0","image_label":"butter","small_image_label":"butter","thumbnail_label":"butter","created_at":"2014-02-25 11:35:49","updated_at":"2014-02-25 11:53:10","country_of_manufacture":null,"price":"100.0000","group_price":[],"special_price":null,"special_from_date":null,"special_to_date":null,"tier_price":[],"minimal_price":null,"msrp_enabled":"2","msrp_display_actual_price_type":"4","msrp":null,"enable_googlecheckout":"1","tax_class_id":"0","meta_title":null,"meta_keyword":null,"meta_description":null,"is_recurring":"0","recurring_profile":null,"custom_design":null,"custom_design_from":null,"custom_design_to":null,"custom_layout_update":null,"page_layout":null,"options_container":"container2","gift_message_available":null},[{"file":"\/b\/u\/butter.jpg","label":"butter","position":"1","exclude":"0","url":"http:\/\/127.0.0.1\/magento\/media\/catalog\/product\/b\/u\/butter.jpg","types":["image","small_image","thumbnail"]}]]

So,

what i've tried to create 'dynamic content and putting data in that' is here.

$(document).ready( function() {
alert('bhoom : oh yea its coming');
    $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1/test2.php',
        data: 'id=testdata',
        dataType: 'text',
        cache: false,
        success: function(data) {

    //  asumming that server returns more than one products
    //  in JSON Object.

    //  So iterate over this JSON Object through .each JQuery
    //  function.

        var divHtml;
        var productDiv = $("#productDetailsDiv");
        //its reference

        $(data).each(function(index, value) {
            //  Take Html of productTemplate Div in divHtml variable.
            divHtml = $('#productsTemplate').html();

            //  Fill divHtml with values
                    divHtml.find('#pname').html(value['name']);
                    divHtml.find('#pdesc').html(value['description']);
                    divHtml.find('#pimage').html(value['url']);
                    divHtml.find('#pprice').html(value['price']);
                    divHtml.find('#pweight').html(value['weight']);

            //  Add divHtml to productDiv
            $("#productDetailsDiv").children().add(divHtml);

            //  Loop for next value in data
        });


        },

    });
});

So, Am I making mistake to fetching complicated JSON object or there is a code went wrong with jQuery?

Any help or suggestion will be appreciated.

Regards.

Answer 1

Thanks for your suggestion.

I find out that the JSON object i'm getting through PHP server as an output, is in multi-dimensional array. So for the shake of the simplicity, at server side, we have to generate one-dimensional array of JSON object as an output to be fetched and manipulated at client-side.

Now We can do stuff like generating dynamic content on through JS/JQ on HTML page and render(fill-in) the data with the same.

Regards.

Answer 2

try the block with query $.each

  $.each(data, function(index, item) { 
   $('#pname').html(item.name);
   $('#pdesc').html(item.description);
   $('#pprice').html(item.price);
   $('#pweight').html(item.weight);

  });

here pname, pdesc... etc,. you need to update with dynamic elements

Answer 3

You can user jquery each function to achieve this:

$(document).ready( function() {
alert('bhoom : oh yea its coming');
    $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1/midserver.php',
        data: 'id=testdata',
        dataType: 'text',
        cache: false,
        success: function(data) {

           var json = $.parseJSON(data);
           $.each(json, function(index, element){

$('#pname').html(element.name);
           $('#pdesc').html(element.description);
           $('#pprice').html(element.price);
           $('#pweight').html(element.weight);

});

        },
    });
});