Vue JS 2 table viewing complete objects instead of values - javascript

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.

Related

Multiple v-for to get values from Nested JSON array in Vue.js

I am fetching data from external API and populating Table to display the JSON Data. The JSON data has multiple nested arrays, actually the data is for "Orders".
So I am trying to get the Items of the order in a cell, for that I am using "v-if" but i could not archive this.
The results I am getting for the below code is each item of the order in separate column, but i am trying to view the items in one cell and other 'meta_data'
Below is JSON data structure
"line_items": [{
"name": "Salat",
"meta_data": [{
"id": 11500,
"key": "size",
"value": "full"
},
{
"id": 1150001,
"key": "Dressing",
"value": "green"
}
],
"price": 4.28571399999999957941554384888149797916412353515625
},
{
"name": "Chicken",
"meta_data": [{
"id": 115111112,
"key": "size",
"value": "Normal (7,00 €)"
},
{
"id": 1151111113,
"key": "Extra sauce",
"value": "Bbq(0,50 €)"
}
],
"price": 7.14285700000000023379698177450336515903472900390625
},
]
This is how I am creating the table
<table class="table table-bordered" id="table">
<thead>
<tr>
<th scope="col">Order Id</th>
<th scope="col">Name</th>
<th scope="col">Items</th>
</tr>
</thead>
<tbody>
<tr
v-for="(order, index) in orders"
:key="order.id"
:class="{highlight: !order.is_printed}"
>
<td>{{ order.id }}</td>
<td>{{ order.billing.first_name + " " +order.billing.last_name }}</td>
<!-- <td>{{ order.line_items[].name}} </td>-->
<td v-for="(items, index) in order.line_items">{{items.name}}</td>
</tr>
</tbody>
</table>
How can i archive this to get the names and meta data of the items of the order in one cell.
Suggestions will be great help.
Thank you
By having the v-for on the <td> element in the template it means you will have a <td> created for each item in your order.line_items array. To have all of these items render within a single <td> cell, you need to put the v-for inside the <td>. An unordered list (<ul>) may be an appropriate HTML element to use. For example:
<td>
<ul>
<li v-for="(items, index) in order.line_items">{{items.name}}</li>
</ul>
</td>
I have created a fiddle for your reference.

Is it possible to to generate multiple rows based on the column list by single ng-repeat?

I want to create 3 rows based on the columnList which contains 3 types of values i.e caption, shortCaption and columnName.
[{
caption : "First Name",
shortCaption: "FN",
columnName : "FIRST_NAME"
},{
caption : "Last Name",
shortCaption: "LN",
columnName : "LAST_NAME"
}
]
Currently i am generating table cell by iterating columnList with ng-repeat inside each row, here i am using ng-repeat three times which can be cause slowness, Is it possible to use ng-repeat only once at a time and generate all three rows, i also tried to use ng-repeat-start and ng-repeat-end but failed to get the output.
<tr>
<th ng-repeat="column in columnList">
{{column.caption}}
</th>
</tr>
<tr>
<th ng-repeat="column in columnList">
{{column.shortCaption}}
</th>
</tr>
<tr>
<th ng-repeat="column in columnList">
{{column.columnName}}
</th>
</tr>
http://plnkr.co/n0XKuwxOY8e1zjLfYwFI
template.html
<tr ng-repeat="column in columnList">
<td ng-repeat="key in getKeys()" ng-bind="::column[key]"></td>
</tr>
Controller.js
$scope.getKeys = function() {
return ['caption', 'shortCaption', 'columnName'];
}
This uses the ng-repeat twice. If you are sure about the keys of the objects in your column list, you can eliminate the 2nd ng-repeat - but the performance improvement will be negligible unless you have more than 500+ rows.

How convert angular object to JS object

I have a table, One column by expressing object with an angular ng-repeat in angular
<table class="table table-bordered table-hover table-condensed " ng-show="vm.CandidatesList">
<thead>
<tr>
<th sortable-header col="FirstName" style="text-align:center">{{::vm.resources.FirstName}}</th>
<th sortable-header col="LastName" style="text-align:center">{{::vm.resources.LastName}}</th>
<th sortable-header col="CandidateTopic" style="text-align:center">{{::vm.resources.CandidateTopic}}</th>
</tr>
</thead>
<tr ng-repeat="c in vm.CandidatesList "
row-id="{{ c.ID }}"
ng-dblclick="vm.goEdit(c.ID)">
<td ng-model="c.FirstName" style="text-align:center">{{c.FirstName}}</td>
<td ng-model="c.LastName" style="text-align:center">{{c.LastName}}</td>
<td style="text-align:center" name="TopicToCandidate" id="TopicToCandidate+{{c.ID}}"><a ng-repeat="t in vm.getTopicToCandidate(c.ID)">{{t.Name}}, </a></td>
</tr>
now I want to recive the value of the TopicToCandidateto js with
var topic= document.getElementById("TopicToCandidate+" + item.ID).innerText
but topic is null because js can not convert the angular object or HTML object to js object.
I'm not sure you understand what angularjs does in the background. Don't extract the information from the DOM if you already have it in your controller.
So in other words just use it like this:
app.controller('candidateController', function($scope) {
$scope.CandidatesList = [
{ID:1 , FirstName:"Dan1", LastName:"Doe1"},
{ID:2 , FirstName:"Dan2", LastName:"Doe2"},
{ID:3 , FirstName:"Dan3", LastName:"Doe3"}
];
//get topic of first candidate for example
var topic = $scope.getTopicToCandidate($scope.CandidatesList[0]);
}
You might want to check out 2 way binding in the angular docs.

Data Table hangs sporadically (No data available in table) when data sorted or loaded with Knockout binding

I am binding data to a table using Knockout JS and the JQuery/Bootstrap based; Data Table API. The table becomes unresponsive sporadically when sorted or loaded. There are no errors in the log.
It also shows 0 of 0 data as illustrated in the screenshot below:
I have seen similar errors/issues but could not get a solutions for them, E.g. This post:
Code:
function viewModel(){
var self = this;
self.Data = ko.observableArray([]);
$.getJSON('https://restcountries.eu/rest/v1/all', function(data){
self.Data(data);
});
}
ko.applyBindings(viewModel());
$(document).ready(function() {
$('#example').dataTable();
});
HTML:
<div class="table-responsive">
<table id="example" cellspacing="0"
class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</tfoot>
<tbody data-bind="foreach: Data">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: capital"></td>
<td data-bind="text: population"></td>
<td data-bind="text: region"></td>
</tr>
</tbody>
</table>
</div>
Here is a full working example (JSFiddle) utilizing a REST API so that the exact problem is accurately replicated:
I think the problem with your example may be with how you're dealing with your data when you get it back from the API call.
I've put together a quick example that achieves what I think you're trying to achieve and the sorting and searching work quickly for me.
When I get the JSON data back from the API, I use the Knockout arrayMap utility function to create an array of "Country" objects that have observable properties that I have mapped the JSON data to. I've bound the table to my observableArray of Country objects.
Initialising the data table in the same way you have works fine for me in this case.
The full working solution is here: http://plnkr.co/edit/eroIox6zqBFOVnf86Mdk?p=preview
script.js
var ViewModel = function(jsonData) {
var countries = ko.utils.arrayMap(jsonData, function(item) {
return new Country(item)
});
this.Countries = ko.observableArray(countries);
};
var Country = function(jsonItem) {
this.Name = ko.observable(jsonItem.name);
this.Capital = ko.observable(jsonItem.capital);
this.Population = ko.observable(jsonItem.population);
this.Region = ko.observable(jsonItem.region);
};
window.onload = function() {
$.getJSON('https://restcountries.eu/rest/v1/all', function(data) {
ko.applyBindings(new ViewModel(data));
$("#example").dataTable();
});
}
index.html
<table id="example" cellspacing="0" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</tfoot>
<tbody data-bind="foreach: Countries">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Capital"></td>
<td data-bind="text: Population"></td>
<td data-bind="text: Region"></td>
</tr>
</tbody>
</table>
Tables are fairly slow to render within Knockout, and if your table is based on a computed, I could see how you could have some issues with redrawing time. But that's not happening here.
Apart from loading the data and binding it to the table rows, there's no data manipulation going on in your viewmodel. All the data manipulation is done by the dataTable plug-in, which you initialize with a single jQuery call. Properly, that should be done within a binding handler. You also need to know what is going on within the plug-in when it sorts, filters, or whatever it does, because you may need to mediate those changes back to your observableArray within your binding handler.
Bottom line: you need a binding handler for the dataTable. There may be one already written; I haven't Googled for it. Give that a try.

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