Crear tabla a partir de datos JSON con angularjs y ng-repeat

Si encuentras algún detalle que te causa duda puedes dejarlo en los comentarios y haremos todo lo posible de ayudarte lo más rápido posible.

Solución:

La solución que buscas está en el tutorial oficial de Angular. En este tutorial, los teléfonos se cargan desde un archivo JSON usando el servicio $http de Angulars. En el siguiente código usamos $http.get para cargar un archivo phones.json guardado en el directorio de teléfonos:

var phonecatApp = angular.module('phonecatApp', []);   
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) 
 $http.get('phones/phones.json').success(function(data) 
$scope.phones = data;
); 
$scope.orderProp = 'age';
);

Luego iteramos a través de los teléfonos:

  

    
i.name
$index
    

       
$index
       
e.foo
       
e.bar
  

Manera fácil de usar para crear un encabezado dinámico y una celda en una tabla normal:

 

  

   
header
  
 
 

  

   
cell
  
 


MyApp.controller('dataShow', function ($scope, $http) 
    //$scope.gridheader = ['Name','City','Country']
        $http.get('http://www.w3schools.com/website/Customers_MYSQL.php').success(function (data) 

                $scope.MyRecCollection = data;
        )

        );

Datos JSON:

[
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
, 
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
, 
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
, 
    "Name": "Ernst Handel",
    "City": "Graz",
    "Country": "Austria"
, 
    "Name": "FISSA Fabrica Inter. Salchichas S.A.",
    "City": "Madrid",
    "Country": "Spain"
, 
    "Name": "Galería del gastrónomo",
    "City": "Barcelona",
    "Country": "Spain"
, 
    "Name": "Island Trading",
    "City": "Cowes",
    "Country": "UK"
, 
    "Name": "Königlich Essen",
    "City": "Brandenburg",
    "Country": "Germany"
, 
    "Name": "Laughing Bacchus Wine Cellars",
    "City": "Vancouver",
    "Country": "Canada"
, 
    "Name": "Magazzini Alimentari Riuniti",
    "City": "Bergamo",
    "Country": "Italy"
, 
    "Name": "North/South",
    "City": "London",
    "Country": "UK"
, 
    "Name": "Paris spécialités",
    "City": "Paris",
    "Country": "France"
, 
    "Name": "Rattlesnake Canyon Grocery",
    "City": "Albuquerque",
    "Country": "USA"
, 
    "Name": "Simons bistro",
    "City": "København",
    "Country": "Denmark"
, 
    "Name": "The Big Cheese",
    "City": "Portland",
    "Country": "USA"
, 
    "Name": "Vaffeljernet",
    "City": "Århus",
    "Country": "Denmark"
, 
    "Name": "Wolski Zajazd",
    "City": "Warszawa",
    "Country": "Poland"
]

Para crear una tabla HTML usando JSON, usaremos ngRepeat directiva de AngularJS.

Ejemplo

HTML

x.Name
x.City
x.Country

JavaScript

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) 
    $scope.names = [
       "Name" : "Max Joe", "City" : "Lulea", "Country" : "Sweden" ,
       "Name" : "Manish", "City" : "Delhi", "Country" : "India" ,
       "Name" : "Koniglich", "City" : "Barcelona", "Country" : "Spain" ,
       "Name" : "Wolski", "City" : "Arhus", "Country" : "Denmark" 
    ];
);

En el ejemplo anterior, he creado una tabla a partir de json. He tomado referencia de http://www.tutsway.com/create-html-table-using-json-in-angular-js.php

Puedes añadir valor a nuestra información asistiendo con tu veteranía en las reseñas.

---

---

Utiliza Nuestro Buscador