Как я могу использовать AJAX JSON-ответ в AngularJS?

Question

Примечание Многие люди публикуют комментарии как ответы, но ни один из них не ответил на вопрос, заданный этим OP. Поэтому, пожалуйста, не считайте, что это ответили. Я отвечу на комментарии. Если пользователь делает комментарии, которые приводят к ответу, я буду ждать, пока этот пользователь опубликует ответ на основе их утвержденных комментариев, а затем я пометю этот ответ как принятый и +1. Таким образом, нет стимула спама пула ответов с догадками.

---

An AngularJS приложение должно получить объект JSON из службы REST вызывается из Спринг загрузки задней части. Как изменить приведенный ниже код, чтобы можно было проанализировать ответ в свойствах возвращаемого объекта JSON? Например, я хочу извлечь firstname, lastname и другие свойства объекта JSON после его возврата.

Вот контроллер AngularJS, который вызывает службу REST:

angular.module('confirm', []).controller('confirm', function($scope, $http, $routeParams) { 

    // set the default value 
    $scope.confirmStatus = "blank"; 

    $scope.$on('$viewContentLoaded', function() { 

     var str1 = "/confirm-email?d="; 
     var str2 = $routeParams.d; 
     var res = str1.concat(str2); 
     var fnm3 = "nothing"; 
     $http.post(res).then(function(response) { 
      fnm3 = response.data.firstname;//this line halts the program 
      //replacing with following line doesn't work. 
      //$scope.weblead = response.data; 
     }); 
     $scope.confirmStatus = "success"; 
     document.write(fnm3); 
    }); 
}); 

А вот метод Spring загрузки, который обеспечивает ответ JSON:

@RequestMapping(value = "/confirm-email", method = RequestMethod.POST) 
public @ResponseBody WebLead confirmEmail(HttpSession session, @RequestParam(value="d") String dval) { 
    WebLead dummy = new WebLead();dummy.setFirstname("justAtest"); 
    try{ 
     System.out.println("The Server Heard The registration form Request!"); 
     System.out.println("dval is: "+dval);  
     String sid = session.getId(); 
     System.out.println("session id is: "+sid); 
     try{ 
      List<WebLead> wleads = myrepo.findBySessionid(dval); 
      if(wleads.size()>0){//replace with better handling later 
       System.out.println("wleads.size is > 0 !"); 
       wleads.get(0).setEmailConfirmed("true"); 
       myrepo.save(wleads.get(0)); 
       return myrepo.findBySessionid(dval).get(0); 
      } 
      return dummy; 
     } catch(Exception e){return dummy;} 
    } catch(Exception e){return dummy;} 
}  

ПРИМЕЧАНИЕ: Мы знаем, что пост был обработан на сервере, поскольку журналы терминалов, начиная с SYSO в обработчике /confirm-email, являются:

The Server Heard The registration form Request! 
dval is: a1b2c3 
session id is: E1F844262F254E9B0525504723DBA490 
2016-01-07 12:11:49.773 DEBUG 7288 --- [nio-9000-exec-9] w.c.HttpSessionSecurityContextRepository : SecurityContext is empty or contents are anonymous - context will not be stored in HttpSession. 
2016-01-07 12:11:49.774 DEBUG 7288 --- [nio-9000-exec-9] tRepository$SaveToSessionResponseWrapper : Skip invoking on 
2016-01-07 12:11:49.774 DEBUG 7288 --- [nio-9000-exec-9] tRepository$SaveToSessionResponseWrapper : Skip invoking on 
2016-01-07 12:11:49.774 DEBUG 7288 --- [nio-9000-exec-9] o.s.s.w.a.ExceptionTranslationFilter  : Chain processed normally 
2016-01-07 12:11:49.774 DEBUG 7288 --- [nio-9000-exec-9] s.s.w.c.SecurityContextPersistenceFilter : SecurityContextHolder now cleared, as request processing completed 

Answer 1

Вы можете использовать JSON.parse(jsonData). Вот пример, который должен доставить вас туда.

$http.post(res).then(function(response) { 
    $scope.data = JSON.parse(response.data); 
    fnm3 = $scope.data.firstname; 
}); 

Кроме того, когда я работаю со службой REST у меня есть, я хотел поставить консольных журналы в функции при отладке, а затем я удалить их, прежде чем я закончу. Это дает вам простой способ увидеть, что служба вернула вам.

$http.post(res).then(function(response) { 
    console.log(response); 
}); 

Answer 2

Прежде всего, я бы не рекомендовал создавать собственные строки с параметрами при выполнении запросов с угловыми. Вы можете просто сделать что-то вроде этого:

$http({ 
    method: 'POST', 
    url: '/confirm-email', 
    headers: { 
     'Content-Type': 'application/json' 
    }, 
    params: { 
     d: $routeParams.d 
    } 
}).then(function(response) { 
    ... 
}); 

Во-вторых, если вы поставите заголовок типа содержимого, как выше «приложения/JSON», и если сервер поддерживает его, то угловую будет JSON.parse ваши данные автоматически и просто верните объект javascript вам как response.data.

И третья и последняя проблема заключается в том, что ваш контент никогда не отобразит данные в вашем коде, потому что вызов POST является асинхронным, но document.write содержимое переменной fnm3 сразу после запуска запроса.

У вас есть два варианта, чтобы исправить это:

1. (Быстрая, легкая, но плохо) сделать второй document.write ТЕЧЕНИЕ обратного вызова вашего пост-запроса

2. (правильный путь) Define ваше значение на угловом пространстве:

   $ scope.fnm3 = response.data.имя;

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

Firstname: {{ fnm3 }} 

Answer 3

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

App.service("metaService", function ($http,$cookies) { 

this.CallService = функция (глагол, SERVICENAME, Data) {

var Url = BaseURL + serviceName; 

    switch (verb) { 

     case "get": 
      { 
       return $http({ 
        method: verb, 
        url: Url 
        , headers: { 
         'Content-Type': 'application/json; charset=UTF-8', 
         'Accept': '*/*', 
        } 
       }); 
       break; 
      } 
     case "post": 
     case "put": 
     case "delete": 
      { 
       return $http({ 
        method: verb, 
        url: Url, 
        data: Data 
        , headers: { 
         'Content-Type': 'application/json; charset=UTF-8', 
         'Accept': '*/*', 
        } 
       }); 
       break; 
      } 
    } 
} 

});

, то вы можете вызвать метод callservice как так

var SearchData = metaService.CallService1(method, "meta/selectAll", searchedMeta); 
      SearchData.success(function (data) { 

$scope.Title = data.Title 

}