получить данные из папки json с помощью angularjs

Question

Привет, я пытаюсь сделать приложение angularjs, поэтому я получаю данные из папки json, но на дисплее отображается это ["adventure", "sci-fi"] как я могу удалить [ " "] из [" приключения", "научно-фантастического"]

это моя папка JSON

[ 
    { 
     "title": "Interstellar", 
     "genre": [ 
     "adventure", 
     "sci-fi" 
     ], 
     "watched": false 
    }, 
    { 
     "title": "Inception", 
     "genre": [ 
     "action", 
     "mystery", 
     "sci-fi" 
     ], 
     "watched": true 
    } 
] 

и это мой service.js

var app = angular.module('appMovies', []); 


app.service('moviesService', function($http,$q){ 

    var deferred =$q.defer(); 
    $http.get('movies.json').then(function (data) 
    { 
     deferred.resolve(data); 

     }); 

    this.getPlayers = function() 
    { 
     return deferred.promise; 
    } 
}) 

и это мой контроллер

app.controller('appcontrolles', function($scope,moviesService){ 
    var promise = moviesService.getPlayers(); 
    promise.then(function(data) 
{ 
    $scope.players =data.data; 
    console.log($scope.players); 
}); 
}) 

и это мой index.html

<table class="table table-striped"> 
     <thead> 

      <tr> 

       <th>title</th> 
       <th>genre</th> 
       <th>watched</th> 
      </tr> 

     </thead> 
     <tbody> 
      <tr ng-repeat="movie in players | filter : genre |filter: search.genre |filter : watched "> 

       <td>{{movie.title}}</td> 
       <td>{{movie.genre}}</td> 
       <td><input type="checkbox" name="vu", ng-model="movie.watched",value="true"></td> 
      </tr> 
     </tbody> 
    </table> 

спасибо за вашу помощь

Answer 1

Поскольку movie.genre является массивом, когда вы просто поставить {{movie.genre}}, угловые выводит значение как строка, представляющая массив: ["adventure","sci-fi"].

Если вы хотите просто разделенный запятыми список значений, вы можете использовать функцию .join() массива, чтобы создать строку с указать разделитель, как ", ", например, так:

<td>{{movie.genre.join(", ")}}</td> 

С другой стороны, если вы хотите более сложный DOM вокруг него, то вы могли бы ng-repeat над этим массивом:

<td><span ng-repeat="genre in movie.genre">{{genre}}</span></td> 

Off тема:

Вам не нужно использовать $q.defer с чем-то, что уже возвращает обещание, как $http - вы можете просто вернуть это обещание, и поэтому ваш сервис может быть упрощена:

app.service('moviesService', function($http){ 
    this.getPlayers = function() 
    { 
     return $http.get('movies.json'); 
    } 
}); 

$q.defer используется, когда вам пытаются конвертировать обезвреженную асинхронную функцию некоторого стороннего сервиса, например, который использует обработчики on-success и on-error.