Skip navigation
ljohnson2510
Currently Being Moderated

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

Aug 6, 2012 12:07 PM

Tags: #web_apps #web_app #web_app_detail_layout #web_app_list

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?

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Aug 6, 2012 5:19 PM   in reply to ljohnson2510

    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);

                        });

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2013 2:50 PM   in reply to ljohnson2510

    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.

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 7, 2013 3:12 PM   in reply to Adam Cook

    That is inline scripts though Adam.

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2013 3:18 PM   in reply to Liam Dilley

    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.

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 7, 2013 4:19 PM   in reply to Adam Cook

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2013 6:30 PM   in reply to Liam Dilley

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2013 8:56 PM   in reply to Adam Cook

    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.

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 7, 2013 10:10 PM   in reply to kenneth_rapp

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2013 10:17 PM   in reply to kenneth_rapp

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

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 7, 2013 10:31 PM   in reply to Adam Cook

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2013 10:36 PM   in reply to Liam Dilley

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

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 7, 2013 10:53 PM   in reply to Adam Cook

    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.

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 7, 2013 10:59 PM   in reply to 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.

     

     

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2013 11:03 PM   in reply to Liam Dilley

    Thanks, Liam. I always appreciate hearing the rationale.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2013 11:06 PM   in reply to Liam Dilley

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

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 7, 2013 11:49 PM   in reply to Adam Cook

    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-j avascript-class-constructor.html#fbid=gkA89HyUIS3

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 3:44 PM   in reply to Liam Dilley

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 4:29 PM   in reply to fortunegreen

    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)

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 8, 2013 4:59 PM   in reply to fortunegreen

    Penny, IT is awesome to do so.

    Allows you to create and manage and re-use and helps your pefomance and structure of your BC sites no end

    DO IT!

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 8, 2013 5:04 PM   in reply to Adam Cook

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 5:08 PM   in reply to Liam Dilley

    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

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 8, 2013 5:23 PM   in reply to fortunegreen

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 5:30 PM   in reply to Liam Dilley

    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.

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 8, 2013 6:07 PM   in reply to Adam Cook

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 6:21 PM   in reply to Liam Dilley

    Do you have a github account?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 6:41 PM   in reply to Liam Dilley

    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.

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 8, 2013 6:48 PM   in reply to Adam Cook

    More Adam, See by big above post Due to the caching and a few other bits. More load being inline.

    I did a big basics guide for intermediates that was up on adobe site but removed as BC closing to many avenues for guides. I will re-up it in the guides section I cleaned up before xmas on these forums. That will be the guts of what I do and the basic concepts.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 7:34 PM   in reply to Liam Dilley

    Thanks! I look forward to it.

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 8, 2013 7:50 PM   in reply to Adam Cook

    Sounds of it your about there Adam. Have to admit I have not fully practised what I preach in but defiantly do not do inline. Time to update but I think I do as some do with the Object oriented, lazy loading etc.

    Even if it is only slight improvements in perfomance in SOME areas and lots in others the management apsects of it alone is worth adopting.

     

    Think about inline stuff as well with jQuery and all the people calling the Dom multiple times!, eeek! SO many do using BC

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 8:02 PM   in reply to Liam Dilley

    To tell the truth, the thought of "calling" the Dom has never even crossed my mind. I think of server calls, and I think of how much work has to be performed by the browser (especially when I'm creating loops), but you're absolutely right. We do call the Dom, and it's just one more handshake that has to happen. The first thing I'm going to look into is a Dom.js approach.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 8:20 PM   in reply to Adam Cook

    I think this has been one of the most interesting discussions on this forum, and has certainly stimulated my thinking!

     

    Do any of you use source control?

     

    I guess as a sole developer, it may be a bit pointless in my case, and I always take a copy of a file before I start modifying it.

     

    Also, if clients are updating files you have no control over that.

     

    Penny

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 8, 2013 8:21 PM   in reply to Adam Cook

    I seen sites which do the jquery DOM loading 20/3o times because of all the inline scripting! pretty shocking, lol.

    You can get it to have one js called in your templates which loads what you need when you need it and all the basics etc and out of the head to reduce the load there. So clean, performs well.

    Ecommerce framework fuel offers through the ecommerce websites business has HEAPS of script to fix up BC eCommerce (which has so many issues) along with the standard issues and of course securezone ones all together. More script then I like but I would hate to think the load it would be without some of the above mentioned stuff in play. And that even uses old ways we do things, just a big job to update it at the moment.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 8:31 PM   in reply to fortunegreen

    I'm horrible about source control. I'm also a solo act, and I think that has led to some lazy practices on my part. However, I'm beginning to develop enough of a code library that i wont be able to get away with it much longer.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 8:40 PM   in reply to fortunegreen

    I started using git a few months ago and it's been amazing for organizing my work.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2013 8:45 PM   in reply to kenneth_rapp

    As per Kenneth earlier in this discussion:

     

    “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.”

     

    It just hit me, thanks to this discussion, that this is the better approach. I'll still create my custom list template that outputs an object for me, but instead of having it load into the page, I'll avoid the caching by calling it through Ajax into my scripts.js. Duh. I was so close to a perfect solution!

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 9, 2013 1:44 AM   in reply to Adam Cook

    Git is awesome, How it works in Coda 2 is awesome BUT.... You do not need it in BC. It is great for huge projects and team environments and big system development but a bit much for BC and I find it slows you down.

    Bit to much I think.

    With some of the above and applying that to how you build BC in general, which I think literally the Penny has droppoed on that from Penny and sounds like she has some improvements to make on her BC builds already (which will be awesome) you can have great fun building BC sites. I do.

     

    Here you go by the way re-document:

    http://forums.adobe.com/docs/DOC-2964

     

    Formed up this evening. You may know a lot or do some or all of it but it a good guide for lots of people hopefully.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 9, 2013 10:37 AM   in reply to Liam Dilley

    Liam, as I read through your document and thought about the merits of lazy loading, a question arose. How do you handle jQuery plugins?

    Currently, I paste them directly into the top portion of my scripts.js file, then call them from within my object at the bottom portion of the file. To illustrate, this represents my current file structure (though I included the 'if' statements around my functions in a new attempt at make this better at lazy loading):

     

    /* Plugins */ 
    This represents a minimized version of a jquery plugin, pasted directly into my scripts.js file. 
    Here is another. 
    And another. 
    
    /* My scripts */ 
    jQuery.noConflict(); 
    function scriptlist() {
         var $ = jQuery;
         var Engine = {
              utils : {
                  function1 : function() {
                       //do stuff here
                  }
                  function2 : function() {
                       //do stuff here
                  }
              },
              ui : {
                  function1 : function() {
                       //do stuff here
                  }
              }
         };
         if( $(element).length ) {
              Engine.utils.function1();
         }
         if( $(element2).length ) {
              Engine.utils.function2();
         }
         if( $(element).length ) {
              Engine.ui.function1();
         }
    };
    jQuery('body').on('click.productSubmitInput',function() {
          jQuery.ready(scriptlist());
    });
    scriptlist();
    

     

    Now, there are probably many things wrong with what I wrote, and you are free to comment on them, but my questions are: Is it bad to include the plugins at the top of this file? Should they, instead, be contained within my scriptlist() somehow? Should I have conditions set on their loading?

     
    |
    Mark as:
  • Liam Dilley
    4,232 posts
    Feb 28, 2012
    Currently Being Moderated
    Jan 9, 2013 11:29 AM   in reply to Adam Cook

    There are a few different ones but I call them in the Dom.js but through lazy laoding. They are declared with cache or not and their dependencies if they have them and then call functions / objects on the Dom call.

    IF functions call a plugin then the plugin is only loaded when called.

     

    Something else you can do is use getScript in jquery in a function to call another script to use only when you need it in that function.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 9, 2013 6:57 PM   in reply to Liam Dilley

    Have you looked at require.js? (http://requirejs.org/)

     

    I haven't had the best of luck using getScript with multiple libraries because of async issues, but apparently promises are a thing now and i'm trying to learn them, to make a function queue like this.

     
    |
    Mark as:
1 2 Previous Next

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points