2015-08-26 3 views
0

Я создал приложение, чтобы он мог читать данные файла JSON с помощью метода HTTP Get Get, но я не получаю результат в таблице, как ожидалось. Ниже приведен код:AngularJS не читает JSON правильно

HomeController

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace CategoryWebApplication.Controllers 
{ 
public class HomeController : Controller 
{ 
    // GET: Home 
    public ActionResult Index() 
    { 
     return View(); 
    } 
    } 
} 

The View: Index.cshtml

<html> 
<head> 
<title>Angular JS Includes</title> 
<style> 
    table, th, td { 
     border: 1px solid grey; 
     border-collapse: collapse; 
     padding: 5px; 
    } 

    table tr:nth-child(odd) { 
     background-color: #f2f2f2; 
     } 

    table tr:nth-child(even) { 
     background-color: #ffffff; 
     } 
</style> 
</head> 
<body> 
<h2>Sample Category Application</h2> 
<div ng-app="" ng-controller="categoryController"> 
    <table> 
     <tr> 
      <th>Category ID</th> 
      <th>Category Name</th> 
     </tr> 
     <tr ng-repeat="category in categories"> 
      <td>{{ category.CategoryID }}</td> 
      <td>{{ category.CategoryName }}</td> 
     </tr> 
    </table> 
</div> 
<script> 
    function categoryController($scope, $http) { 
     var url = "http://localhost:4425/Category.txt"; 
     $http.get(url).success(function (response) { 
      $scope.categories = response; 
     }); 
    } 
</script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"> </script> 
</body> 
</html> 

И JSON в категории текстового файла выглядит следующим образом: Категория .txt

[ 
{ 
"CategoryID" : 1, 
"CategoryName" : "Blood" 
}, 
{ 
"CategoryID" : 2, 
"CategoryName" : "Urine" 
}, 
{ 
"CategoryID" : 3, 
"CategoryName" : "Saliva" 
}, 
{ 
"CategoryID" : 4, 
"CategoryName" : "Serum" 
}, 
{ 
"CategoryID" : 5, 
"CategoryName" : "Hair" 
}, 
{ 
"CategoryID" : 6, 
"CategoryName" : "Nail" 
}, 
{ 
"CategoryID" : 7, 
"CategoryName" : "Tissue" 
} 

] 

Ниже результат я получаю в браузере

enter image description here

+0

Вы указали заголовок как 'Content-type: application/json'? – Joy

+0

@ Джой, нет, я этого не делал. Где я должен это указать? – Loic

+0

Можете ли вы зарегистрировать ответ и посмотреть, определено ли оно или нет? – Jax

ответ

2

расширение файла Изменения от txt к json (Category.json).

И измените свой javascript-код на это. Определить модуль и контроллер:

var app = angular.module("myApp"); 
app.controller("categoryController", function($scope,$http){ 
    var url = "http://localhost:4425/Category.json"; 
    $http.get(url).success(function (response) { 
    $scope.categories = response; 
    }); 
}) 

Markup:

<div ng-app="myApp" ng-controller="categoryController"> 

Здесь я сделал живой DEMO, так что вы можете увидеть, как это working.Plus вы должны пройти через documentation угловых контроллеров.

+0

@mudaseer, я изменил расширение файла, но тот же результат появляется. – Loic

+1

Вы также изменили свой http на «http: // localhost: 4425/Category.json»? – Jax

+1

@Loic как указано jax, проверьте, изменилось ли имя файла в вызове, и, пожалуйста, посмотрите, как определен контроллер и модуль. Я отредактировал ответ. –

Смежные вопросы