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.

May be help you http://stackoverflow.com/questions/18932686/how-to-alert-json-file-data-from-javascript — Lal krishnan S L, Mar 03 '14 at 10:16
Yes I can do it for one object which carry data of one record. — shrexchauhan, Mar 03 '14 at 10:50
If you want multiple records, sounds like you want to be returning an array containing them all. Or do the records come from totally separate web services? Also, ***formatting***. Look at that post, it's a mess. You don't need the "~~~" crap to break things up, you don't need to be using a ton of different font sizes. It looks like maybe tried to put some screenshots in there, but that's not going to work given your reputation. Also, code - we need to see it. — Anthony Grist, Mar 03 '14 at 10:51
@shrexchauhan Comments don't handle code well. There's an edit link for your question, use it. Add properly formatted code to your question (there's a preview underneath the edit box), don't try to post code as a comment. — Anthony Grist, Mar 03 '14 at 10:54
yeah records come from the server(initially local server[magento]). — shrexchauhan, Mar 03 '14 at 10:54
@AnthonyGrist : I has put both working JSON code and jQuery code which is working and another JSON foramt with multiple data JSON object but this says code is not formatted well. I'll try agin n get back to you. — shrexchauhan, Mar 03 '14 at 11:06
@AnthonyGrist And look at the edited question now you'll have a proper idea what i'm asking you. Sorry for inconvenience — shrexchauhan, Mar 03 '14 at 11:23

Gnanz · Answer 1 · 2014-03-03T12:45:30.327

1

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

edited Mar 03 '14 at 12:45

answered Mar 03 '14 at 11:22

Gnanz

1,833
5
24
51

But How'd you manipulate that dynamic content? And that too has to be filled with JSON data. – shrexchauhan Mar 03 '14 at 11:38
i can see you have updated your question with jquery each statements. hope you get the details using like value['name']. ok . what is your question now.where you strck? – Gnanz Mar 03 '14 at 12:01
See with this jQuery i can create dynamic content but data through JSON is not being filled in. What change(s) i sh'd make to fill the elements with data.? – shrexchauhan Mar 03 '14 at 12:07
are you getting the dynamic data with in ' $(data).each' . have you tried debugging using console.log or by alert statements?? – Gnanz Mar 03 '14 at 12:09
Well sorry my mistake dude, I'm not getting dynamic content too. So we first get it done right and den fill the element. Anyways let me try out tonight and will come back to you tomorrow. – shrexchauhan Mar 03 '14 at 12:15
can you check $.each, whether you are using data.d or data alone. it need to be data. there was a typo error. i have corrected now – Gnanz Mar 03 '14 at 12:46

score 0 · Answer 2 · answered Mar 03 '14 at 11:20

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

});

        },
    });
});

score 0 · Accepted Answer · answered Mar 06 '14 at 06:18

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.

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

Here come my Question

3 Answers3