Solved

Loop through Json query  with Jquery

Posted on 2015-01-29
2
116 Views
Last Modified: 2015-02-08
I have a function that is being processed from a Jquery .post.

this is the data returned  serializedJSON from Coldfusion Query :

{"COLUMNS":["STREETNAME","PRICE","LATITUDE","LONGITUDE"],"DATA":[["CO RD 167","$289000",33.972765,-87.106866],["COUNTY ROAD 858","$259900",34.0751509,-87.0271391],["COUNTY ROAD 4235","$799900",34.0008489,-87.113152],["COUNTY ROAD 208","$244900",34.008413,-87.071838],["CR-232","$29000",34.0519273,-87.0824045],["TURTLE POINT","$399900",34.0519273,-87.0824045],["WATERDOG DRIVE","$409900",34.0519273,-87.0824045],["TURTLE POINT","$509900",34.0519273,-87.0824045],["TURTLE POINT","$359900",34.0519273,-87.0824045],["TURTLE POINT DR.","$499900",34.0519273,-87.0824045],["TURTLE POINT DR","$309900",34.0519273,-87.0824045],["COUNTY ROAD 196","$284900",34.016861,-87.10466],["CO RD 96","$299900",34.0303875,-87.0546095],["CO RD 187","$179000",34.0001995,-87.08876],["CO RD 184","$789000",33.978721,-87.1019701],["CO RD 208","$349000",34.0117843,-87.0706031],["COUNTY ROAD 164","$249900",33.9784786,-87.110881],["COUNTY ROAD 215","$1.695e+006",34.0358949,-87.0468889],["COUNTY ROAD 170","$529900",33.9691566,-87.1119235],["COUNTY ROAD 881","$339900",34.0440657,-87.0335399],["COUNTY ROAD 330","$439900",34.0448215,-87.0646441],["COUNTY ROAD 938","$199900",34.0785174,-87.1000404],["COUNTY ROAD 222","$325000",34.0288084,-87.0608674],["POINT WILLIAM LANE","$649000",34.0519273,-87.0824045],["POINT WILLIAM LANE","$649000",34.0519273,-87.0824045]]}
---------------------------------------------------------------------------------------------------------
//Post
      function GetMarkers(zip)
      {
            $.post( "http:/Domain/cfc.cfc?method=GetMapMarkers&zip=35053")
            .done(function( data ) {
        //alert( "Data Loaded: " + data );
            setmarker( data );
                });
      }

//function to handle the post
   function setmarker(data)
   {
        
                     alert(data);// if is ok here

      var item=data;
             
        console.debug(item.COLUMNS[0])
        console.debug(item.COLUMNS[1])
    $.each(item.DATA, function(index,item) {        
        console.debug(item[0])
        console.debug(item[1])
        });
   
      }


ERROR IS item.COLUMNS is undefined
0
Comment
Question by:leadcodev
2 Comments
 
LVL 18

Accepted Solution

by:
nap0leon earned 500 total points
ID: 40579614
You data is just a string until you tell your code that it is JSON.
Load json2.js onto your page (you can get it from here: https://github.com/douglascrockford/JSON-js/blob/master/json2.js )
Then run a command such as this:
data = JSON.parse(data)

Open in new window


On a page with jQuery and json2.js, this works:
var data = '{"COLUMNS":["STREETNAME","PRICE","LATITUDE","LONGITUDE"],"DATA":[["CO RD 167","$289000",33.972765,-87.106866],["COUNTY ROAD 858","$259900",34.0751509,-87.0271391],["COUNTY ROAD 4235","$799900",34.0008489,-87.113152],["COUNTY ROAD 208","$244900",34.008413,-87.071838],["CR-232","$29000",34.0519273,-87.0824045],["TURTLE POINT","$399900",34.0519273,-87.0824045],["WATERDOG DRIVE","$409900",34.0519273,-87.0824045],["TURTLE POINT","$509900",34.0519273,-87.0824045],["TURTLE POINT","$359900",34.0519273,-87.0824045],["TURTLE POINT DR.","$499900",34.0519273,-87.0824045],["TURTLE POINT DR","$309900",34.0519273,-87.0824045],["COUNTY ROAD 196","$284900",34.016861,-87.10466],["CO RD 96","$299900",34.0303875,-87.0546095],["CO RD 187","$179000",34.0001995,-87.08876],["CO RD 184","$789000",33.978721,-87.1019701],["CO RD 208","$349000",34.0117843,-87.0706031],["COUNTY ROAD 164","$249900",33.9784786,-87.110881],["COUNTY ROAD 215","$1.695e+006",34.0358949,-87.0468889],["COUNTY ROAD 170","$529900",33.9691566,-87.1119235],["COUNTY ROAD 881","$339900",34.0440657,-87.0335399],["COUNTY ROAD 330","$439900",34.0448215,-87.0646441],["COUNTY ROAD 938","$199900",34.0785174,-87.1000404],["COUNTY ROAD 222","$325000",34.0288084,-87.0608674],["POINT WILLIAM LANE","$649000",34.0519273,-87.0824045],["POINT WILLIAM LANE","$649000",34.0519273,-87.0824045]]}';
data = JSON.parse(data);
setmarker(data);

//function to handle the post
function setmarker(data) {
    alert(data);// if is ok here
    var item=data;
             
    console.debug(item.COLUMNS[0])
    console.debug(item.COLUMNS[1])
    $.each(item.DATA, function(index,item) {        
      console.debug(item[0])
      console.debug(item[1])
    });
}

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
ID: 40579855
(no points...)

Try adding

        dataType: "json"

to your $.post(...).. That should cause JQuery to convert the string into a JSON object automatically.

Update:

this is the data returned  serializedJSON from Coldfusion Query

Nothing technically wrong with it, but it's more flexible to return a plain query - no serialization.  Then if you need JSON, just add "&returnformat=json" to your url instead:

http:/Domain/cfc.cfc?method=GetMapMarkers&zip=35053&returnformat=JSON

Open in new window

0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
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)

685 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