My three day battle with JSON. Be kind.

Ok, so it's not three WHOLE days, but I'm lost on this one. I have gone through multiple tutorials and examples and this looks like it should be easy, so I am obviously missing something. What I need to do is run through an external JSON file grabbed via http, isolate those records with "language": "Italian", and then for each of those output the URL and image to a web page. My preference is to stop after the first 20 records are isolated out of the 1,200 or so record JSON file.

[
    {
        "URL": "this.somedomain.com/iusethissite">,
        "display_name": "IUseThisSite",
        ],
        "location": "Narnia",
        "shareurl": "this.somedomain.com/iusethissite/track6789",
        "username": "iusethissite",
        "language": "English",
        "image": "this.somedomain.com/iusethissite/me.jpg",
        "show": "public",
        "birthday": "1990-12-06",
        "online": Yes,
        "gender": "m",
        "age": 23,
    },
    {
        "URL": "this.somedomain.com/metoo">,
        "display_name": "MeToo",
        ],
        "location": "Neverland",
        "shareurl": "this.somedomain.com/metoo/track6789",
        "username": "metoo",
        "language": "Italian",
        "image": "this.somedomain.com/metoo/me.jpg",
        "show": "public",
        "birthday": "1997-10-08",
        "online": Yes,
        "gender": "f",
        "age": 17,
    },
]

Code (markup):

I have seen everything from upwards of 100 lines of JavaScript to a 5 line jQuery routine for this, but nothing that has output an accurate loop. I'm a jQuery newbie but am choosing that route because it seems to be the most direct one. So, talk to me like I'm stupid. I won't be offended.

This is my first post, though reading through here has been a great help to me with JavaScript issues in the past. Thanks for that and in advance for this.

G

 

What does what you have now actually do? Does it output anything? What is it you want to achieve? (What kind of look do you want for the output)?
What you need is basically a for-loop (on the count of less than 20) and match against language (italian) - also note that if you're parsing this from an external domain, it most likely won't work, due to cross-scripting issues.

 

To be honest, that isn't a valid json string so I can't give you a working example. However, you should be able to do something like:

var obj = jQuery.parseJSON({yourstringhere});
var matches = 0;
for(var i =0; i < obj.length; i++){
 if (obj[i].language == 'italian')
 {
  matches++;
  console.info("Matched", obj[i]); // logs the record to your developer console.
 }
}

Code (markup):

 

Huh. Well if it's not a valid string that may be the problem I'm having. Can you explain for me how it's not valid? The string is provided by a partner web site from which we want to drag active users and is available to me in JSON or XML, so I have no control over its content but do have another format option. What's in there is not the actual data from the string, obviously, but that is the format they're delivering with the JSON option.

 

I'm assuming that you shortened it so you didn't copy/paste the entire list of records. Basically you can test if it's valid here: http://jsonlint.com/ and more information about json here: http://json.org/

 

Correct. The actual file is more literally like thousands of records. I just gave an edited snippet. jsonlint.com confirmed the actual string as valid.

 

Are you loading the actual string with ajax or is it just included in your javascript file? Can you run the code I provided above and see if anything comes up in your developer console? It's a little difficult to tell if I'm looking for 'language' at the right level due to the broken syntax.

 

Ajax. I have this, modified with your above:

$.ajax({
  dataType: "json",
  url: "http://this.somedomain.com/etc.xml",
  data: "data",
  success: function(data) {

var json = $.parseJSON(data);
var matches = 0;
for(var i =0; i < obj.length; i++){
if (obj.language == 'Italian')
{
  matches++;
  console.info("Matched", obj); // logs the record to your developer console.
  // $('#results').html('URL: ' + json.shareurl + ' Img: ' + json.image);
}
  };
};
});

Code (markup):

 

Change it to this:

$.ajax({
dataType: "json",
url: "http://this.somedomain.com/etc.xml",
data: "data",
success: function(data) {

var json = $.parseJSON(data);
console.info("JSON", json);
var matches = 0;
for(var i =0; i < obj.length; i++){
if (obj.language == 'Italian')
{
matches++;
console.info("Matched", obj); // logs the record to your developer console.
// $('#results').html('URL: ' + json.shareurl + ' Img: ' + json.image);
}
};
};
});

Code (markup):

And send me a screenshot of your developer console if you can.

 

I'm actually trying to output this to html, per the last line. I'm doing this in Notepad++. I was a Perl developer 20 years ago and I'm just picking this project up for kicks. So, I'm a little old school. LOL! The results are supposed to be going to <span id="results"></span> per that line.

 

I understand the end goal but there's things like the console log that make getting there easier. Load the site in chrome/firefox and open dev tools (in chrome it's ctrl + shift + i) then select the 'Console' tab.

 

I use that all the time. This project is apparently brain frying me. Sorry. Ok so after cleaning up the mismatching semicolons, I got this: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access.

That's frustrating, as the partner site is providing the data for us to use so where the heck else should it originate from?

 

Yeah, making requests to other servers is more difficult. This may help you: http://stackoverflow.com/questions/19821753/jquery-xml-error-no-access-control-allow-origin-header-is-present-on-the-req

 

Ok. So I was able to create an XML object using ASP and grab the data from the XML version on their servers, so basically a real-time local copy:

<%
    url = "http:// ..."
    set xmlhttp = CreateObject("MSXML2.ServerXMLHTTP")
    xmlhttp.open "GET", url, false
    xmlhttp.send ""
    Response.write xmlhttp.responseText
    set xmlhttp = nothing
%>[code]

Doing this in JSON got bad results in the way of multiple unexpected tokens from the included js files.  At this point it would undoubtedly be easier to parse the XML.  What changes would be required for that?  I'm assuming it's not as simple as changing json to xml everywhere.  This is where we are with the only error I'm getting being the access error:

[code]$.ajax({
dataType: "json",
url: "http:// ....",
crossDomain: true,
data: "data",
success: function(data) {

var json = $.parseJSON(data);
console.info("JSON", json);
var matches = 0;
for(var i =0; i < obj.length; i++){
if (obj.language == 'Italian')
{
matches++;
console.info("Matched", obj); // logs the record to your developer console.
}
};
}
})[code]

Code (markup):

 

And that was what I said in the beginning - cross-site scripting. You can very easily pull the JSON file down using server-side language (ASP or PHP or whatever) and just read THAT json-file from the local host. (If you don't wanna use XML). JSON is usually easier to work with in JS, methinks.

 

I agree, it's much easier to work with json.

 

I'll give it a shot. It's easy to drag the file as XML, but when I tried it with json it was attempting to go to all the links rather than just read them. Probably easier to fiddle with that end than this. I'll let you know how it turns out. Thanks for all the input.

 

They decided on a "different approach" for that area. AAAAAAAAAAAAAAAAAGH! Oh well. I know more now.