www.webdeveloper.com
Results 1 to 2 of 2

Thread: Create html table with Parsed JSON in Jquery with images and input fields added

Hybrid View

  1. #1
    Join Date
    Apr 2013
    Posts
    3

    Create html table with Parsed JSON in Jquery with images and input fields added

    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:

    Code:
        {"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):

    Code:
        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:

    Code:
        <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.

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    it would be much easier to use an existing tool to generate the table using plain text cells.
    then, you can loop through the table rows, and swap out the content of the first and last cells, using the existing text to fill-in the attributes of the image and input as needed.
    this will be much easier than trying to re-invent the wheel or hand-coding HTML-making loops (yuck).

    any css you added before the naew table will affect the new table and any table after it for that matter.
    if you add the table and css at the same time, you might see an instant where the table is shown without the css, but it will instantly style itself as you would expect.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles