dynamic handlebar table creation - javascript

i cant dynamically create table using handlethe bars. "arrays" is an array of objects (each object has id, name, description, and category).
I dont know why the code below worked for li element insertion but not for table. Can some one help?
let arrays = [{ id: 0, name: "name0", description: "this is is name0","category":1} ,{ id: 1, name: "name1", description: "this is is name1","category":2},...]
let template =Handlebars.compile($('#template1').html())
let html = template({arrays: arrays})
$('#div1').append(html)
<template id="template1">
<table>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>description</th>
</tr>
</thead>
<tbody>
{{#each arrays}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{desciption}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
the expectation is a table with just id name and description but not category

you're trying to insert a template after having processed the compiling. Your template won't work except for the parts that are not related to handlebars. If you want to process the template once you've done the insert in your HTML file then try to do your template compiling after the append and not before.
Usually I use jquery $(document).ready(...) to do such delaying.

Related

ng-repeat issue with JSON Object

So I'm trying to print the keys and values of a simple JSON object inside an HTML table with ng-repeat but not able to print it on the html page. The JSON object has been received from the backend and am trying to populate that in the frontend. I understand that I am doing a silly mistake somewhere but can't understand where.
JSON Object
json_data ={
user1 : "matt",
user2 : "kim",
user3 : "Tim"
}
$scope.rows = json_data;
HTML code..
<table ng-if="displayTable">
<caption>Results</caption>
<tr>
<th>Username</th>
<th>Name</th>
</tr>
<tr ng-repeat="(key, value) in rows">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
</tr>
</table>
Can't understand what silly mistake I am doing here.
Try {{rows.key}} and {{rows.value}}. Although I don't thing this is the answer. Give it a try..
Alternative ly you can try to see if it works with just one , either key or value...
First at all, the (key, value) is more well represented by (index, value).
A correct version of this piece of code will output this:
0 {"user1":"matt","user2":"kim","user3":"Tim"}
which 0 is the first index of an array and the json is the entire value.
So, i guess you are using a bad approach.
Try to modify your array to something like that:
$scope.rows = [
{key: 'user1', user: 'matt'},
{key: 'user1', user: 'kim'},
{key: 'user1', user: 'Tim'},
];
And modify your HTML to:
<table ng-if="displayTable">
<caption>Results</caption>
<tr>
<th>Username</th>
<th>Name</th>
</tr>
<tr ng-repeat="row in rows">
<td> {{row.key}} </td> <td> {{ row.user }} </td>
</tr>
</tr>
</table>

Vue JS 2 table viewing complete objects instead of values

I'm still pretty new to Vue JS 2. I am building a dynamic table, where the number of columns (and column titles) will fluctuate depending on the array that's assigned to it. This would mean I can't do something like this
<td>{{assignments.name}}</td>
<td>{{assignments.id}}</td>
<td>{{assignments.location}}</td>
because the data will change and not always match up accordingly. I'm pulling from hard-coded JSON until I have my API set up:
[
{
"Name": "Jennison",
"ID": 879456,
"Location": "Carotsville"
},
{
"Name": "Cordan",
"ID": 547932,
"Location": "Paperville"
},
{
"Name": "Sir Mac",
"ID": 423971,
"Location": "Hammerville"
},
{
"Name": "Pat",
"ID": 984123,
"Location": "Isenville"
}
]
Below is the markup that I'm struggling with. Instead of grabbing each of the values, it's grabbing each of the objects. What would I need to do to have it grab the values instead, in order to properly populate the table?
<table class="table table-striped table-bordered table-sm table-hover">
<thead>
<tr>
<th v-for="(value, key) in assignmentsHardcoded[0]" v-bind:key="value">{{key}}</th>
</tr>
</thead>
<tbody>
<tr>
<td v-for="assignments in assignmentsHardcoded" v-bind:key="assignments.id">{{ assignments }}</td>
</tr>
</tbody>
</table>
This is the outcome:
What would I need to do to have it grab the values instead, in order to properly populate the table?
This should do the trick:
<table class="table table-striped table-bordered table-sm table-hover">
<thead>
<tr>
<th
v-if="assignmentsHardcoded.length"
v-for="(value, key) in assignmentsHardcoded.find(a=>true)"
:key="value">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(assignment, i) in assignmentsHardcoded" :key="'a-'+i">
<td v-for="attr in assignment">{{ attr }}</td>
</tr>
</tbody>
</table>
The problem you were having is that you were looping through on a td which would only work if you expected all the data to be displayed on a single row.
Considering that is usually not the case, it makes sense to lift the v-for up to the <tr> tag so we can use it in our v-for on our <td>'s since the attributes can differ and we don't want stuck in a place where we are hard-coding the data structure.

Using nested ng-repeat with object arrays angular

Here is what I am trying to do:
<tr ng-repeat = "data in tabularData track by $index" >
<td ng-repeat ="(key,value) in usedAttributes" >{{data[key]}}</td>
</tr>
This DID work when the tabular Data was structured like this:
[3920F0-3434D3-ADF-3SDF:[{CreatedBy: "John Doe", CreatedDate: "10-20-2016"}]
However when I flattened it out, it looks more like this:
[{CreatedBy: "John Doe", CreatedDate: "10-20-2016",PrimaryID:"3920F0-3434D3-ADF-3SDF"}]
This does not work. I feel like I'm missing something very obvious.
usedAttributes is just a simple object array containing attributes (column data). The idea is that the user can choose the attributes they want to get so the data table is very dynamic. For this example, the usedAttributes may look like this:
["CreatedBy": [{Checked:false}],"CreatedDate":[{Checked:true}]]
Thus the user wants to see these two attributes although more exists.
You can do this,
<div ng-controller="listController">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, value) in tabularData[0]">{{key | uppercase }}
</th>
</tr>
<tbody>
<tr ng-repeat="val in tabularData">
<td ng-repeat="cell in val">
<input type="text" ng-model="cell">
</td>
</tr>
</tbody>
</table>
</div>
DEMO

Loop through array in array with Angular

Working on a TODO-app to learn Angular. I have this hardcoded array as a "database" and i want to display the tasks in the view.
var taskLists = [
{name: 'Todays todo', id: '1', tasks:['Make coffe', 'another task']},
{name: 'Tomorrow i will do this', id: '2', tasks:['Code well', 'go to bed']}
];
So how do i iterate through an array inside an array in an angular-view?
I tried to have two ng-repeats but cant get it to work right. I want to display the tasks one by one as <td>, not just the whole tasks array as one <td> as it does right now ['Make coffe', 'another task']
This is what the view looks like.
<h2 ng-repeat="object in list">{{object.name}}</h2>
<table>
<thead>
<tr>Tasks</tr>
</thead>
<tr>
<td ng-repeat="task in list">{{task.tasks}}</td>
</tr>
</table>
You have a problem in your logic.
Fist your HTML tag from child must be inside the parent.
<div class="parent" ng-repeat="object in list">
<h2>{{object.name}}</h2>
<table>
<thead>
<tr>Tasks</tr>
</thead>
<tr ng-repeat="task in object.tasks">
<td>{{item}}</td>
</tr>
</table>
</div>
Try this and check if it works.

Relationship trouble - Mongo collections and MeteorJS

I am using Meteor, and trying to have one mongo collection that will contain products, and one that contains users.
Products have prices, but I also gave one product(as a test for now) a "dealerPrices" subcollection that contains an object like this:
"partprice" : "98",
"dealerPrices" : {
"YH" : "120",
"AB" : "125"
},
My hope is to have a table on my site with a column that displays the 'partprice' and next to it another column that shows the price for the current logged in dealer.
I could do a completely seperate collection for dealerPrices, but I am not sure which way is more efficient since I am new to Mongo.
My issue is targeting that number in the field with the "YH" or "AB" depending on the logged in user, the Users collection has a subcollection called "profile" that has a field called "code" that will match that "YH" or "AB" which is a unique code for each dealer.
I am using handlebars to display the data in Meteor, here is a bit of the html for displaying the table rows.
Larger code section:
<template name="products">
<h2> All Products <span class="productCount"></span></h2>
<table class="table table-condensed table-striped table-hover table-bordered">
<thead>
<tr>
<th class="toHide">Unique ID</th>
<th>Print</th>
<th>Product</th>
<th>FF Code</th>
<th>Base Price</th>
<th>My Price</th>
</tr>
</thead>
{{> AllProducts}}
</template>
<template name='AllProducts'>
{{#each row}}
<tr class='productRow'>
<td class="product-id toHide">{{_id}}</td>
<td class="print"><input type="checkbox" class="chkPrint"/></td>
<td class="product-name">{{partname}}</td>
<td class="product-code">{{code}}</td>
<td class="product-az-price">${{partprice}}</td>
<td class="product-dealer-price">${{dealerPrices.YH}}</td>
</tr>
{{/each}}
</template>
I hope I am explaining this correctly, basically I am trying to find some alternative to joins and having a table for products, a table for the dealer-product-dealerPrice relationship and a user accounts table in a relational database.
You probably want to do this in a Template helper. First, create a template for each loop-through, instead of just using {{#each}}:
<template name="fooRow">
... table rows
<td class="product-dealer-price">{{userBasedThing}}</td>
</template>
Then, add a Template helper for this new fooRow template:
Template.fooRow.userBasedThing = function () {
var result = "";
if (Meteor.userId() && this.dealerPrices)
result = this.dealerPrices[Meteor.user().profile[0].code];
return result;
}
Then just get rid of the stuff in the each loop, and replace it with:
{{#each row}}
{{> fooRow}}
{{/each}}
That should do it!

Categories