angular display issue

[awandres]

repo - https://github.com/awandres/marquee

I'm having trouble with what seems to be a relatively simple task. In my Search factory, I have my API linked. In my search controller, I do a promise that calls the API, runs through the response, and returns an array of event objects related to the keyword (currently just bruno). The problem is, I'm not getting it to display in my view at all.

I'm thinking it might have something to do with the fact its a .get ? I tried using query but it wouldnt work since it was expecting an array and got an object

[jsm13]

Is this console.log logging the results or is it not getting that far?

[AndyWhitley]

@awandres I think the logic you have is correct, but if you are judging off of the console.log, it won't show the response because it is firing before it comes back. Try changing your code from

  this.results = SearchFactory.get().$promise.then((response) => {
    console.log(response._embedded.events)
    return response._embedded.events
  })
  console.log(this.results)

to

  this.results = SearchFactory.get().$promise.then((response) => {
    console.log(response._embedded.events)
    return response._embedded.events
  })
.then(() => {
  console.log(this.results)
})

to make sure the data is being set properly to the controller

[awandres]

The console log in question is logging the correct data, an array of event objects. It just isn't being displayed in the view for some reason. Even if I try to define this.results as one piece of information (like a string of the artist name) it is console logging correctly but not displaying in the view

[AndyWhitley]

@awandres Shouldn't

<div>
  <div data-ng-repeat="result in vm.results track by $index">
      <p>{{factory.name}}</p>
  </div>
</div>

be

<div>
  <div data-ng-repeat="result in vm.results track by $index">
      <p>{{result.name}}</p>
  </div>
</div>

in
https://github.com/awandres/marquee/blob/master/public/js/views/Search.html#L11-L15 ?

[awandres]

Oh sorry - I changed the variable names to make it more descriptive but I forgot to switch that one. I changed it to the correct variable and it still doesnt work. The variables I had when I encountered this issue were lined up properly as well

[jsm13]

When you access the .$promise here, you are changing the return value of the expression. You want something like:

  SearchFactory.get().$promise.then((response) => {
    console.log(response._embedded.events)
    this.result = response._embedded.events
    return response._embedded.events
  })

At this point though, you should consider using the $http service which is built into angularJS and works very similarly to $.ajax

[awandres]

That worked, thanks! Not exactly sure why though, I did something similar in Project 3 and it worked fine just using the return value :/

Also, unless im mistaken im using $resource, not $ajax. Isnt that pretty much the same as $http ? Or should I switch

[jsm13]

$resource is built around $http and has a ton more functionality. $resource returns a class object that you can think of like an active record class -- it makes default assumptions that the endpoint used to define it is RESTful (follows the conventions we've discuss for HTTP CRUD). Each request made through $resource will internally use the $http service to make the request.

The return value of actions on a resource class or instance are also a bit strange (which is what we're running into here). They return an object or an array based on what the request is expected to return. When (if) the request completes successfully, the this object or array is "hydrated" with the values that came back on the request, you don't have to handle it in a callback. This is assuming though that the data is coming back ready to plug right into the view. This is more likely to be the case when it's your own (or your teams own) endpoint.