Angular UI select : using url json

Question

I'm trying to retrieve a list of users from a json generated from a url. I'm trying to adapt the code sugested on Angular UI select : Fetch data from remote service this way:

$scope.person = {};
$scope.people = {};
$http.get('https://sampleurl/pessoas/v1/?nome=' + item.name).then(
    function (response) {
      $scope.people = response.data;
      console.log(response)
    },
    function () {
      console.log('ERROR!!!');
    }
);

However, the input just breaks, I cant even type anything ont it :(

I had to change the real url since the json contains personal data.

UPDATE i removed item.name from the url and forced a value for name. Now i can get some fixed results, but i'm failling to add them to the input:

$scope.person = {};
  $scope.people = [];
  //e lá vamos nós
  $http.get('https://someurl/pessoas/v1/?nome=monteiro').then(
    function (response) {
      $scope.people = response.data;
      console.log(response)
    },
    function () {
      console.log('ERROR!!!');
    }
  );

getting the following error when i pick someone: Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: $item in $select.selected, Duplicate key: undefined:undefined, Duplicate value: undefined

UPDATE 2:

fixed the last error by defining all attributes from the object:

$scope.tagTransform = function (newTag) {
    var item = {
        nome: newTag,
        email: 'unknown',
        cpf: 'unknown',
        matricula: 'unknown',
        lotacao: 'unknown'
    };

    return item;
  };

Now i can pick someone, but the pick box has nothing inside. Also, i still cant search for string. I tried https://sampleurl/pessoas/v1/?nome=' + item.name and https://sampleurl/pessoas/v1/?nome=' + $selected.search but none worked.

example: [{"nome":"dude","matricula":"32107","cpf":"12345678901","email":"[email protected]","lotacao":"SUPDE/DERJO/DE701","regional":"SERPRO - REGIONAL RIO DE JANEIRO"},{"nome":"girl","matricula":"46213","cpf":98765432101","email":"[email protected]","lotacao":"OPRJO/OPSIN/OPESE","regional":"SERPRO - REGIONAL RIO DE JANEIRO"}]; — SuperMonteiro
– SuperMonteiro, Commented Mar 21, 2016 at 17:52
notice "nome", is it a typo of "name"? I have edited my answer to use 'nome' — George Chen
– George Chen, Commented Mar 21, 2016 at 18:19

niklas · Accepted Answer · 2016-03-21 17:55:14Z

0

change $scope.people = response.data; to $scope.people = response;

answered Mar 21, 2016 at 17:55

niklas

3,0234 gold badges45 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

George Chen · Accepted Answer · 2016-03-21 18:24:58Z

0

Assume you have the html like this, and the result.data is an array of person. I have {{people}} for debugging purpose. it should show the result.data you post in the comment

{{people}}

<ui-select multiple ng-model="person" >
   <ui-select-match placeholder="Select person...">{{$select.selected.nome}}</ui-select-match>
   <ui-select-choices repeat="person in people ">
     {{person.nome}}
   </ui-select-choices>
</ui-select>

$http.get('https://sampleurl/pessoas/v1/?nome=' + item.name).then(
  function (response) {
    $scope.people = response.data;
    console.log(response)
  },

  function () {
   console.log('ERROR!!!');
  }
 );

edited Mar 21, 2016 at 18:24

answered Mar 21, 2016 at 18:15

George Chen

6,9895 gold badges23 silver badges24 bronze badges

3 Comments

SuperMonteiro Over a year ago

It still doesnt work. Checking the log, i noticed i'm getting "Error: item is not defined"..

SuperMonteiro Over a year ago

same thing, Error: item is not defined. should i just upload the whole code somewhere? i'm feeling hopeless.

George Chen Over a year ago

i am wondering if it is the item in your $http.get not defined. $http.get('sampleurl/pessoas/v1/?nome=' + item.name)

A.Sharma · Accepted Answer · 2016-03-21 18:40:31Z

0

It's hard to recreate the issue to test exactly what is going on, but based on your comment to the original question, the returned data is in an array. So in order to get the JSON, you have to do the following:

$scope.people = response.data[0]

I always find it helpful to console log the response data and go through the hierarchy of the object and its children in the console. That way you can find out the order of the properties (if needed) which makes it easier to access the data you need: console.log(response.data)

edited Mar 21, 2016 at 18:40

answered Mar 21, 2016 at 18:01

A.Sharma

2,7991 gold badge14 silver badges24 bronze badges

6 Comments

SuperMonteiro Over a year ago

this way i was able to type something, but it still doesnt work.

A.Sharma Over a year ago

What is the console logging?

SuperMonteiro Over a year ago

Error: item is not defined

A.Sharma Over a year ago

What if you log response and response.data. What do you get for each?

SuperMonteiro Over a year ago

when i removed item.name from the url and forced a value for name, i can get the whole list of objects. now, i need to find a way to get those values in my input and be able to actually search for something.

|

Collectives™ on Stack Overflow

Angular UI select : using url json

3 Answers 3

Comments

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related