• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 544
  • Last Modified:

Populate a table with jQuery JSON

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
kabookis
Asked:
kabookis
  • 3
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
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
 
kabookisAuthor Commented:
Because it is on a different server.
0
 
leakim971PluritechnicianCommented:
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
kabookisAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
kabookisAuthor Commented:
Sorry for the delay. I'm working on response.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now