current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I'm developing an app with the Ionic framework based on angularjs. I'd like to let generate HTML elements or components from a JSON file. These are buttons, lists, labels, etc.

My JSON objects look like this:

[
  {
    "category": "communicationPage",
    "type": "Button",
    "id": "communicationButton",
    "icon": "ion-chatboxes",
    "name": "Communication",
    "onClick": "window.location.href='communicationPage.html'",
    "ngclick": "open()",
    "ngcontroller": "openctrl",
    "color": "white",
    "background-color": "#ff5db1",
    "font-size": "20px"
  },
  {
    "category": "servicePage",
    "type": "Button",
    "id": "serviceButton",
    "icon": "ion-briefcase",
    "name": "Service",
    "onClick": "window.location.href='servicePage.html'",
    "color": "blue",
    "background-color": "#009900",
    "font-size": "26px"
  }
]

I can access via my Controller on the JSON file and parse as follows:

myApp.controller('generateHTMLCtrl', function ($scope, $http) {
    $http.get('myJSONFile.json').success(function(data){
        $scope.components = data;
        //...
    });
});

The code translates of course nothing.

  1. My question is, how can I adapt my JavaScript code so that from a
    JSON object following HTML element is generated?:

<button style="color: blue; background-color: #ff5db1; font-size: 20px" onclick="window.location.href='communicationPage.html'" id="communicationButton" class="button"> <i class="ion-chatboxes"></i> <br> Communication </button>

Once my JSON object is located always in the JSON file, should always be created the HTML element on the page.

  1. The second question is how I can position this generated HTML element just in my HTML page?

I want that the HTML element is generated between the responsive grid element, such as:

 <div class="row responsive-sm">
    <div class="col">
      <!-- The Button should be generated hier-->
    </div>
 </div>
  1. The third and final question is how I can let generate the HTML element on the appropriate page? Such as: If in JSON object the key-value pair of "category": "communicationPage" occurs should the corresponding HTML element be created on 'communicationPage.html'

I would look forward to an example. Many thanks.

share|improve this question
    
why would you use <button> for redirect and not use an <a> tag with an href? Question #3 is very unclear what you are asking – charlietfl Aug 4 '15 at 12:59
    
You're right. But what is better in this case by using <a></a> and what worse by using <button></button>? – Ramosta Aug 4 '15 at 13:04
    
semantics and accessibility. Still not clear what you are trying to do either – charlietfl Aug 4 '15 at 13:05
    
For Question # 3: Is it possible that I can automatically generate the HTML elements from a JSON object on a targeted certain page? When key-value pair "category": "communicationPage" is in my JSON object located this button automatically should be generated on the HTML page namedcommunicationPage.html. I want to work only in my JSON file not with the HTML-Code in html.page. So I would like to add the HTML elements on my page or delete from my page by editing the JSON-File. So the components should be deleted or added on the targeted page. – Ramosta Aug 4 '15 at 13:19
    
It appears you are leaving your angular single page application and loading different pages from server. You would need to use url query parameters or localStorage to provide data for other pages. The other page would know nothing about your angular application – charlietfl Aug 4 '15 at 13:23
up vote 0 down vote accepted

For the two first point, use the data-binding and ng-repeat : directive

<div class="row reponsive-sm" ng-controller="generateHTMLCtrl">
     <div ng-repeat="component in components">
       <button style="color : {{component.color}}; background-color : {{component.background-color}} ... ">
       </button>
     </div>
</div>

For the last point, I'm not sure if it's possible with AngularJS ...

share|improve this answer
    
can you maybe give an example how I use expression for ng-controller and ng-click tags from a json object. Like ng-click"{{component.ngclick}}" and ng-controller"{{component.ngcontroller}}". If I use the expression so I get error – Ramosta Aug 11 '15 at 11:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.