itemfilereadstore reading from json file

Question

i'm starting out with Dojo and trying to get a thumbnail gallery to display from a json file with no luck so far. I've searched and viewed other examples but none have helped me. Please help me to see what i'm doing wrong.

It's working when specifying the data in the script however(as shown by the commented out code) I can't get it to read data from an external file.

My code so far:

 <script>

    require(["dojo/ready",
         "dijit/registry",
         "dojo/dom",
         "dojo/on",
         "dojo/parser",
         "dojo/data/ItemFileReadStore",
         "dojox/image/Gallery"
    ], function (ready, registry, dom, on, parser, ifrs, Gallery) {

        ready(function () {
            // Define the attribute names used to access the items in the data store
            parser.parse();
            var itemNameMap = {
                imageThumbAttr: "thumb",
                imageLargeAttr: "large"
            };

            // Define the request, with no query, and a count of 20, so 20 items will be
            // requested with each request
            var request = {
                query: {},
                count: 20
            };
            // var store = new ifrs(imgs);

         /*   imageItemStore.data = {
                identifier: 'title',
                label: 'Images',
                items: [
                    {
                        thumb: "http://www.flickr.com/photos/44153025@N00/748348847",
                        large: "http://www.flickr.com/photos/44153025@N00/748348847",
                        title: "Photo"
                    }
                ]
            };*/
                imageItemStore = new dojo.data.ItemFileReadStore({ url: "/images.json" });
                registry.byId('gallery1').setDataStore(imageItemStore, request, itemNameMap);

        });
    });
        </script>

My json file:

{ items: [
{
  "thumb":"images/extraWide.jpg",
  "large":"images/extraWide.jpg",
  "title":"I'm wide, me",
  "link":"http://www.flickr.com/photos/44153025@N00/748348847"
},
{
 "thumb":"images/imageHoriz.jpg",
  "large":"images/imageHoriz.jpg",
  "title":"I'm a horizontal picture",
  "link":"http://www.flickr.com/photos/44153025@N00/735656038"
},
{
  "thumb":"images/imageHoriz2.jpg",
  "large":"images/imageHoriz2.jpg",
  "title":"I'm another horizontal picture",
  "link":"http://www.flickr.com/photos/44153025@N00/714540483"
},
{
 "thumb":"images/imageVert.jpg",
  "large":"images/imageVert.jpg",
  "title":"I'm a vertical picture",
  "link":"http://www.flickr.com/photos/44153025@N00/715392758"
},
{
 "large":"images/square.jpg",
 "thumb":"images/square.jpg",
 "link" :"images/square.jpg",
 "title":"1:1 aspect ratio"
}
]}

My markup:

<div class="claro" style="height:400px">
        <div data-dojo-type="dojox.image.Gallery" id="gallery1" style="height:400px"></div>
    <div data-dojo-id="imageItemStore" data-dojo-type="dojo.data.ItemFileReadStore"></div>
    </div>

Any help would be greatly appreciated

Do you have a web server to serve your json file ? – Philippe Mar 20 '14 at 16:03 — Philippe, Mar 20 '14 at 16:03

score 0 · Accepted Answer · answered Mar 20 '14 at 17:30

0

Have you looked a the JsonRest store instead of an ItemFileReadStore? http://dojotoolkit.org/reference-guide/1.9/dojo/store/JsonRest.html

answered Mar 20 '14 at 17:30

Bal

2,027
4
25
51

Hi, i've tried this, but it's not working either var jstore = new dojox.data.JsonRestStore({ target: "/images.json" }); registry.byId('gallery1').setDataStore(jstore, request, itemNameMap); – Beamo Mar 24 '14 at 08:17
Can you be more specific? If you use firebug in firefox, do you see the request to /images.json occurring at all? Can you assign the store to a global variable or use a console.info(jstore) to ensure it's being created? What is gallery1? You should use myWidget.set('store', jstore); You might also want to try either including an id field in your data or specifying an aleternative id field, ie new dojox.data.JsonRestStore({target:"/images.json", idAttribute:"link"}). That's not great, but it needs a unique identifier. – Bal Mar 24 '14 at 19:37
Hi, thanks for the help. I have realized that my syntax was wrong on the ItemFileReadStore as it should be var jstore = new dojo.data.ItemFileReadStore({ url: "http://localhost:3925/images.json" }); – Beamo Mar 25 '14 at 08:24
After fixing this im receiving a 404 error, as described in this link [link](http://stackoverflow.com/questions/4388066/the-page-you-are-requesting-cannot-be-served-because-of-the-extension-configura) im currently trying to register the right version and see if that sorts out my problem – Beamo Mar 25 '14 at 08:27

itemfilereadstore reading from json file

1 Answers1