Динамическая маршрутизация с Angular - как работать с этим JSON?

Question

Динамическая маршрутизация с Angular - как работать с этим JSON?

0

В настоящее время я пытаюсь использовать JSON из API с помощью метода Angular http. Я могу получить данные в порядке, однако я не могу настроить таргетинг на конкретный идентификатор, чтобы быть ясным, что я хотел бы сделать, это сказать /#/work/1 и /#/work/2 и иметь возможность использовать данные относящихся к этому ID. Я рассмотрел использование $ routeParams, чтобы сделать это, но я только получил до сих пор.

Мой JSON выглядит так:

[
 {
  "id": 1,
  "title": "New post",
  "body": "oh yeah"
 },
 {
  "id": 2,
  "title": "another one",
  "body": "test test test",
 }
]

и я пытаюсь динамически маршрутизировать каждый идентификатор, настроенный в моем конфигурационном приложении так:

myApp.config(function($routeProvider){
  $routeProvider.
  when('/',{
    templateUrl: 'partials/home',
    controller: 'mainController'
  }).
  when('/work/:id', {
    templateUrl: 'partials/project',
    controller: 'postController'
  })
});

Это похоже на мое мнение, так как я использую ng-repeat. Все данные для этого представления успешно печатаются - он проходит через мой JSON fine

<div class = "images" ng-repeat = 'data in projects">
   <a href = "#/work/{{ data.id }}">
     <p> {{ data.title }} </p>
   </a>
</div>

и мой контроллер настроен таким образом, так как вы можете видеть, что я вызываю функцию, определенную на моей фабрике, чтобы сделать http-запрос здесь:

var postController = angular.module('postControllers', []);

postControllers.controller('projectController', ['$scope', '$routeParams', 'workPost',
  function($scope, $routeParams, workPost) {
   $scope.projectID = $routeParams.id;
   workPost.getData().success(function(data){
   $scope.data = data;
  });
}]);

поэтому моя фабрика настроена так:

var workServices = angular.module('workServices', ['ngResource']);

projectServices.factory('workPost', function($http) {
  return {
    getData: function() {
      return $http({
      url: 'somelink/todata.json',
      method: 'GET'
      })
    }
  }
});

и, наконец, я пытаюсь получить доступ к данным, связанным с ID в моем представлении, следующим образом:

<p> {{ data.body }} </p>

Это не работает, но повторяя его или указывая, какой элемент в массиве я хочу (например, данные [1].title)

Нажатие на href правильно меня направляет на #/work/id, поэтому моя конфигурация в порядке. Я просто не знаю, как получить соответствующие данные (т.е. Название, тело), связанное только с этим идентификатором? Я думал, что это может быть способ, которым мой JSON структурирован, возможно, мне нужно вложить параметры под объект для каждого?

Спасибо, что посмотрели.

biscuit_ 23 янв. 2016, в 22:57

Теги:

json

http

2 ответа

1

Ваша проблема в том, что вы работаете только с одной конечной точкой, которая представляет собой файл статических ресурсов, в котором есть все данные.

Вам нужно перебрать эти данные и отфильтровать $routeParams вам, сопоставляя свойства в массиве объектов с параметром $routeParams.

Когда вы найдете совпадение, присвойте его области действия

charlietfl 23 янв. 2016, в 19:59

Ещё вопросы

Prashant · Accepted Answer · 2016-01-23T18-47-00.000Z

Когда вы делаете $scope.data = data; , вы устанавливаете весь массив объектов в переменную данных области.

То, что вы хотите сделать, - найти объект с идентификатором, соответствующим идентификатору параметра маршрута из массива, и установить этот объект как данные области. Вы можете использовать Array.prototype.find(), чтобы сделать именно это.

workPost.getData().success(function(data){
    $scope.data = data.find(function (element) {
        return element.id === $scope.projectID;
    });
});

Хорошо, я думал, что мне придется каким-то образом пройтись, но это действительно чистый способ, спасибо!