0

I have seen many examples on the internet regarding looping through a JSON object and printing it in a html table. However my issue is a bit different as I need the first column to be an image the next few columns are json data from the json array and then finally a input field in the last column (the value from this input field is provided from the json array as well).

Here is the full JSON I have where tabledata contains the array of information I need to create the html table with:

{"approverName":"","emailAddress":"","companyName":"ABC","address":{"streetAddress1":"12 BlahBlah","streetAddress2":"","state":"ON","zipCode":"","country":"SO","phoneNumber":""},"tabledata":[{"vendorPart":"AAAAA","partDescription":"N/A","price":"0.00","quantity":"28"},{"vendorPart":"BBBBBBB","partDescription":"N/A","price":"0.00","quantity":"3"},{"vendorPart":"CCCCCC","partDescription":"N/A","price":"0.00","quantity":"25"}]}

This is my Jquery's ajax success function which hit's the webservice and get's the data (just so you know how the JSON object is being used/created):

success: function(data, status, jqxhr) {
                    var xml = $($.parseXML(data)), // Parse the XML String to a Document, and Wrap jQuery
                    json = xml.find("string").text(), // Get the text of the XML
                    jsonObj = $.parseJSON(json); // Parse the JSON String
                    $('#approver').val(jsonObj.approverName);
                    $('#emailaddress').val(jsonObj.emailAddress);
                    $('#address1').val(jsonObj.address.streetAddress1);
                    $('#address2').val(jsonObj.address.streetAddress2);
                    $('#postalcode').val(jsonObj.address.zipCode);
                    $('#city').val(jsonObj.address.state);
                    $('#country').val(jsonObj.address.country);
                    $('#phone').val(jsonObj.address.phoneNumber);

                 },

After the input fields are assigned I need to setup the form to look like this (hard-coded at the moment)

Based on this image you see how the first column is an image, the second - fourth columns are data from jsonObj and the fourth is an input field I must create with the value also coming from jsonObj.

Here is the code for the input:

<input class="quantityClass" type="number" name="quantity" min="0" />

I also would like to know, I did a lot of CSS on this table if I render the table with jquery does the CSS still take effect at the right time? I hope that js/css run at the same time.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Surep
  • 179
  • 4
  • 19
  • Take a look at [this answer on how to set an image src using jquery](http://stackoverflow.com/a/554289/427192) – Dan Pichelman Apr 18 '13 at 18:47
  • Thank you for the link, I do know how to create the image using jquery just making all three (especially cannot make the input working) is the issue. – Surep Apr 18 '13 at 19:35
  • Create your `` tag for all rows. In your javascript, update the src as needed. – Dan Pichelman Apr 18 '13 at 19:39

0 Answers0