Search code examples
jsonractivejs

in Ractive, Combine 2 json files and print out accordingly

First time attempted ractive and got errors. [Object object] printed repeatedly. Tried to merge both files into one (problem is that the collection and ad are different so how to combine both?)

Advertisements and non-advertisements would be printed out respectively, meaning advertisement items should be printed out first in freewall layout and after that, non-ad items will be printed out.

Somewhere in code i might have gone wrong.

Ractive Template

 <script id="thumbnail-tmpl" type="text/ractive">
      {{items}}
        {{#if advertised}}
        <div class="thumb">
            <span class="thumb-caption">
              {{title}}
              <small>{{subtitle}}</small>
            </span>
        </div>
        {{else}}
        <div class="thumb">
         <span class="thumb-caption">
           {{title}}
           <small>{{subtitle}}</small>
         </span>
      </div>
 {{/#if advertised}}
      {{items}}
      </script>

Script

<script>

    ;(function() {

      var finalObj = $.merge(collections, ad);
      $.getJSON(finalObj)
        .then(function(response){
          new Ractive({
            el: document.querySelector('[data-freewall]'),
            template: '#thumbnail-tmpl',
            data:{
              items: response,
              advertised: response.advertised
            }

          })

        });

    })();
    </script>

HTML

 <div data-freewall></div>
  1. How to combine two json into one? They will be two different files so will pull json from files later.
  2. Advertised is not working for conditional to print ad and non-ad items. Tried tutorial conditional on ractive website..
  3. Is it possible to print ad items first then non-ad items second before laying them out in freewall layout (in case if you don't know what freewall is, http://vnjs.net/www/project/freewall/?

help will be appreciated.

Updated: Still have problems Keep on seeing test message - 

[object Object],success,[object Object],[object Object],success,[object Object]

Also {{/if}} and {{/each}} are giving illegal errors

$.when(
          $.getJSON('pathto/test/collection.json'),
          $.getJSON('pathto/test/ad.json')
        ).then(function(collections, advertised){

            var items = collections.concat(advertised);
            alert(items);
            items.sort(function(a, b){
              if(a.advertised){
                return b.advertised ? 0 : -1;
              }
              else{
                return b.advertised ? 1 : 0;
              }
            });

            var ractive = new Ractive({
              el: document.querySelector('[data-freewall]'),
              template: '#thumbnail-tmpl',
              data:{
                items: items
              }

            });
        });

In json files from two urls

{
      "advertised": [
        { "title": "Rabbit",
          "subtitle": "Nibble",
          "advertised": true
         },
        { "title": "Dog",
          "subtitle": "Woof",
          "advertised": true
        },
        { "title": "Cat",
          "subtitle": "Purr",
          "advertised": true
        }
      ]
    }

{
      "collections": [
        { "title": "Horse",
          "subtitle": "Na~~",
          "advertised": false
        },
        { "title": "Turkey",
          "subtitle": "Gobble",
          "advertised": false
        },
        { "title": "Goat",
          "subtitle": "Baaaa",
          "advertised": false
        },
        { "title": "Snake",
          "subtitle": "hissssss",
          "advertised": false
        }
      ]
}

Still not seeing anything display on the page - show blank even if errors are corrected. I am wondering if the json files are a reason -- because we can't access to collection and advertised in json files?

Help please and appreciate it

Solution

  • The reason you're getting [object Object] is that you're trying to print {{items}} directly - use {{#each items}}...{{/each}} instead (or just {{#items}}...{{/items}} if you prefer the compact syntax). There's also an error with {{/#if advertised}} - use {{/if}} instead.

    The easiest way to combine data from two different JSON files, if you're using jQuery AJAX, is probably to nest the callbacks...

    $.getJSON('path/to/collections.json').then(function (collections) {
  $.getJSON('path/to/advertised.json').then(function (advertised) {
    // code goes here
  });
});

    ...though it would be more ideal to use deferreds so that you can fetch the files in parallel:

    $.when(
  $.getJSON('path/to/collections.json'),
  $.getJSON('path/to/advertised.json')
).then( function ( a, b ) {
  var collections = a[0].collections, advertised = b[0].advertised;
  // code goes here
});

    Now for the code to combine the two arrays. You don't need to use jQuery for this, since you're just concatenating two arrays:

    var items = collections.concat( advertised );

    You can sort them however you like using items.sort(sortFunction). Feed that into your Ractive instance, and everything works as expected (there's an example sort function there).

    Once you've done that, you can use the freewall plugin on the container element.