how to fix my code?? angularjs, ejs code

Question

I used angular js and ejs. Repeat is good but, Database data does not come in.

How should I fix my code?

In this angularjs code

var app = angular.module('myApp', []);
app.controller('BasicCtrl20', function($scope, $http) {
  $http.get("/concept_db")
  .then(function(response) {
      $scope.gridOptions4 = response.data;

  });

});

In this my code

<div class="container">
  <div ng-app="myApp" ng-controller="BasicCtrl20"> 
   <div class="row">
<span style="line-height:30px"><br></span>

<div class="toggles">
   <button id="showall">전체 제품 보기</button> 
  <button id="furniture">가구/인테리어</button>
  <button id="homeappliances">디지털 가전</button>
  <button id="life">생활/건강</button>
  <button id="sport">스포츠/레저</button>
  <button id="delivery">출산/육아</button>
  <button id="fashion">패션잡화</button>
</div>

<div class="posts">
    <div class="gallery">
        <div ng-repeat="gridoptions in gridOptions4">
            <div class="{{gridOptions.class}}">
                <div class="gallery-item">
                    <a href="{{gridOptions.main_href}}">
                        <div class="gallery-item-image">
                            <img ng-src="{{gridOptions.imgsrc}}">
                        </div>
                    </a>
                    <div class="gallery-item-description">
                        <p align="center">{{gridOptions.name}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

and reuslt

I want to import data from the database.

console log result

The $http functions can take error callbacks, you should include one and see what error it throws or check the response from the network tab to see what is going wrong. Nothing appears to be wrong with the code that we can see. — BShaps
– BShaps, Commented Jun 1, 2018 at 0:34
var app = angular.module('myApp', []); app.controller('BasicCtrl20', function($scope, $http) { $http.get("/concept_db") .then(function(response) { $scope.gridOptions4 = response.data; }, function(error) { console.log(error) }); }); — I. Ahmed
– I. Ahmed, Commented Jun 1, 2018 at 1:13
Nothing is displayed in the console log. I attached the console log picture. — 전준휘
– 전준휘, Commented Jun 1, 2018 at 1:20
I Solved problem "<div ng-repeat="gridoptions in gridOptions4">" ----------------> "<div ng-repeat="x in gridOptions4">" — 전준휘
– 전준휘, Commented Jun 1, 2018 at 1:51

ippi · Accepted Answer · 2018-06-01 01:45:16Z

0

You have a bunch of elements, so there is clearly something there. ng-repeat does not create 20 elements from an error or thin air.

But the field name is probably wrong. It is not name (or name is actually empty on every item in the database!). Check that you got the field name right. Maybe its upper case Name or NAME or mispellt naem. Or something completely different like label or title.

the easy thing to do is to log the data when you get it, and see for yourself.

.then(function(response) {
    console.log( response.data );  <-- look in the console!
    scope.gridOptions4 = response.data;

Or since it's a GET-request. Right-click that link in your console XHR finished loading: GET "https://localhost:3000/concept_db". <-- Right-click, open in a new tab. It might not be the most easy thing to read, but it's a such a quick thing to just take a peek at data so you know what you are working with.

edited Jun 1, 2018 at 1:45

answered Jun 1, 2018 at 1:31

ippi

10.2k3 gold badges41 silver badges51 bronze badges

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

4 Comments

전준휘 Over a year ago

[{"no":1,"class":"life post","main_href":"Library_Main3_1?pageKey=1","imgsrc":"images/Library_Main/bottle.jpg","name":"Bottle"}

ippi Over a year ago

Yup, looks good. Next step is to see if the data is in the html (obscured by css or something else, fonts maybe). Right-click one of the gallery-cards and inspect. Or use ctrl+shift+C, click item.

전준휘 Over a year ago

I Solved problem "<div ng-repeat="gridoptions in gridOptions4">" ----------------> "<div ng-repeat="x in gridOptions4">"

ippi Over a year ago

Aha, ng-repeat="gridoptions --> gridOptions. Glad you found it. That should still not output 20 elements, but oh well.

Collectives™ on Stack Overflow

how to fix my code?? angularjs, ejs code

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related