Angularjs arrays with 1 variable won't print with ng-repeat

Question

I'm new to angularjs and I've encountered a pretty annoying problem. In my app I'm using a factory that holds all the functions, and let the controllers use them. I created a function that's returning an array and printing it on the web page, but when the returned array contains only 1 variable, it prints sort of an empty list. it works fine when there's more than 1 variable in the array. console.log shows that the array contains the variable, but it won't print it on my list.

I'm also using bootstrap if that matters.

I hope I explained my problem properly. Thanks for the help!

Factory:

       function getArray(var){
        return $http.get(restURL+var).then(
                function(response){
                    return response.data.coupon;
                }
        );
    }

Controller:

         $scope.getArrayFunction = function(){
         appServicesProvider.getArray($scope.var).then(function(coupons){
             $scope.arrayVar = coupons;
         })
     }

HTML:

<div id="getArrayDiv">     
        <table class="table table-hover">
         <thead>
           <tr>
             <th>#</th>
             <th>&nbsp;Title</th>
             <th></th>
           </tr>
         </thead>
         <tbody>
           <tr ng-repeat="coupon in arrayVar">
             <td>{{coupon.id}}</td>
             <td>{{coupon.title}}</td>
           </tr>
         </tbody>
   </table>
    <input type="text" class="form-control" placeholder="Enter Type" ng-model="var" required="true">

    <button  class="btn  btn-success" ng-click="getArrayFunction()"  >Get Array</button>
 </div> <!-- /getArrayDiv -->

Yes, of course. As I said, everything works perfectly, the only problem is when the returned array contains only 1 variable. — Dor Golan
– Dor Golan, Commented Aug 26, 2017 at 11:20
@DorGolan can you do {{arrayVar}} and show how that 1 variable looks like in html — Naren Murali
– Naren Murali, Commented Aug 26, 2017 at 11:22
@MaximShoustin I see now that the array containing 1 variable is actually an object, but when there's more than 1 variable it's an array. My java code returns an array, and arrayVar is defined as an array, so I'm not sure what to make of this.. any ideas what I should do? — Dor Golan
– Dor Golan, Commented Aug 26, 2017 at 11:39

Dharmesh Rajodiya · Accepted Answer · 2017-08-26 12:24:10Z

2

I believe your API is returning an object (instead of array) when there is only one record to return and an array when there is more than one records.

So, here is workaround, just replace your return statement of factory's method with below statement, it should work fine.

return [].concat(response.data.coupon);

Here is the reference link to know more about concat function: https://www.w3schools.com/jsreF/jsref_concat_array.asp

Hope this work for your question. Cheers!

edited Aug 26, 2017 at 12:24

answered Aug 26, 2017 at 11:49

Dharmesh Rajodiya

364 bronze badges

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

5 Comments

Dor Golan Over a year ago

This actually works! It's the first time I see the concat() function so I wasn't sure what it does and wanted to do some reading, but it turns out great. Is it considered a quickfix or a legit way to solve my problem?

Dharmesh Rajodiya Over a year ago

concat function merges passed array or json objects and returns the final result. Here is the ref link of w3Schools w3schools.com/jsreF/jsref_concat_array.asp It's a working solution (not a temporary fix).

Dor Golan Over a year ago

It says that concat is used to join two arrays, so I'm not sure how it solved my problem, but it does.

Dharmesh Rajodiya Over a year ago

Correct, javascript converts object into an array internally, when concat function parameter is an object.

Dharmesh Rajodiya Over a year ago

My pleasure! Always happy to help the people.

Mohammad.Gh · Accepted Answer · 2017-08-26 11:50:37Z

0

It is because you are not Calling your function, please call your function after you declared it in this way

$scope.getArrayFunction();

answered Aug 26, 2017 at 11:50

Mohammad.Gh

3953 silver badges16 bronze badges

2 Comments

Dor Golan Over a year ago

I am calling the function - ng-click="getArrayFunction()", Also, the function works with arrays with more than one variable, so I don't that's the problem.

Mohammad.Gh Over a year ago

please add "Console.log($scope.arrayVar)" after "$scope.arrayVar = coupons;" in your function and write the result from your browser's console here

Collectives™ on Stack Overflow

Angularjs arrays with 1 variable won't print with ng-repeat

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related