CODEWITHSUNDEEP
javascriptjqueryjson
tonante27
tonante27

Reputation: 11

Parsing a remote file with and create a Dynamic SELECT control with JSON and JQUERY

Recently, I was informed that I need to read from a remote Sales Force Counties object using a query on the respective State and then dynamically create a select statement these values . My problem is this: Although I know that when I use the query manually in a browser I get JSON-formatted data but when I try to parse the county names I get a null value for the entire iteration. Here is my code. Thanks you for any advice/help that you can give:

<script language="JavaScript">

function getCounties(chosenState){

var url = "https://api.url=1&action=query/?q=SELECT Name FROM US_Counties__cWhere     State_Name__c =";
url = url + "'"+chosenState+"'";
alert(url);
$.getJSON(url, 
function(data) {
console.log(data)

    var options = '';
    $.each(data.records[0], function(i,item){

        options += '<option value="' + item.attributes.url + '">' + item.attributes.Name + '</option>';
    });
    $("select#counties").html(options);
});
}
 </script>

And here is a portion of the data:

{
    "totalSize": 36,
    "done": true,
    "records": [
        {
            "attributes": {
                "type": "US_Counties__c",
                "url": "/services/data/v20.0/sobjects/US_Counties__c/a1FR00000034BJLMA2"
            },
            "Name": "Baker"
        },
        {
            "attributes": {
                "type": "US_Counties__c",
                "url": "/services/data/v20.0/sobjects/US_Counties__c/a1FR00000034BJMMA2"
            },
            "Name": "Benton"
        },
        {
            "attributes": {
                "type": "US_Counties__c",
                "url": "/services/data/v20.0/sobjects/US_Counties__c/a1FR00000034BJNMA2"
            },
            "Name": "Clackamas"
        },
        {
            "attributes": {
                "type": "US_Counties__c",
                "url": "/services/data/v20.0/sobjects/US_Counties__c/a1FR00000034BJOMA2"
            },
            "Name": "Clatsop"
        },
        {
            "attributes": {
                "type": "US_Counties__c",
                "url": "/services/data/v20.0/sobjects/US_Counties__c/a1FR00000034BJPMA2"
            },
            "Name": "Columbia"
        },
        {
            "attributes": {
                "type": "US_Counties__c",
                "url": "/services/data/v20.0/sobjects/US_Counties__c/a1FR00000034BJQMA2"
            },
            "Name": "Coos"
        },
        {
            "attributes": {
                "type": "US_Counties__c",
                "url": "/services/data/v20.0/sobjects/US_Counties__c/a1FR00000034BJRMA2"
            },
            "Name": "Crook"
        },
        {
            "attributes": {
                "type": "US_Counties__c",
                "url": "/services/data/v20.0/sobjects/US_Counties__c/a1FR00000034BJSMA2"
            },
            "Name": "Curry"
        },
        {
            "attributes": {
                "type": "US_Counties__c",
                "url": "/services/data/v20.0/sobjects/US_Counties__c/a1FR00000034BJTMA2"
            },
            "Name": "Deschutes"
        }
    ]
}

Upvotes: 1

Views: 174

Answers (3)

Clark T.
Clark T.

Reputation: 1470

what i've done to enable cross site execution on a personal project is by doing this

    if ((isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') === FALSE)
        die('You shouldn\'t be here');

    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    header('Access-Control-Max-Age: 1000');
    header('Access-Control-Allow-Headers: Content-Type');

if you want it to be a bit more secure you could do 

    if ((isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') === FALSE)
        die('You shouldn\'t be here');

switch($_SERVER['HTTP_ORIGIN']){
case 'domain.com':
case 'whatever.com':
        header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
        header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
        header('Access-Control-Max-Age: 1000');
        header('Access-Control-Allow-Headers: Content-Type');
}

Hope this helps it took me forever to figure it out lol.

Upvotes: 1

Ja͢ck
Ja͢ck

Reputation: 173582

This sounds like a cross-domain issue. You can't access JSON data from a different domain unless the other server grants you access.

You could use JSONP alternatively, but again, only when the remote site supports it.

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

$.each(data.records, function() {
  console.log(this.Name);
});

Upvotes: 0

Related Questions