For native JS: : <script>document.write(JSON.stringfiy(placeDetail )</script> For angular you need to add the <code> tag

Angular:

<code>
    <pre>{{placeDetail |json}}</pre>
</code>

Native JS:

<div class="box box-default">
    <pre><script>document.write(JSON.stringify(placeDetail))</script></pre>
</div>

We can use angular pipe json

{{ jsonObject | json }}

1. Concatenate string and object in controller

You need to use comma instead of plus to log the object in the controller.

console.log("InstanceId is: ", InstanceId)

instead of

console.log("InstanceId is: " + InstanceId)

2. Render object property in the template

The hyphen in the property must obfuscate for the template rendered to access it. You could use bracket notation instead of dot notation here.

<td>{{ Instance Id["case-id"]}}</td>

instead of

<td>{{ Instance Id.case-id}}</td>

You have two options:

• Use the built-in pipe JsonPipe (this.data should be of type any):

  <pre>Data Obtained is: {{ data | json }}</pre>

• Get the JSON string manually:

  this.data = JSON.stringify(res.json()); //data is a string :)

or

 `<pre>Data Obtained is: {{ JSON.stringify(data) }}</pre>`

You have to understand that any value in a template is shown via calling its .toString() method, so a basic object (something like {key: value}) just shows [object Object]

You are not assigning any data to the answer (actually assigning undefined) because findPlayer doesn't return anything.

So first of all, you need to make service method return promise object:

this.findPlayer = function() {

    var url = 'https://euw.api.pvp.net/api/lol/euw/v1.4/summoner/by-name/Crucify?api_key=222015c4-0898-4f6b-a7d5-2a23c3e0344d';

    return $http({
        method: 'GET',
        url: url
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        return response.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        return response;
    });
};

then consume it in controller:

$scope.search = function () {
    personSearch.findPlayer().then(function(data) {
        $scope.answer = data;
    });
}