How can I load web app data into a javascript array?

[ljohnson2510]

I'd like to load my web app data into a javascript array. Has anyone done this or know the best way to accomplish this?

[Guest]

I use the code below to sort my web apps. Might get you started.

var arr = [];

                    $(".trainers li.country").each(function(){

                              var obj = {};

                              obj.name = $(this).find("p").html();

                              obj.property = $($(this).children()[1]).html();

                              arr.push(obj);

                    });

[Adam_Cook__ONE_Creative_]

I know this topic is old, but I figured I'd offer my two cents anyway.

For a list with many items, I use a custom list template (released after these posts were written) to create a js object:

'{tag_name_nolink}' : {id: '{tag_itemid}',url: '{tag_itemurl_nolink}'},

And then on the page where I insert the module, I surround it with the rest of the object code:

<script>

     var itemList = {

          {module_webapps,18231,a template="/Layouts/WebApps/my_web_app/customlist.tpl",,,,true,500,,1}

          null : {id: null,url: null}

     };

</script>

Now I can call an object with:

itemList.url

Or whatever.

[Liam Dilley]

That is inline scripts though Adam.

Better using HTml 5 data objects or similar output and a proper function.

[Adam_Cook__ONE_Creative_]

Technically inline, but still at the bottom of the page. And the code that reads it wouldn't be inline.

I guess, to me, there are a lot of things that can't be done ideally in BC (though, that changes for the better every month), so this is a work around.

That said, I'm completely unfamiliar with html5 data objects (except by name). I'll check it out! Thanks, Liam.

[Liam Dilley]

Well not even that really. All my scripts are external in objects optimized and only called when the elements that need to run them and any jquery plugin lazy loaded.

[Adam_Cook__ONE_Creative_]

I really do the same thing, with this situation being the only exception. One of the things I really like about this is that it is simply creating an object, without even traversing the Dom.

So, I'm assuming you see it as a performance hit. Is that it? Is there something you would do in this situation that doesn't cause concern?

[kenneth_rapp]

I like that, as long as you can safely expect you won't accidentally escape something improperly... it's unfortunate that webapps don't export to json on their own though.

I've usually just pulled a custom data list template in with ajax (as html), attached it to a dummy dom object and used that.

[Liam Dilley]

Do that often too. jQuery .data is pretty awesome for use as well.

[Adam_Cook__ONE_Creative_]

That's a good alternative if you have hang-ups with my suggestion.

[Liam Dilley]

Load rendering with modules in scripts I do not like. Which you can view when you use say chrome.

[Adam_Cook__ONE_Creative_]

I really am curious what it is you don't like about it. Can it cause problems? What's your view, Liam?

[Liam Dilley]

One the primary things I learnt at Uni is the Object Oriented Modal of design and Development, MVC etc.

Seperation of the function, display, data being a fundemental point to develop and all the benifits of that.

Also, Your HTML code will weigh more, i.e. a web page riddled with similar code will have a kb size that is a lot larger than necessary. The inline script and css will make the source more dense, search engines have to sift through it to find your actual content.

Your HTML code will never be truely cached but the external dependencies, such as the CSS and JavaScript files, will be cached by the visitor’s web browser after the first visit – this means that instead of loading a lot of superfluous HTML code for every page in your web site the visitor visits, it will quickly retrieve all style and interaction locally from the web browser cache and thus improve perfomance further.

No fall back interaction, and harder to manage, correct and update along with poor attrinbute accessability. Having your scripting in one central location makes your development time more effecient, working on new aspects of the site has no effect on the live site, functions can be wrote once called many times and only when needed. Object coding in Javascript improves performance, management, use and more also.

With these in mind the page load is just longer with inline scripting and the event handling is poorer and then coupled with the other elments mentioned above.

Just better done right BC has runs gzip, you can optimise your code and the server caching of css, script, image files and the browser it just all leads to better perfomance of your site which is also increasingly something google wants to see to rank you well.

[Liam Dilley]

Also, another small improvement is declaring variable objects then using them.

var something = "";

Then when you assign data to that variable or object you create.... something = "My Data"; this is more effecient.

[Adam_Cook__ONE_Creative_]

And with declaring variables before using them—I had no idea that was better!

[Liam Dilley]

From C to jScript to Java, that is a what you do

You are even able to create class's in javascript

http://www.htmlgoodies.com/html5/tutorials/create-an-object-oriented-javascript-class-constructor.ht...

[Guest]

Interesting discussion!

In my past life as a Software Engineer, I used the MVC model, mainly with WPF and WCF building windows apps.

Never thought about using it in web development - Duh!

I suspect my whole approach will change now.

Thanks Liam for giving me food for thought.

Penny

[Adam_Cook__ONE_Creative_]

Alright Penny and Liam,

I had to go do a bit of research because of Penny's comment. The subject of MVC is entirely foreign to me, so I entirely missed that in Liam's comment.

So Liam, here's what I think you are saying to me:

I had BC output an object (part of my model) for my functions (model, controllers) to use, along with its usual job of delivering the HTML (the view portion of its own model). This is first of all messy. Second, if I were to do this at all, done correctly, instead of just a lonely object sitting by itself I should have wrapped it into a useful function so it's purpose is more clear?

Scale of 1-5, how close am I. (five is right on)

[Liam Dilley]

Adam,
To start you off in terms of basics....

Have a functions file (I wrote a guide on the Adobe site but BC took their guide section down as it was another place. I got it saved and I will put it as a guide on these forums soon!) where you write your functions. Each function for a job.

Have a Dom.js file where you run the dom in jQuery. One time call. In here you can call a function when to run it.

So say you have the home page slider but that is only home page.

You wrap the function in an if statement that basically is..

If element exists (.length) then run this function.

If the element does not exist the function does not run.

You can lazy load and call scripts, create script library to run (On our sites we have one extra .js at the bottom called to do all our magic) and add plugins easily to a site, lazy load them so they do not run every time you load a page even if not needed....

You can progress to convert everything into objects not just functions.

You can progress still to use classes in javascript..

jQuery has great features to aid in all these areas.....

So much you can do to optimise not just your sites and scripts but how you operate running these methods.

The OO apporach to your work is modular design and development just means you can do more for less and sites are just better.

[Guest]

Just thinking!

I am used to test driven development, so the minimum required code is written.

I wonder if this approach can be used in web development too.

Penny

[Liam Dilley]

Penny, smaller the code the better really, Lots of people use jQuery plugins because they do not understand javascript or jQuery that well to get something going. Often 4 lines of code can be done to do the same job.

Some aspects wont work in that sense for web development and more over BC but you can come up with a really nice modal for yourself and BC.

[Adam_Cook__ONE_Creative_]

I have a scripts.js file that contains all my jquery plugins and an object with all my scripts divided up by their different purposes:

Object.category.script ();

The only other script references I include in the document, with the exception of the obvious CDN references like jquery, are the odd time when a set of functions are very large and only applicable to a particular area of the site. I do this because including them in my scripts.js file would make it to big to quickly read through.

The reason I justify having a custom list layout output an object for me is because it saves (just in this particular scenario) a lot of http requests and unnecessary processing.

We don't have an ideal coding world in BC. Sometimes I think it's more about weighing the fruits of your options against the fruits of convention.

[Liam Dilley]

It is actually a bit more load Adam over you think it less http requests
But you are right in a way but I have an awesome BC site framework now which can be more with more time applied to it even further that is not a template for sites but builds your sites with BC pretty awesome.

[kenneth_rapp]

Do you have a github account?

[Adam_Cook__ONE_Creative_]

Perhaps more load overall, but certainly not on the front-end. Just the same, this has been an intriguing discussion, prompting a little research on my part. I always appreciate that.

I'd be interested to see how you do things, Liam. Unless, of course, you feel a little protective of all the work you've done to develop it. That would be understandable. But I've always enjoyed learning from others.