Display object inside of array inside Angular - javascript
I'm trying to display the object name of a the suppliers array but i'm confused because its inside an array. I'm display the array and also i want to display the object name of the second array. But the problem is on the second array. The supplier.name is i want to display it. The pic is below
[PICTURE IS HERE][1]
ts
getAllMaterials() {
this.subscription = this.materialsService.getAll()
.subscribe(
(data:any) => {
this.materials = data.materials;
let suppliers = data.materials[0].suppliers;
console.log(data);
console.log(suppliers);
},
error => {
alert("Error");
console.log(error);
});
}
html
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>display on this td</td>
<td>{{ material.price }}</td>
<td>
</tr>
So you can do two things :
Solution 1 : If you have only single record in suppliers
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>{{material.suppliers[0].name}}</td>
<td>{{ material.price }}</td>
<td>
</tr>
Solution 2 :
If you want to show multiple names in same td :
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td><span *ngFor ="let s of material.suppliers"> {{s.name}}
</span>
</td>
<td>{{ material.price }}</td>
<td>
</tr>
Related
Vue.js v-for Index
Just new to use Vue.js and I have a question:
I have a array to build a table. If I double click the table row, the program will call a javascript function to get the selected item by its index.
<div id="vm-table">
<table>
<tr v-for="(item, index) in items" ondblclick="getItem('{{ index }}')">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: "#vm-table",
data: {
items: []
}
});
</script>
I assume the array "items" already contains a list of items. In the above "tr" line it seems cannot get the "index" value and the value must be used in the inner "td" elements. If I need to get the parameter of index how can I do?
Thanks,
Try this instead :
<tr v-for="(item, index) in items" #dblclick="getItem(index)">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
Replace table row with JQuery
I encountered an error in replacing my row in my JQuery. This is my code snippet for my JQuery:
var newtr = '<td>'+data.row.createdDate+'</td>'+
'<td>'+data.row.emergencyOrderID+'</td>'+
'<td>'+data.row.firstName+' '+data.row.lastName+'</td>'+
'<td>('+data.row.latitude+','+data.row.longitude+')</td>'+
'<td>'+data.row.pickupLocation+'</td>'+
'<td>'+data.row.hospitalName+'</td>'+
'<td>'+data.row.driverName+'</td>'+
'<td>'+data.row.emergencyStatus+'</td>';
//$('#tbIDOrder-'+data.row.emergencyOrderID).html('test');
//alert('#tbIDOrder-'+data.row.emergencyOrderID);
$('#tbIDOrder-'+data.row.emergencyOrderID).parent().replaceWith(newtr);
and this is my row:
<tr id="tbIDOrder-{{$o->EmergencyOrderID}}">
<td>{{ $o->CreatedDate }}</td>
<td>{{ $o->EmergencyOrderID }}</td>
<td>{{ $o->FirstName }} {{ $o->LastName }}</td>
<td>({{ $o->Latitude }}), ({{ $o->Longitude }})</td>
<td>{{ $o->PickupLocation }}</td>
<td>{{ $o->HospitalName}}</td>
<td>{{ $o->DriverName}}</td>
<td>{{ $o->EmergencyStatus }}</td>
</tr>
am i missing something? If it helps, im running this code with Pusher in Laravel :) thanks for your time.
EDIT:
I replaced the script to:
$('#tbIDOrder-'+data.row.emergencyOrderID).html(newtr);
but it still didnt work
As $('#tbIDOrder-'+data.row.emergencyOrderID) refers to TR, You can directly use .html(htmlString) to update the content.
$('#tbIDOrder-'+data.row.emergencyOrderID).html(newtr);
Here is an example
$('#tbIDOrder-1').html('<td>New Date</td>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tbIDOrder-1">
<td>CreatedDate</td>
</tr>
</table>
Creating Table in Angular JS, Data Doesn't Show
I am trying to create a simple table but can't seem to get the data to show. When I use {{ country.name }} the data shows, but when I try to add {{ country.1960 }} the whole table turns blank. Please let me know what I might be doing wrong. Any help is greatly appreciated.
Here is the HTML:
<body ng-app="myApp">
<h1>Country Population</h1>
<div ng-controller="oneController" >
<table>
<tr>
<th>Name</th>
<th>1960 Pop.</th>
<th>1970 Pop.</th>
<th>1980 Pop.</th>
<th>1990 Pop.</th>
<th>2000 Pop.</th>
</tr>
<tr ng-repeat="country in countries">
<td>{{ country.name }}</td>
<td>{{ country.1960 }}</td>
<td>{{ country.1970 }}</td>
<td>{{ country.1980 }}</td>
<td>{{ country.1990 }}</td>
<td>{{ country.2000 }}</td>
</tr>
</table>
</div>
</body>
Here is a sample of the script:
angular.module('myApp', [])
.controller('oneController', ['$scope', function($scope) {
$scope.countries = [{"name":"Aruba","code":"ABW","1960":54208,"1961":55435,"1962":56226,"1963":56697,"1964":57029,"1965":57360,"1966":57712,"1967":58049,"1968":58385,"1969":58724,"1970":59065,"1971":59438,"1972":59849,"1973":60239,"1974":60525,"1975":60655,"1976":60589,"1977":60366,"1978":60106,"1979":59978,"1980":60096,"1981":60567,"1982":61344,"1983":62204,"1984":62831,"1985":63028,"1986":62644,"1987":61835,"1988":61077,"1989":61032,"1990":62148,"1991":64623,"1992":68235,"1993":72498,"1994":76700,"1995":80326,"1996":83195,"1997":85447,"1998":87276,"1999":89004,"2000":90858,"2001":92894,"2002":94995,"2003":97015,"2004":98742,"2005":100031,"2006":100830,"2007":101219,"2008":101344,"2009":101418,"2010":101597,"2011":101932,"2012":102384},
{"name":"Andorra","code":"AND","1960":13414,"1961":14376,"1962":15376,"1963":16410,"1964":17470,"1965":18551,"1966":19646,"1967":20755,"1968":21888,"1969":23061,"1970":24279,"1971":25560,"1972":26892,"1973":28231,"1974":29514,"1975":30706,"1976":31781,"1977":32769,"1978":33746,"1979":34819,"1980":36063,"1981":37502,"1982":39112,"1983":40862,"1984":42704,"1985":44597,"1986":46515,"1987":48458,"1988":50431,"1989":52449,"1990":54511,"1991":56674,"1992":58904,"1993":61003,"1994":62707,"1995":63854,"1996":64274,"1997":64090,"1998":63799,"1999":64084,"2000":65399,"2001":68000,"2002":71639,"2003":75643,"2004":79060,"2005":81223,"2006":81877,"2007":81292,"2008":79969,"2009":78659,"2010":77907,"2011":77865,"2012":78360},
{"name":"Afghanistan","code":"AFG","1960":8774440,"1961":8953544,"1962":9141783,"1963":9339507,"1964":9547131,"1965":9765015,"1966":9990125,"1967":10221902,"1968":10465770,"1969":10729191,"1970":11015621,"1971":11323446,"1972":11644377,"1973":11966352,"1974":12273589,"1975":12551790,"1976":12806810,"1977":13034460,"1978":13199597,"1979":13257128,"1980":13180431,"1981":12963788,"1982":12634494,"1983":12241928,"1984":11854205,"1985":11528977,"1986":11262439,"1987":11063107,"1988":11013345,"1989":11215323,"1990":11731193,"1991":12612043,"1992":13811876,"1993":15175325,"1994":16485018,"1995":17586073,"1996":18415307,"1997":19021226,"1998":19496836,"1999":19987071,"2000":20595360,"2001":21347782,"2002":22202806,"2003":23116142,"2004":24018682,"2005":24860855,"2006":25631282,"2007":26349243,"2008":27032197,"2009":27708187,"2010":28397812,"2011":29105480,"2012":29824536},
{"name":"Angola","code":"AGO","1960":4965988,"1961":5056688,"1962":5150076,"1963":5245015,"1964":5339893,"1965":5433841,"1966":5526653,"1967":5619643,"1968":5715372,"1969":5817283,"1970":5928087,"1971":6049214,"1972":6180863,"1973":6323057,"1974":6475333,"1975":6637628,"1976":6808733,"1977":6989550,"1978":7184444,"1979":7399204,"1980":7637141,"1981":7901870,"1982":8190093,"1983":8489864,"1984":8784753,"1985":9063646,"1986":9320678,"1987":9561022,"1988":9798055,"1989":10051133,"1990":10333844,"1991":10652727,"1992":11002758,"1993":11372156,"1994":11743432,"1995":12104952,"1996":12451945,"1997":12791388,"1998":13137542,"1999":13510616,"2000":13924930,"2001":14385283,"2002":14886574,"2003":15421075,"2004":15976715,"2005":16544376,"2006":17122409,"2007":17712824,"2008":18314441,"2009":18926650,"2010":19549124,"2011":20180490,"2012":20820525},
{"name":"Albania","code":"ALB","1960":1618829,"1961":1668531,"1962":1719181,"1963":1770530,"1964":1822299,"1965":1874302,"1966":1926382,"1967":1978582,"1968":2031167,"1969":2084532,"1970":2138966,"1971":2194588,"1972":2251320,"1973":2309029,"1974":2367499,"1975":2426592,"1976":2486256,"1977":2546617,"1978":2607936,"1979":2670572,"1980":2734776,"1981":2799345,"1982":2863902,"1983":2930351,"1984":3001325,"1985":3077930,"1986":3162225,"1987":3251512,"1988":3336434,"1989":3404408,"1990":3446882,"1991":3459763,"1992":3446858,"1993":3417280,"1994":3384367,"1995":3357858,"1996":3341043,"1997":3331317,"1998":3325456,"1999":3317941,"2000":3304948,"2001":3286084,"2002":3263596,"2003":3239385,"2004":3216197,"2005":3196130,"2006":3179573,"2007":3166222,"2008":3156608,"2009":3151185,"2010":3150143,"2011":3153883,"2012":3162083},
{"name":"Arab World","code":"ARB","1960":93485943,"1961":96058179,"1962":98728995,"1963":101496308,"1964":104359772,"1965":107318159,"1966":110379639,"1967":113543760,"1968":116787194,"1969":120078092,"1970":123400916,"1971":126726106,"1972":130095625,"1973":133592409,"1974":137327448,"1975":141376124,"1976":145768518,"1977":150474227,"1978":155422735,"1979":160508834,"1980":165653287,"1981":170835489,"1982":176068130,"1983":181346070,"1984":186631963,"1985":192047001,"1986":197522280,"1987":202985205,"1988":208460437,"1989":213911862,"1990":221488293,"1991":227470711,"1992":231443007,"1993":237418436,"1994":243271554,"1995":250504422,"1996":255932514,"1997":261260242,"1998":266537558,"1999":271912978,"2000":277561423,"2001":283493089,"2002":289680968,"2003":296095945,"2004":302824676,"2005":309824383,"2006":317125787,"2007":324693498,"2008":332424892,"2009":340149038,"2010":347737036,"2011":355137048,"2012":362466629},
{"name":"United Arab Emirates","code":"ARE","1960":89608,"1961":97727,"1962":108774,"1963":121574,"1964":134411,"1965":146341,"1966":156890,"1967":167360,"1968":180762,"1969":201157,"1970":231529,"1971":272211,"1972":322439,"1973":382599,"1974":452848,"1975":532742,"1976":623450,"1977":723617,"1978":827191,"1979":926112,"1980":1014825,"1981":1090660,"1982":1155765,"1983":1215380,"1984":1277300,"1985":1347218,"1986":1426915,"1987":1514798,"1988":1609170,"1989":1707085,"1990":1806498,"1991":1908002,"1992":2012977,"1993":2121143,"1994":2232159,"1995":2346305,"1996":2470810,"1997":2608993,"1998":2753498,"1999":2893648,"2000":3026352,"2001":3132104,"2002":3223969,"2003":3369254,"2004":3658658,"2005":4148883,"2006":4875639,"2007":5797347,"2008":6798635,"2009":7718319,"2010":8441537,"2011":8925096,"2012":9205651},
{"name":"Argentina","code":"ARG","1960":20623998,"1961":20959241,"1962":21295290,"1963":21630854,"1964":21963952,"1965":22293817,"1966":22618887,"1967":22941477,"1968":23269302,"1969":23612675,"1970":23978532,"1971":24370660,"1972":24785830,"1973":25215328,"1974":25646533,"1975":26070443,"1976":26483835,"1977":26889764,"1978":27293093,"1979":27701412,"1980":28120135,"1981":28550123,"1982":28989069,"1983":29435404,"1984":29886564,"1985":30340419,"1986":30796481,"1987":31254574,"1988":31713147,"1989":32170407,"1990":32624874,"1991":33075194,"1992":33520803,"1993":33961947,"1994":34399343,"1995":34833168,"1996":35264070,"1997":35690778,"1998":36109342,"1999":36514558,"2000":36903067,"2001":37273361,"2002":37627545,"2003":37970411,"2004":38308779,"2005":38647854,"2006":38988923,"2007":39331357,"2008":39676083,"2009":40023641,"2010":40374224,"2011":40728738,"2012":41086927},
}]);
You need to use bracket notation for accessing numeric property name values (which is invalid identifier) and not dot notation. i.e
<td>{{ country.name }}</td>
<td>{{ country[1960] }}</td>
<td>{{ country[1970] }}</td>
<td>{{ country[1980] }}</td>
<td>{{ country[1990] }}</td>
<td>{{ country[2000] }}</td>
dot notation - property must be a valid JavaScript identifier, i.e. a sequence of alphanumerical characters, also including the underscore ("_") and dollar sign ("$"), that cannot start with a number.
try country["1960"]. i think this is the way
angularJs : how to load table data after clicking a button?
Hello Everyone im sorry if my question is being so long this is my first question in Stack over flow :) ; i'm new to angularJs so im facing this problem
i was trying to make a a button that load json data that i retrieve by http.get function to a table with ng-repeat
and i wanted to make the data be loaded after i click a button
Angular:
app.controller('dayRecord', function ($scope, $http) {
var date = dateToString("dailyData")
,http;
$scope.headers = ["company", "ticker", "ccy", "last", "close", "chg", "bid", "ask", "trades", "volume", "turnover"];
//LoadDate : function to load StockRecords for a given day
$scope.loadData = function () {
http = "http://localhost:63342/nasdak/app/data?date=";//the REST service Server to fetch the day stock recrod json data
http += date; //
$http.get(http)
.success(function (response) {
console.log(response);
$scope.first = response.balticMainList;
$scope.columnSort = {sortColumn: 'turnover', reverse: true};
});
}
$scope.loadData();
});
as you see here there is :
dayRecord Controller
loadData function that gets the json data
and here is the html code for the table im trying to load
HTML
<div ng-controller="dayRecord" style="display: inline;">
<label for="dailyData">Show Stock For Day :</label>
<input type="text" id="dailyData" name="dailyData" >
<button id = "dailyStocksLoad" ng-click="loadData()">load</button>
</div>
<div class ="dailyViewContainer" ng-controller="dayRecord">
<div >
<h1>Baltic Main List</h1>
<table id ="myTable" >
<thead>
<tr >
<th ng-repeat="header in headers " ng-click="columnSort.sortColumn=header;columnSort.reverse=!columnSort.reverse">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in first | orderBy:columnSort.sortColumn:columnSort.reverse">
<td style="text-align: left">{{ x.company }}</td>
<td>{{ x.ticker }}</td>
<td>{{ x.ccy }}</td>
<td>{{ x.last }}</td>
<td>{{ x.close }}</td>
<td>{{ x.chg }}% </td>
<td>{{ x.bid }}</td>
<td>{{ x.ask }}</td>
<td>{{ x.trades }}</td>
<td>{{ x.volume }}</td>
<td>{{ x.turnover }}</td>
</tr>
</tbody>
</table>
</div>
when i call the function inside the controller everything works fine
app.controller('dayRecord', function ($scope, $http) {
...
$scope.loadData = function () {
...
}
$scope.loadData();
});
but when i click the button to load the data dynamically i cannot load it i even checked the response with console.log(response) it shows that http.get is retrieving the data but it's not refreshing it on the table
Hmm maybe the issue is that you are assigning 2 pieces of html to the same controller. What about wrapping the whole html into 1 div element and put ng-controller there like below:
<div ng-controller="dayRecord">
<div style="display: inline;">
<label for="dailyData">Show Stock For Day :</label>
<input type="text" id="dailyData" name="dailyData" >
<button id = "dailyStocksLoad" ng-click="loadData()">load</button>
</div>
<div class ="dailyViewContainer">
<div >
<h1>Baltic Main List</h1>
<table id ="myTable" >
<thead>
<tr >
<th ng-repeat="header in headers " ng-click="columnSort.sortColumn=header;columnSort.reverse=!columnSort.reverse">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in first | orderBy:columnSort.sortColumn:columnSort.reverse">
<td style="text-align: left">{{ x.company }}</td>
<td>{{ x.ticker }}</td>
<td>{{ x.ccy }}</td>
<td>{{ x.last }}</td>
<td>{{ x.close }}</td>
<td>{{ x.chg }}% </td>
<td>{{ x.bid }}</td>
<td>{{ x.ask }}</td>
<td>{{ x.trades }}</td>
<td>{{ x.volume }}</td>
<td>{{ x.turnover }}</td>
</tr>
</tbody>
</table>
</div>
</div>
Angular might need some help in changing the DOM. Try to add $scope.$apply() to the end of your load data function and see what happens on the console.
How I pass an object as a parameter in a ng-click within a ng-repeat? AngularJS
How I pass an object as a parameter in a ng-click within a ng-repeat?
Example:
<tr data-ng-repeat="table in tables">
<td>{{ table.name }}</td>
<td>{{ isActive(table.active) }}</td>
<td>{{ table.initialDate }}</td>
<td>{{ table.finalDate }}</td>
<td>
<button data-ng-click="updateTable(table)">Update</button>
</td>
</tr>
Inside the ng-click updateTable(HERE), I want to pass my object table.
Can someone help me?
In your component.html edit your code as shown below :
<td><button (click)=updateTable(table)>Update</button></td></tr>
then in your typescript code just declare the function
updateTable(table){
console.log(table); //write your own code here!.
}