Angular JS - How to get spring returned map value inside angular controller?

Question

I am new to angular, can anyone tell me how to retrieve spring returned map value inside angular's controller? Here is my code snippet:

app.js

   // Service -----------------------------------------------------------------
myApp.service('FolderService', function ($log, $resource, $http) {
    return {
        onlineView: function(docId) {
            var viwerResource = $resource('processOnlineView', {}, {
                get: {method: 'POST', params: {'docId' : docId}}
            });
            return viwerResource.get();
        }       
    }
})

// Controller -----------------------------------------------------------------
.controller('FolderController', function ($scope, $log, FolderService) {        
    //click online view         
    $scope.view = function(doc) { 
        var rtnMap = FolderService.onlineView(doc.cmObjectId);
        console.log('rtnMap: ' + rtnMap );  
        // it shows rtnMap: [object Object]
        var key = 'response'; 
        var value = rtnMap[key];
        console.log('value: ' + value ); 
       // I want to get map value, but it shows undefined
       // I except get "d:/tomcat/bin/hello.swf" here
        $scope.rtnFileName = rtnMap;
    }        
});

my spring controller java code

@RequestMapping(value = "/processOnlineView", method = RequestMethod.POST)
public @ResponseBody Map<String, String> processOnlineView(@RequestParam(value = "docId") String docId) {
    String resultDocName = "";
    try {
        // get File by docId
        File file = queryFile(docId);    

       // set resultDocName value
        resultDocName = file.getAbsolutePath(); // real file path, like: d:/tomcat/bin/hello.swf
    } catch (Exception e) {
        e.printStackTrace();
        }
    return Collections.singletonMap("response", resultDocName);
    }

chrome log:

I can get expect value in html by using this:

rtnFileName: {{rtnFileName.response}}

html shows:

rtnFileName: d:/tomcat/bin/hello.swf

But how to get map value in angular controller directly? Any suggestion would be appreciated.

Could you share what comes back out of this? FolderService.onlineView(doc.cmObjectId). I.e. what sort of response are you getting? json? or share with us what are you seeing in the html when you render this {{rtnFileName.response}} — Wagner Danda da Silva Filho
– Wagner Danda da Silva Filho, Commented May 25, 2016 at 12:29
after call onlineView(), it get return a json formate map [object Object], and I add more detail in my post, thanks! — KLMN
– KLMN, Commented May 25, 2016 at 14:04
I'm confused as to what ur trying to do. Your service "/processOnlineView" seem to return a single entry (i.e 'd:/tomcat/bin/hello.swf') and not an actual list/map... Could you share what comes back from your actual service call? You can find this on google chrome's network tab. — Wagner Danda da Silva Filho
– Wagner Danda da Silva Filho, Commented May 25, 2016 at 14:50

KLMN · Accepted Answer · 2016-05-26 04:54:52Z

Problem solved. First, use $http post instead of $resource:

            onlineView: function(docId) {
                $http({
                    method: 'POST',
                    url: urlBase + '/processOnlineView',
                    params: {
                        docId: docId
                    }
                })
                .success(function(data, status, headers, config) {
                    console.log('success data: ' + data); // result: success data: [object Object]                        
                    for (key in data){  
                        console.log('>> data key: ' + key );           
                        console.log('>> data value: ' + data[key] ); 
                    }            
                    var resultDocName = data['response'];    
                    console.log('resultDocName: ' + resultDocName);        
                    runFlexpaper(resultDocName);
                })
                .error(function(data, status, headers, config) {

                });                              
        }

Second, retrieve returned map inside 'success' block, because $http post is asynchronous call.

Khodor Khalil · Accepted Answer · 2016-05-25 12:27:41Z

Use a service. For example:

var app = angular.module('myApp', [])
app.service('sharedProperties', function () {
    var mapCoord= 'Test';

    return {
        getProperty: function () {
            return mapCoord;
        },
        setProperty: function(value) {
            mapCoord= value;
        }
    };
});

Inside your Main controller

app.controller('Main', function($scope, sharedProperties) {
    $scope.mapCoord= sharedProperties.setProperty("Main"); 
});

Inside your Map controller

app.controller('Map', function($scope, sharedProperties) {
    $scope.mapCoord= sharedProperties.getProperty(); 
});

thank you for your reply, but I need retrieve map value right after spring call back, thanks anyway :)

Collectives™ on Stack Overflow

Angular JS - How to get spring returned map value inside angular controller?

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related