1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

My three day battle with JSON. Be kind.

Discussion in 'jQuery' started by Gordon Vivace, Oct 15, 2014.

  1. #1
    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
     
    Last edited by a moderator: Oct 15, 2014
    Gordon Vivace, Oct 15, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    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.
     
    PoPSiCLe, Oct 15, 2014 IP
  3. Daniel Hood

    Daniel Hood Member

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    Digital Goods:
    2
    #3
    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):
     
    Daniel Hood, Oct 15, 2014 IP
  4. Gordon Vivace

    Gordon Vivace Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    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.
     
    Gordon Vivace, Oct 15, 2014 IP
  5. Daniel Hood

    Daniel Hood Member

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    Digital Goods:
    2
    #5
    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/
     
    Daniel Hood, Oct 15, 2014 IP
  6. Gordon Vivace

    Gordon Vivace Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    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.
     
    Gordon Vivace, Oct 15, 2014 IP
  7. Daniel Hood

    Daniel Hood Member

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    Digital Goods:
    2
    #7
    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.
     
    Daniel Hood, Oct 15, 2014 IP
  8. Gordon Vivace

    Gordon Vivace Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    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):
     
    Last edited by a moderator: Oct 15, 2014
    Gordon Vivace, Oct 15, 2014 IP
  9. Daniel Hood

    Daniel Hood Member

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    Digital Goods:
    2
    #9
    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.
     
    Daniel Hood, Oct 15, 2014 IP
  10. Gordon Vivace

    Gordon Vivace Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #10
    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.
     
    Gordon Vivace, Oct 15, 2014 IP
  11. Daniel Hood

    Daniel Hood Member

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    Digital Goods:
    2
    #11
    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.
     
    Daniel Hood, Oct 15, 2014 IP
  12. Gordon Vivace

    Gordon Vivace Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #12
    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?
     
    Gordon Vivace, Oct 15, 2014 IP
  13. Daniel Hood

    Daniel Hood Member

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    Digital Goods:
    2
    #13
    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
     
    Daniel Hood, Oct 15, 2014 IP
  14. Gordon Vivace

    Gordon Vivace Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #14
    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):
     
    Last edited by a moderator: Oct 15, 2014
    Gordon Vivace, Oct 15, 2014 IP
  15. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #15
    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.
     
    PoPSiCLe, Oct 15, 2014 IP
  16. Daniel Hood

    Daniel Hood Member

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    Digital Goods:
    2
    #16
    I agree, it's much easier to work with json.
     
    Daniel Hood, Oct 15, 2014 IP
  17. Gordon Vivace

    Gordon Vivace Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #17
    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.
     
    Gordon Vivace, Oct 15, 2014 IP
  18. Gordon Vivace

    Gordon Vivace Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #18
    They decided on a "different approach" for that area. AAAAAAAAAAAAAAAAAGH! Oh well. I know more now.
     
    Gordon Vivace, Oct 16, 2014 IP