Using node.js and handlebars I am trying to display a query using JSON.Stringify() function
javascript:
res.render('search', {"data" : JSON.stringify(data)});
the handblebars code search.handlebars:
<div>
{{data}}
</div>
which displays:
[{"media_name":"Edge of Darkness (2010)"},{"media_name":"Tim (1979)"},{"media_name":"We Were Soldiers (2002)"},{"media_name":"\"The Tonight Show with Jay Leno\" (1992) {(#20.49)} (archive footage)"}, ...]
I am trying to loop through this code using
{{#each}}
<li>
{{data.media_name}}
</li>
{{/each}}
so that i can pull out individual indexes: data[4] and have "Edge of Darkness (2010)" formatting without the {}. But doesn't seem to work.
Related
I am creating a Risk Management System using Nodejs and Express with Handlebar views. Using SQL, I am extracting two queries in my GET router and rendering them to the handlebar view. This is how it looks:
const parametro = await pool.query('select * from parametro where parid = ?', [parid]);
const tipoParametros = await pool.query('select distinct tipoparid from tipoparametro order by tipoparid');
res.render('parametros/modificar', {parametro, tipoParametros});
I consoled logged both arrays and they look like these:
- parametro: [
RowDataPacket {
parid: 22,
parcodigo: 'TEST',
tipoparid: 11,
pardescripcion: 'Just a Test',
parexplicacion: 'Test',
parclasificacion: 3,
parvalor: 'Test 1',
parusrcreaid: null,
parfechacrea: 2022-06-25T21:58:19.000Z,
parusrmodid: null,
parfechamod: null
}
]
- tipoParametros: [ RowDataPacket { tipoparcodigo: 'SYS', tipoparid: 11 } ]
However, since my POST for this view needs :id, I am iterating with each parametro because that's how I keep track of each row in my database, with parid. The .hbs view looks like this:
{{#each parametro}}
<form class = "row g-3 needs-validation" method = "POST" action = "/parametros/modificar/{{this.parid}}" novalidate>
{{> formparametro}}
</form>
{{/each}}
and inside "formparametro" there is a form-floating section where I try to iterate with each tipoParametro but nothing is coming out. Looks like this:
<div class="col-6">
<div class="form-floating">
<select class="form-select" id="floatingSelect" name="tipoparid" aria-label="Floating label select example" required>
{{#each tipoParametros}}
<option value={{this.tipoparid}}>{{this.tipoparcodigo}}</option>
{{/each}}
</select>
<label for="floatingSelect">Tipo Parametro</label>
</div>
</div>
How can I have access to the query and columns of tipoParametro?
As your formparametro partial is rendered within your {{#each parametro}} block, the context for each time the partial is rendered is the currently iterated item from parametro. Therefore, the partial has no access to tipoParametros.
What we want to do is provide a context to our partial that does contain tipoParametros. This is very simple. The Handlebars documentation covers Partial Contexts and it states that a context can be supplied to the partial as the second parameter within the mustache brackets, as in:
{{> myPartial myOtherContext }}
As your tipoParametros object belongs to your root context, I would recommend using the #root data variable to pass the root context to your partial. The line in your template invoking your partial thus becomes:
{{> formparametro #root}}
I have created a fiddle for your reference.
Method render does not exist error also in links() method
this is my blade
blade.php
this is my controller
controller.php
render() isn't used for pagination anymore.
In Laravel 5.4 you use links() to display the links:
<div class="container">
#foreach ($news as $newsItem)
{{ $newsItem->whatever }}
#endforeach
</div>
{{ $news->links() }}
Displaying Pagination Results
When calling the paginate method, you will receive an instance of Illuminate\Pagination\LengthAwarePaginator. When calling the simplePaginate method, you will receive an instance of Illuminate\Pagination\Paginator. These objects provide several methods that describe the result set. In addition to these helpers methods, the paginator instances are iterators and may be looped as an array. So, once you have retrieved the results, you may display the results and render the page links using Blade:
<div class="container">
#foreach ($news as $newsItem)
{{ $newsItem->whatever }}
#endforeach
</div>
{{ $news->links() }}
See more about Laravel 5.4 pagination here
I am creating a weather web app based on API from openweather.com using Spring-Boot and Angular.
I am also using this weather-icons package.
In my HTML file weather icons are displayed like this:
<div class="jumbotron">
<i class="wi wi-snow" style="font-size: 8em;"></i>
<i id="description">{{weather.weatherID}}</i>
</div>
With the help of API I have also weather code value available in html.
Let's say I have a file weather.data with weather codes mapped to icon description like this:
601: snow
602: sleet
611: rain-mix
Is it possible to display certain icon in HTML based on value in data file?
What I want to do is something like:
<div class="jumbotron">
<i class="wi wi-{{weatherDescription}}" style="font-size: 8em;"></i>
</div>
You can get your data from weather.data in a scope variable.
It would be like:
In Controller:
$http.get(path of weather.data file, null, function(response){
$scope.weatherList = response; //do angular.fromJson if required
});
I hope you are getting a JSON object as :
$scope.weatherList = {
601: "snow",
602: "sleet",
611: "rain - mix"
}
If you are getting weather code from server side in weatherDescription, then you can use it like this on html :
In Html:
<div class="jumbotron">
<i class="wi wi-{{weatherList[weatherDescription]}}" style="font-size: 8em;"></i>
</div>
I hope this works for you.
I'm new to AngularJS but I love the framework.
What I have right now, is a (stub) single page that loads json data.
JS
var merlinoApp = angular.module('merlino', []);
merlinoApp.controller('mainController', function ($scope, $http) {
...
$http.get('#Url.Action( "consoledatapull", "ConsoleElaborazioni")')
.then(function (res) {
$scope.jobs = res.data.jsonjobs;
$scope.clienti = res.data.jsonclienti;
$scope.console = res.data.jsonconsole;
});
...
});
HTML
<div ng-repeat="roll in jobs | orderBy:sortType:sortReverse | filter:searchJob | filter:searchCliente | filter:searchStato" class="console-row my-row">
...
<div class="console-cell-id console-cell console-cell-padding console-cell-no-border-sx">{{ roll.id }}</div>
...
<div ng-click="collapsed=!collapsed" ng-class="{'console-cell-esito-selected' : collapsed}" class="console-cell-esito console-cell console-cell-no-border-sx">SHORT DESC</div>
<div ng-show="collapsed" class="console-cell-esito-long console-cell console-cell-no-border-sx">{{ roll.esito }}</divng-show></div>
</div>
This populates ng-repeat, and the ng-click shows/hides the `ng-show div.
So far so good(?).
What Ì'm trying to achieve, is to load json data into
<div ng-show="collapsed" class="console-cell-esito-long...
if
<div ng-click="collapsed=!collapsed" ng-class="{'console-cell...
is clicked.
That is each div of ng-repeat, can be loaded with specific data:
<ul>
<li ng-repeat="logelem in jsonlog">
{{ logelem.log }}
</li>
</ul>
I thought about using a function:
<div ng-click="function(id)...
and then load json into a div identified by an id, so i used $index...
The result was, being able to load same data into all divs at once :/
Help would be appreciated.
My suggestion woudl be to add the information to the jobs elements itself.
So for example, the ng-click would become:
<div ng-click="loadData(id, roll)">CLICK ME</div>
and then the loadData would be something like:
$scope.loadData = function(id, roll){
// Do something
roll.result = result;
}
and then you can use the result from that object in the view like you would do in other places. You can then for example hide the object where you want the final result until the variable result is defined.
I think this will be the easiest solution.
Update from comments
Why not change the collapsed value in the method? Or you could use a $watch to listen to changes on the collapsed variable.
I'm messing around with a Meteor Leaderboard example. Let's say I wanted to display the index of an item inside a handlebars #each loop:
{{#each players}}
{{> player}}
{{/each}}
<template name="player">
<div class="player {{selected}}">
<span class="index">{{index}}</span>
<span class="name">{{name}}</span>
<span class="score">{{score}}</span>
</div>
</template>
Normally one would write a handlebars helper for this, but I'm having trouble figuring out how to get it working with a Meteor collection.
How would one do this? Thank you.
There is now an #index feature in Blaze:
{{#each players}}
{{> player index=#index}}
{{/each}}
<template name="player">
<div class="player {{selected}}">
<span class="index">{{index}}</span>
<span class="name">{{name}}</span>
<span class="score">{{score}}</span>
</div>
</template>
Template.player.helpers({
index() {
var data = Template.currentData();
if( data ) {
return data.index;
}
}
});
If you are just trying to show the mongo generated id just use _id
<span class="id">{{_id}}</span>
It will show the unique index id in the collection. It won't be pretty.
I may have misunderstood your question. Sorry if I did.
Adding an answer for this question. I had to put some hours figuring it out
In your client
Template.player.data = function(data){
if(type){
return Template[ 'player' ](data);
}
}
In your template
{{#each players}}
{{data this}}
{{/each}}
This will work seamlessly.
Here's how I solved this - not a perfect solution - by using the fact that Mongo typically creates indexes that increase in value.
Template.item.index = function() {
return Items.find().count() - Items.find({_id: {$lte: this._id}}).count() + 1
}
I then use this in the template like so:
{{index}}
Hope this helps!