AngularJS is experiencing issues with data visibility when generating rows automatically

Having trouble displaying my data in HTML using ng-repeat. I am attempting to dynamically create rows, but the list is not showing up.

This is how my controller looks like:

app.controller('SearchBusController',['$scope','$sessionStorage','$http','$state',function($scope,$sessionStorage,$http,$state){
    var a="http://localhost:8080/business/allbusiness";
    $scope.BusinessList=[];
            $.ajax({
    type:'GET',
    url:a,

    success:function(data){

    $scope.BusinessList=data;   
    console.log(data)
    },
    error:function(data){
        //alert("unsuccessfull");
        },  
    dataType:"json",
    contentType:"application/json",
});



    }]);

This is the HTML code being used:

<div ng-app="app" ng-controller="SearchBusController">
    <table class="table1" cellspacing="0px" border="1"  width="60%;" style="background:white;">
    <tr ng-repeat="business in BusinessList">
    <td width="13%">
    <img src="images/welcome.jpg" style= "width:100%;" align="left">
    </td>
   <td colspan="2">
   <a href="">
    <p><span><h3 style="color:white;">{{business.BusinessDTO.company_name}}</h3></p></span></a>
    <a href=""> 
    <p><span><h3>{{business.BusinessDTO.address}}</h3></p></span></a>
    </td>
    </tr>
<table>
</div>

The list in $scope.BusinessList contains:

{"businessList":[{"BusinessDTO":{"businessId":1,"company_name":"Zafin","about_company":"asdasd"}},{"BusinessDTO":{"businessId":2,"company_name":"aaa","about_company":"hgfh"}}]}

Can anyone offer some guidance on this issue?

Answer №1

If you want to make a quick change to your list assignment, consider updating it with the following:

Instead of

$scope.ItemsList=data;   

Use

$scope.ItemsList=data.itemsList;   

Answer №2

One possible solution is to include $scope.$apply() right after assigning the value to $scope.BusinessList.

It's important to ensure that your JSON objects are structured correctly. In this case, the JSON doesn't consist of an array directly. Therefore, you'll need to reference it as BusinessList.businessList when using ng-repeat.

{
      "businessList": [{
          "BusinessDTO": {
              "businessId": 1,
              "company_name": "Zafin",
              "about_company": "asdasd"
          }
      }, {
          "BusinessDTO": {
              "businessId": 2,
              "company_name": "aaa",
              "about_company": "hgfh"
          }
      }]
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Monitor the scrolling progress across four separate HTML pages without the percentage decreasing when scrolling back up

I am in the process of developing an e-learning platform and I would like to include a scrolling indicator that visually represents the progress of pages read. The website consists of four HTML pages, with each page corresponding to 25% of the scroll bar. ...

Convert a negative number to ASCII representation

Currently, I am attempting to extract the longitude and latitude of a user in order to utilize it in a Yahoo API query for obtaining the WOEID based on these coordinates. Subsequently, the WOEID will be passed through to a weather API call. My current pre ...

Is there a way to pass information from Express.js to React without using an API?

My goal is to build a Multi Page APP using both react and express. I find myself uncertain about how to access data sent by express in react without utilizing an API. I am curious if react has the capability to retrieve information stored in HTML props t ...

What is the best way to mark a specific photo as a favorite in an array of Photo objects?

I am working with a basic array of photo categories that follows this structure: [ { category: 1001, photos: [ { id: 100101, url: 'url.com/100101', favorite: false}, { id: 100102, url: 'url.com/100102', favorite: ...

Encountering a problem with configuring webpack's CommonsChunkPlugin for multiple entry points

entry: { page1: '~/page1', page2: '~/page2', page3: '~/page3', lib: ['date-fns', 'lodash'], vendor: ['vue', 'vuex', 'vue-router'] }, new webpack.optimize.C ...

I encountered an error when attempting to integrate Node.js with my terminal in the text editor - permission was denied

After installing node.js and npm, I encountered permission issues when trying to run them from my text editor (VSC). I was advised to open the terminal within the text editor, drag and drop the .js files I'm working on, add "node" and hit "enter" to r ...

What is the best way to handle texture loading delays in Three.js when using a JSON model?

Currently, I have successfully loaded a JSON model based on AlteredQualia's skinning example. However, I am looking to hide the model until it is fully loaded. In the provided example, the models are displayed before their texture resources finish loa ...

Verify the role upon logging in

After downloading the Yeoman Angular Fullstack, I noticed that it already has the basic login configuration in place. The login code snippet looks like this: $scope.login = function(form) { $scope.submitted = true; if(form.$valid) { Auth.login({ ...

Steps for passing $scope to an AngularJS 1.5 component or directive

Exploring the utilization of the new .component() method in angular 1.5 has been a challenge. There is limited information available on its usage, and even the angular documentation does not provide clear guidance. Attempting to pass the scope or an objec ...

Instead of logging the JSON file in the console, download it using $.getJson()

Is there a method to download a json file without using jQuery's $.getJSON() and having to log the callback function's argument? I would like to avoid manually typing it from the console.log due to its length. Is there an option to print it, eve ...

The Angular @HostListener beforeunload Event is a powerful way to handle

I've implemented the following code snippet in my main app.component.ts file within my Angular 17 project: @HostListener("window:beforeunload", ["$event"]) onTabClose($event: BeforeUnloadEvent) { $event.preventDefault(); ...

Deactivating upcoming weeks according to the year in Angular 8

In the user interface, there are dropdowns for selecting a year and a week. Once a year is selected, the list of weeks for that year is displayed in the week dropdown. Now, the requirement is to disable the selection of future weeks. For example, for the ...

JQuery failing to validate the form

Whenever I try to validate a form by clicking the submit button, it seems to ignore the validation altogether and proceeds to post the entered data to the next page. Below are the validation codes: <script> $(document).ready(function() { $("#re ...

What are the steps to implement a personalized canvas in ThreeJS?

Struggling with creating a basic ThreeJS application that displays 3D text on the scene. The examples on the website are too complex for beginners like me. I'm finding it hard to make the scene appear without using tricks and I want to customize my ow ...

Exploring the Information Within HTML Forms

When my HTML form sends data to the server, it looks like this: { r1: [ '1', '2', '3' ], r2: [ 'Top', 'Greg', 'Andy' ], r3: [ 'validuser', 'invaliduser', 'validuser&a ...

What are some ways I can make my content come alive on my website using the Tympanus examples

After spending hours searching for a way to add animation to my content, I finally found a technique that seemed promising. Despite following the same steps as outlined in the tutorial I found, I was disappointed to discover that there was no animation o ...

The Laravel route is guiding me to a different destination

Currently, I am facing an issue while trying to develop a CRUD application using Laravel and vue.js. Every time I launch the application, it redirects me to the dashboard but the CRUD functionalities are not visible. Below are the codes from Routes/web.a ...

Show the text area content in an alert when using Code Mirror

When I try to alert the content of a textarea that is being used as a Code Mirror on a button click, it appears blank. However, when I remove the script for Code Mirror, the content displays properly. I am puzzled about what could be causing this issue wi ...

Learn how to efficiently pass multiple props using a loop in Vue

I am dealing with an object that has multiple properties. Typically, I know which props I want to pass to my component and do it like this: <component :prop1="object.prop1" :prop2="object.prop2" :prop3="object.prop3" /> However, I want to pass the ...

Angular 2 isn't triggering the custom validator for every keypress

I have implemented a custom validator for Reactive forms in Angular 2. However, I am facing an issue where my function is only validating the first key press in the text field. Ideally, the custom function should validate each key press. Can someone please ...