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},
}]);
asked Sep 3, 2015 at 20:51
David Trinh
2891 gold badge5 silver badges17 bronze badges
2 Answers 2
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.
answered Sep 3, 2015 at 20:53
PSL
124k21 gold badges257 silver badges243 bronze badges
Sign up to request clarification or add additional context in comments.
3 Comments
Cristian Lupascu
also, the JS code had some unmatched parens/brackets. Here it is fixed: jsbin.com/xuriguxuwo/1/edit?html,js,output
PSL
@w0lf Thx.. missed that.
David Trinh
Thank you guys so much. It definitely worked, sorry for the newb mistake.
try country["1960"]. i think this is the way
answered Sep 3, 2015 at 20:54
subash
3,1253 gold badges20 silver badges22 bronze badges
Comments
lang-js