7 Replies Latest reply on Sep 19, 2016 11:31 AM by Scott A Johnson

    customizing template in soy file

    npanta@italentcorp.com

      Hi all,

       

      How to print javascript object in soy file.

      we are trying to display all the places of our community in header as a drop down for that we tried with api but  we are unable to loop the object in soy

       

      Code:

      object like:

      places={category1:[{"placeName":"demospace3","placeLink":"localhost:8080/community/demospace3"},{"placeName":"demospace4","placeLink":"localhost:8080/community/demospace4"}]

                    category2:[{"placeName":"demospace5","placeLink":"localhost:8080/community/demospace5"},{"placeName":"demospace6","placeLink":"localhost:8080/community/demospace6"}]

                   };

      how to parse the above object in navbar.soy file.

      Gopi Gorantala

      Scott A Johnson

       

      Thank you,

      Narsi.

        • Re: customizing template in soy file
          gopi.gorantala

          Narsi,

           

          Make sure you add the @depends param in the soydoc where you want to loop the Javascript object (example:  @depends path = /plugins/pluginName/...../your.js)

           

          try using {$places} in some where else in your soy file to print the object value.

           

          Once you get the value, you can use foreach and loop through it.

           

            • Re: customizing template in soy file
              npanta@italentcorp.com

              Hi Gopi Shiva Krishna G,
              Thanks for quick reply can we achieve the same functionality using custom theme only?

                • Re: customizing template in soy file
                  Scott A Johnson

                  Hi Narsi,

                   

                  Can you share the code that you're trying to use to retrieve and render those values? Will the place values be hardcoded as you've shown, or will you be using the API to retrieve them?

                   

                  Thanks,

                  Scott

                    • Re: customizing template in soy file
                      npanta@italentcorp.com

                      Hi Scott A Johnson,
                      i am using places api and assigning that response to places object.When iam trying to access that object inside navbar.soy file like
                      <div ng-repeat="place in places">
                      {lb}{lb} place.placeName{rb}{rb}
                      </div> this 
                      The div is repeating but the values inside the div are not displaying.

                       

                      Thanks,
                      Narsi.

                        • Re: customizing template in soy file
                          Scott A Johnson

                          Can you include the full code snippet?

                           

                          What does the place object look like?

                            • Re: customizing template in soy file
                              npanta@italentcorp.com

                              Hi Scott A Johnson,

                               

                              i am using angular js for api calls below are the files which i modified

                              soy/template/template.soy

                              <script src="{themeUrl('/scripts/angular.js')}"></script>

                              <script src="{themeUrl('/scripts/app.js')}"></script>

                               

                              scripts/app.js

                               

                              app.controller('DemoCtrl',['$scope','getAPIResponse', function ($scope,getAPIResponse) {

                                  $scope.postUrl="/api/core/v3/places?filter=type(space,group)&count=100&startIndex=0";

                                  getAPIResponse.forPlace($scope.postUrl, function (callback) {

                                      console.log("sorting places with tags");

                                      var sortplaces={};

                                      angular.forEach(callback.list,function (value,key) {

                                            if(value.tags[0]!=null) {

                                                var name = value.tags[0];

                                                if (typeof (sortplaces[name]) == "undefined") {

                                                    sortplaces[name] = [ ];

                                                }

                                                var placeData = {

                                                    placeName: value.displayName,

                                                    placeLink: value.resources.html.ref

                                                };

                                                sortplaces[name].push(placeData);

                                            }

                                            else

                                            {

                                                var placeData = {

                                                    placeName: "Place Name",

                                                    placeLink: "#"

                                                };

                                            }

                                      });

                                      $scope.places=sortplaces;

                                      console.log(sortplaces)

                                  });

                              }]);

                               

                               

                              app.factory('getAPIResponse',['$http',function($http){

                                  var Service={};

                                  Service.forPlace=function(url,callback){

                                      $http({

                                          method:'GET',

                                          url:url,

                                          data:{},

                                          transformResponse:function(data,headersGetter,status){

                                              return {data:data}

                                          }

                                      }).success(function (result) {

                                          var content=JSON.parse(result.data.replace(/^throw [^;]*;/, ''));

                                          callback(content);

                                          content="";

                                      }).error(function (error) {

                                          console.log(error);

                                      });

                                  }

                                  return Service;

                              }]);

                               

                              soy/nav/navbar.soy

                              <div ng-app="app" ng-controller="CarouselDemoCtrl">

                              <div class="dropdown-content" ng-repeat="(tag,Spaces) in places">

                                    {lb}{lb}tag{rb}{rb}
                                  <div ng-repeat="(key,value) in Spaces">
                                      {lb}{lb}value{rb}{rb}
                                  </div>
                              </div>

                              </div>

                               

                               

                               

                              in app.js $scope.places has the place names and related urls.

                               

                              Thanks,

                              narsi.