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.

Yes I can do it for one object which carry data of one record. — shrexchauhan
– shrexchauhan, Commented Mar 3, 2014 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
– Anthony Grist, Commented Mar 3, 2014 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
– Anthony Grist, Commented Mar 3, 2014 at 10:54

Gnanz · Accepted Answer · 2014-03-03 12:45:30Z

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 3, 2014 at 12:45

answered Mar 3, 2014 at 11:22

Gnanz

1,8735 gold badges25 silver badges52 bronze badges

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

6 Comments

shrexchauhan Over a year ago

But How'd you manipulate that dynamic content? And that too has to be filled with JSON data.

Gnanz Over a year ago

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?

shrexchauhan Over a year ago

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.?

Gnanz Over a year ago

are you getting the dynamic data with in ' $(data).each' . have you tried debugging using console.log or by alert statements??

shrexchauhan Over a year ago

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.

|

Ovidiu Iacomi · Accepted Answer · 2014-03-03 11:20:04Z

0

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

});

        },
    });
});

answered Mar 3, 2014 at 11:20

Ovidiu Iacomi

7768 silver badges12 bronze badges

Comments

shrexchauhan · Accepted Answer · 2014-03-06 06:18:02Z

0

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.

answered Mar 6, 2014 at 6:18

shrexchauhan

1,7871 gold badge10 silver badges8 bronze badges

Collectives™ on Stack Overflow

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 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Here come my Question

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related