Solved

Populate a table with jQuery JSON

Posted on 2013-11-18
8
500 Views
Last Modified: 2014-02-19
I'm attempting to populate a table with JSON with no luck.

Here's the sample JSON:


{
  "clist": [
    "leg2", 
    "leg1", 
    "wall", 
    "alloytemper", 
    null
  ], 
  "res_list": [
    {
      "alloytemper": "6061-T6", 
      "descr": "Angle 6061 LBS", 
      "description": "ANGLE 1 X 1 X 1/8 X 300\"", 
      "lbsperpc": "0.241", 
      "leg1": "1.0000", 
      "leg2": "1.0000", 
      "length": "300.0000", 
      "lot_length": "10.500", 
      "lotitem": "917179", 
      "perpcprice": "None", 
      "qty_available": "1", 
      "series": "6000", 
      "wall": "0.1250", 
      "width": "0.0000"
    }, 
    {
      "alloytemper": "6061-T6", 
      "descr": "Angle 6061 LBS", 
      "description": "ANGLE 1 X 1 X 1/8 X 300\"", 
      "lbsperpc": "0.264", 
      "leg1": "1.0000", 
      "leg2": "1.0000", 
      "length": "300.0000", 
      "lot_length": "11.500", 
      "lotitem": "1043214", 
      "perpcprice": "None", 
      "qty_available": "0", 
      "series": "6000", 
      "wall": "0.1250", 
      "width": "0.0000"
    }
] 

Open in new window







Here's the code:

<script>
	       $.getJSON('http://coldfusion.schupan.com:5001/boneyard?shape=ANG&c1=1&psc=A&series=6000', function (data) {
				        console.log($.parseJSON(data));
						var metal = $.parseJSON(data);

//Thanks to AlexCode for this

function processData(metal){
	
	if(!metal || !(metal.length)) return;

    var table = document.getElementById('myTable');
    var content = [];
    
    // build header
    content.push('<tr>');
    for(prop in metal[0]){
        content.push('<td>' + prop + '</td>')
    }
    content.push('</tr>');
    
    // build body
    var len = metal.length;
    for (var i=0;i<len;i++){
        content.push('<tr>');
        for(prop in metal[i]
            content.push('<td>' + metal[i][prop] + '</td>')
        content.push('</tr>');
    }
    // fill table
    table.innerHTML = content.join('');
}

return processData(metal);
 });
</script>

Open in new window


No errors in Console.
0
Comment
Question by:kabookis
  • 3
  • 3
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39657393
why are you using a full path to the URL and not a relative one?
$.getJSON('boneyard?shape=ANG&c1=1&psc=A&series=6000', function (data) {

Open in new window

0
 

Author Comment

by:kabookis
ID: 39657499
Because it is on a different server.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39657529
Thank you, this is an important answer.
You CAN'T do an Ajax call to a different server.
Ajax by default don't support cross domain call or a call on a different protocol.

To bypass this problem, the two usual solutions :
1 - Use JSONP
2 - Use your own server to get the JSON for your page : a proxy

1 - JSONP
boneyard return something like  
foo({
  "clist": [
...
      "width": "0.0000"
    }
])

Open in new window

Using coldfusion code :
<cfif structKeyExists(arguments, "callback")>
      <cfset data = arguments.callback & "(" & data & ")">
</cfif>
<cfreturn data>

Open in new window

instead only :
<cfreturn data>

Open in new window

To use JSONP, you add a callback parameter to the url and it value ? : << callback=? >>
$.getJSON('http://coldfusion.schupan.com:5001/boneyard?shape=ANG&c1=1&psc=A&series=6000&callback=?', function (data) {

Open in new window

Solution 2, a simple PHP proxy (myproxy.php) :
<?PHP
echo file_get_contents( $_GET["url"] );
?>

Open in new window

You call it with :
$.getJSON("myproxy.php",  {url : encodeURIComponent('http://coldfusion.schupan.com:5001/boneyard?shape=ANG&c1=1&psc=A&series=6000'), function (data) {

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:kabookis
ID: 39670063
I should have made my question a little clearer.

1. In spite of the URL text, this page is not running on ColdFusion Server. The JSON is being served up by a Python script.

2. The URL lives on a server that's set up with CORS. That's why the ajax call works.
The JSON that's returned by the URL is this

 {
"res_list": [
    {
      "alloytemper": "6061-T6",
      "descr": "Angle 6061 LBS",
     }
               ]
 }


I'm wondering if the JSON that's being returned is somehow malformed or otherwise unsuitable for jQuery ajax..
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39670791
Test page : http://jsfiddle.net/bu7Q6/

var url = 'http://coldfusion.schupan.com:5001/boneyard?shape=ANG&c1=1&psc=A&series=6000';

function processData(data){
    var metal = $.parseJSON(data);
    if(metal&&metal.length) {

        var content = [];

        content.push('<tr>');
        for(i=0;i<metal[0].clist.length;i++) {
            if(metal[0].clist[i]) {
                content.push('<td>' + metal[0].clist[i] + '</td>');
            }
        }
        content.push('</tr>');
        
        // build body
        var len = metal[0].res_list.length;
        for(var x=0;x<len;x++) {
            content.push('<tr>');
            for(i=0;i<metal[0].clist.length;i++) {
                if(metal[0].clist[i]) {
                    content.push('<td>' + metal[0].res_list[x][metal[0].clist[i]] + '</td>');
                }
            }
            content.push('</tr>');
        }
        // fill table
        $('#myTable').html(content.join(''));
    }
}

$.getJSON(url, processData);

Open in new window

0
 

Author Comment

by:kabookis
ID: 39711586
Sorry for the delay. I'm working on response.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question