Currently using OctoberCMS and Twig to get dynamic data and translations on the front end that come from JSON files. For example:
<div class="wrapper items">
<div class="items">
{% for suggestion in 'form.suggestions'|trans %}
<div class="item" data-subject="{{ suggestion(KEYS) }}">
{{ suggestion}}
</div>
{% endfor %}
</div>
</div>
"form":{
"suggestions": {
"suggestion1": "This is suggestion 1",
"suggestion2": "This is suggestion 2",
"suggestion3": "This is suggestion 3",
"suggestion4": "This is suggestion 4",
"suggestion5": "This is suggestion 5",
"suggestion6": "This is suggestion 6",
"suggestion7": "This is suggestion 7",
"suggestion8": "This is suggestion 8",
"suggestion9": "This is suggestion 9",
"suggestion10": "This is suggestion 10",
"suggestion11": "This is suggestion 11",
"suggestion12": "This is suggestion 12",
"suggestion13": "This is suggestion 13",
"suggestion14": "This is suggestion 14",
"suggestion15": "This is suggestion 15"
},
}
I've currently got a for each loop and need both the keys and values from the JSON file. At the moment, I can only access the value but not the keys, and I can't seem to figure out how to access them. Is this possible at all with Twig and if it is, how could I get this to work?
As suggested by #DarkBee, I simply changed the word "key" for "subject" instead, and this works fine. No idea why "key" didn't work the same way, but this seemed to have solved the issue for me. Appreciate the assistance!
Related
This question already has answers here:
With ng-bind-html-unsafe removed, how do I inject HTML?
(10 answers)
Closed 4 years ago.
I have an ngController which contains, amongst other things, an array of questions and answers:
$scope.faqs = [
{
question: "QUESTION 1",
answer: "ANSWER 1"
},
{
question: "What is the dress code?",
answer: "See here."
},
{
question: "QUESTION 3",
answer: "ANSWER 3"
}
];
In my HTML I then cycle through these to display them:
<div>
<div ng-controller="FAQController" class="FAQ_container">
<div ng-repeat="faq in faqs">
<button class="collapsible">{{ faq.question }}</button>
<div class="content">
<p>{{ faq.answer }}</p>
</div>
</div>
</div>
<div>
However, for the middle question in my array, it prints the whole item as a string. I can understand why this is the case, however I would like for it to have the link clickable.
I have tried the suggestion from How to parse HTML in ng-repeat in angular.js by changing my
<p>{{ faq.answer }}</p>
to
<p ng-bind-html-unsafe="faq.answer"></p>
but that has just served to stop anything printing. Can anyone help with an alternative suggestion or fix please?
Please note: I am just starting out with angularjs and web development so please try to keep your answers simple and bear with me if I have to ask for clarification.
You could use ngSanitize and make your answers to be trusted has html like this:
angular.forEach($scope.faqs, function(faq) {
faq.answer = $sce.trustAsHtml(faq.answer);
});
For this you will need to use the $sce service.
And then bind them like this: <p ng-bind-html="faq.answer"></p>
See below working full sample:
angular.module('app', ['ngSanitize']).controller('FAQController', function($scope, $sce) {
$scope.faqs = [{
question: "QUESTION 1",
answer: "ANSWER 1"
},
{
question: "What is the dress code?",
answer: "See here."
},
{
question: "QUESTION 3",
answer: "ANSWER 3"
}
];
angular.forEach($scope.faqs, function(faq) {
faq.answer = $sce.trustAsHtml(faq.answer);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.14/angular-sanitize.js"></script>
<div ng-app="app">
<div ng-controller="FAQController" class="FAQ_container">
<div ng-repeat="faq in faqs">
<button class="collapsible">{{ faq.question }}</button>
<div class="content">
<p ng-bind-html="faq.answer"></p>
</div>
</div>
</div>
<div>
First, I'm using GitHub Pages dependencies.
I'm trying to make use of Jekyll's data files, but I'm having problem making functional links that would use a layout to display more of the object's contents.
I can access the page via the url: http://127.0.0.1:4000/dev/ - and my for loop at ./dev/index.html shows as it should. If I click any links on that page I get a 404 message because e.g: http://127.0.0.1:4000/dev/parent/child couldn't be found.
The posts in Jekyll use Front Matter to determine which layout it should use, but I don't know how to make my links to use my custom layout when I click any of the links in ./dev/index.html.
How can I create a "link" between the urls in ./dev/index.html to display the ./_layouts/post.html?
Here's what I got so far.
./_data/dev.json:
[
{
"id": 0,
"name": "I am (g)Root",
"link": "parent",
"data": [
{
"id": 0,
"name": "Some kid",
"content": "bla bla bla",
"link": "child"
},
{
"id": 1,
"name": "A desk",
"content": "texty texty",
"link": "desk"
}
]
}
]
./dev/index.html
---
layout: page
title: 'dev'
published: true
date: 2015-10-03 18:48:58 +02:00
category: 'module'
---
{% assign data = site.data.dev.first %}
{% for post in data.data %}
<ul>
<!-- URL will look like this: /parent/child -->
<li>{{ post.name }}</li>
</ul>
{% endfor %}
./_layouts/post.html
---
layout: default
---
{{ content }}
./_config.yml
permalink: /:categories/:title
Data files are just datas that you can consume in loops. Without a generator plugins you're not able to generate pages from them.
In order to generate page from "datas" you can use collections.
Let you assume that I have this json file:
{
"components":[
{
"id" : "brandbar",
"name" : "brandbar.html",
"type":"navbar",
"description":"Bar with the brand",
"status": "draft"
},
{
"id":"topbar",
"type":"navbar",
"component":"Best brand",
"description":"Chart with Date"
}]
}
Now, I would like to have a loop on this json to retrieve the filenames.
{% for entry in site.data.component.components %}
<div class="col-md-12">
{% include {{ entry.name }} %}
</div>
{% endfor %}
The problem is that I can't use {{ entry.name }} in my include statement.
is there a way to achieve this goal ?
I don't want to loop directly in my folder... I would like to have a main file where I will fill in every important attribute about the components.
You can try to indent you json with spaces instead of tabs.
This might do the trick :
{"components":[
{
"id" : "brandbar",
"name" : "brandbar.html",
"type":"navbar",
"description":"Bar with the brand",
"status": "draft"
},
{
"id":"topbar",
"type":"navbar",
"component":"Best brand",
"description":"Chart with Date"
}
]}
Except that topbar has no name propriety, and this can cause an error.
I'm having trouble trying to loop through my JSON data with an a assemble site setup in the following structure:
-src
--content
---index.hbs
--data
---steps-data.json
--partial
---steps.hbs
The index.hbs in the content calls the partial passing through the object like so:
{{> steps steps-data}}
My steps-data.json file looks like so:
{
"steps":[{
"index": 1,
"title": "Find a product",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
},{
"index": 2,
"title": "Track its price",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
},{
"index": 3,
"title": "Purchase",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
}]
}
In my steps.hbs i've tried looping through the JSON data but its not.
<div class="g-col g-span4">
{{#each steps-data.steps}}
<div class="working-step">
<span class="number"></span><h3>{{title}}</h3>
</div>
<p>{{description}}</p>
{{/each}}
</div>
The problem I have is that its not looping through and not sure what I'm doing wrong.
Since you passed steps-data into the partial as it's context, you can access steps directly or with this.steps:
<div class="g-col g-span4">
{{#each this.steps}}
<div class="working-step">
<span class="number"></span><h3>{{title}}</h3>
</div>
<p>{{description}}</p>
{{/each}}
</div>
I have this Backbone App where I display my data/json with HandlebarsJS.
Now my API returns nested JSON data:
{
"Live": [
{
"artist_name": "some artist",
"video_title": " some video title",
"video_thumbnail": "some thumbnail"
}
],
"Others" : [
{
"artist_name": "some artist",
"video_title": " some video title",
"video_thumbnail": "some thumbnail"
}
]
}
I tried to do
{{#each Live}}
<div>
<img src="{{video_thumbnail}}">
<h2>{{video_title}}</h2>
<h2>{{artist_name}}</h2>
</div>
{{/each}}
But that did not work...
Anyone who know what to do? thanks in advance...
Handlebar templates can be used in two ways.
1. We can save the file with (.hbs)
2. Second way is we need the handlebar template in script tag. Provided same in [jsfiddle][1] , I have provided link, you can check the below link
[1]: https://jsfiddle.net/trilokvallamkonda/cLgzf21y/13/