Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts

    get json without ajax?

    so, I have a json file that is in this format (simplified, but this):

    Code:
    [{
        "name": "Henry",
        "id": 133,
        "hair": {
          "length": "long",
          "color": "red"
        }
    },
    {
        "name": "Joe",
        "id": 134,
        "hair": {
          "length": "short",
          "color": "blond"
        }
    }]
    and I want to be able to get the data to manipulate it. I can store the file in the same directory as the js, but the only ways I have seen of importing json data into js is with ajax (or the jQuery equivalent), which I kind of want to avoid as I am hoping to make the app offline-capable. I tried with jsonp, but suspect that I don't know what I was doing.

    Are there options? It will all be html5, so browser compatibility is not so much of a concern.

    thanks in advance

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    if you wrap it in
    a function call ...

    Code:
     
    callback([{
        "name": "Henry",
        "id": 133,
        "hair": {
          "length": "long",
          "color": "red"
        }
    },
    {
        "name": "Joe",
        "id": 134,
        "hair": {
          "length": "short",
          "color": "blond"
        }
    }])
    you can include it in
    the page by creating
    script tag whose src
    if the file with the
    jsonP you will need
    the callback function
    to recieve the data
    works offline and cross domain

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by DaveyErwin View Post
    if you wrap it in a function call ...
    that would be ideal.

    But if I can't wrap it in a function call (or more accurately, if I didn't want to have to do that manually)?

    Could I wrap it programatically? Or is there some other option?

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I'm just toying with the idea of:

    Save the json with extension .json;
    Use a hidden iframe with this file as source;
    Use the load event of the iframe;
    Use innerHTML to get this content;
    Use JSON.parse() to convert it to a JSON object.

    This kind of thing may work locally, but test it live as well.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    xelawho (04-23-2013)

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by xelawho View Post
    that would be ideal.

    But if I can't wrap it in a function call (or more accurately, if I didn't want to have to do that manually)?

    Could I wrap it programatically? Or is there some other option?
    you have to give it a name, or fetch the whole thing with ajax.



    programmatic callbacks are simple, for example on windows:
    where output.js is your web-read file and data.json is the one you showed already:

    rejson.bat:
    Code:
    del output.js 
    echo callback( > output.js
    type data.json >>output.js
    echo ) >> output.js

    i should mention that you can do the same with whatever you use to generate the json in the first place. it writes the files, so just write the callback aorund it at the same time. You can load the file and str.slice(9,-1) to turn the JSONp back into JSON...

    i should also mention that you can use ajax offline, i don't see how jsonp is any better than ajax. in fact, it's worse since you don't have a failure event like you do with ajax... Still, both technologies function just fine offline as long as they appear in a correctly-crafted manifest file.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    xelawho (04-23-2013)

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    @ AndrewGSW: seems to work OK, your idea, provided you're grabbing the textContent of the iframe in Chrome and FF. IE wants to download the json file

    @ rnd me: I'm not producing the json - that's the problem. I wasn't aware that ajax worked offline, too. thanks for the tip. I'm really quite clueless about the whole offline thing in general. I've looked over the links you posted in this thread and they were very useful. I guess I'll google around for using ajax with manifests, unless you have something handy...?

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by xelawho View Post
    I guess I'll google around for using ajax with manifests, unless you have something handy...?
    i already gave out all my manifest secrets and painful lessons.

    in the manifest, you simply list the url(s) that your ajax calls make, just like you list an image or stylesheet url, and they will magically ".ajax()" even without internet.


    if you have dozens of url combos, this is less workable, but then you're basically asking to take the server's DB with you, which is a tall order.

    you can also memorize the data with localStorage or one of the client-side DBs out there.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by rnd me View Post
    you can also memorize the data with localStorage
    excellent. as long as it's easy enough to get in and get out of storage (and I'm assuming that 3 minutes googling will give me the answer to that one, unless you have a one-liner up your sleeve...)

    And that leads nicely to my next question (I would start another thread, but well, y'know...):

    Let's just assume that I know nothing about the cache, local storage, etc. The JSON file can be ridiculously big - nearly 3MB in some cases (which seems quite big, and certainly seems to slow my phone down) but I don't need all of it in one hit. The way I've got it working so far is ajax call dumps all the json into the page then we filter from there, which works fine on the desktop but I guess smaller devices struggle with that load.

    What I'm wondering is if:
    a) it's possible, and
    b) there would be any performance gain

    to leaving the json where it is (I'm imagining localStorage here) and only pulling in the bits of data that match the filtering request.

    or is it all just one big memory pot, and saving in one place ends up costing somewhere else, making it all balance out in the end?

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by xelawho View Post

    Let's just assume that I know nothing about the cache, local storage, etc. The JSON file can be ridiculously big - nearly 3MB in some cases (which seems quite big, and certainly seems to slow my phone down) but I don't need all of it in one hit. The way I've got it working so far is ajax call dumps all the json into the page then we filter from there, which works fine on the desktop but I guess smaller devices struggle with that load.

    What I'm wondering is if:
    a) it's possible, and
    b) there would be any performance gain

    to leaving the json where it is (I'm imagining localStorage here) and only pulling in the bits of data that match the filtering request.

    or is it all just one big memory pot, and saving in one place ends up costing somewhere else, making it all balance out in the end?
    localStorage is one big 2.5mb pot. there will be little/no boost from splitting hairs on the client. a performance boost could come from having 30 100kb chunks that are fetched as needed, or a server that feeds the client as needed...


    i've loaded json in the 5-15mb range on many devices, and it seems to work. Localstorage will max out in chrome at 2.5mb, since it uses 2bytes per char. ff gives you the full 5, IE has some weird limit that makes no sense, i think it's slightly more than chrome until 10, when it's like firefox's.

    depending on your data, you can use deflate to shrink it down 50-75%. some binaries don't like to be zipped, or unzipped rather, but i've had excellent results with ascii text.

    manifest is nice because it has no pre-set limit, so it might be all you need.

    if you need more than a compressed 2.5 mb, you'll have to use a DB.

    i have been successfully keeping about 16mb client-side under one key as a big json string using my simple abstraction lib, http://danml.com/js/localstorage2.js


    it's barely more complex than localStorage to use, certainly FAR simpler than the webSQL and indexedDB APIs it sits on top of.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •