Exploring the power of Foundation For Apps and Angular by seamlessly displaying dynamic data sourced from

Question

Exploring the power of Foundation For Apps and Angular by seamlessly displaying dynamic data sourced from

I'm currently working with Foundation for Apps, a framework that incorporates elements of AngularJS. My goal is to display the content from a local JSON file by accessing it through a controller and rendering the results as 'cards'. Additionally, I would like the data set to be searchable.

Currently, I have set up a page with the following code snippet:

<div class="grid-container">
    <div class="grid-block">
        <div ng-model="providers" class="grid-content">
            {{providers}}
        </div>
    </div>
</div>

In my controllers.js file, I added the following code:

var myApp = angular.module('application',[]);

App.controller('ProvidersCtrl', function($scope, $http) {
    $http.get('providers.json')
    .then(function(res){
        $scope.providers = res.data;
    });
});

The head section of my index.html file includes:

<!doctype html>
<html lang="en" ng-app="application">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Provider Directory</title>
    <link href="/assets/css/app.css" rel="stylesheet" type="text/css">
    <script src="/assets/js/foundation.js"></script>
    <script src="/assets/js/templates.js"></script>
    <script src="/assets/js/routes.js"></script>
    <script src="/assets/js/controllers.js"></script>
    <script src="/assets/js/app.js"></script>
  </head>

Despite following these steps, I am encountering issues with displaying the data on the screen. I suspect that it may be due to a misunderstanding of AngularJS and how the data should be handled.

Attached below is a sample JSON data structure:

[
  {
    "specialty": "Cardiovascular Disease",
    "registered": "Sunday, January 25, 2015 5:37 AM",
    ... (additional information)
  },
  {
    "specialty": "Urology",
    "registered": "Friday, November 21, 2014 8:24 AM",
    ... (additional information)
  }
]

Edit: Despite my efforts, I'm still experiencing difficulties in deploying the data to the user interface. Edit 2: Updated the JSON format to remove an unnecessary providers = ' at the beginning.

Unfortunately, the content is not being displayed as intended. Any guidance or assistance would be greatly appreciated.

javascript json angularjs controller zurb-foundation

Answer 1

Answer №1

Check out the Updated Response :

let app = angular.module('myApp',[]);

app.controller('ProvidersCtrl', function($scope, $http) {
    $http.get('providers.json')
    .then(function(response){
        $scope.providers = response.data;
    });
});

To Use in Template:

<div class="grid-container">
    <div class="grid-block">
        <div ng-model="providers" ng-repeat="(key, value) in providers" class="grid-content">
            <span>{{key}} : </span><span>{{value}}</span>
        </div>
    </div>
</div>

Answer 2

Check out the Updated Response :

let app = angular.module('myApp',[]);

app.controller('ProvidersCtrl', function($scope, $http) {
    $http.get('providers.json')
    .then(function(response){
        $scope.providers = response.data;
    });
});

To Use in Template:

<div class="grid-container">
    <div class="grid-block">
        <div ng-model="providers" ng-repeat="(key, value) in providers" class="grid-content">
            <span>{{key}} : </span><span>{{value}}</span>
        </div>
    </div>
</div>

Answer 3

Answer №2

After sorting through a plethora of errors and pulling bits and pieces from various sources, I arrived at the following solution:

app.js controller =

var myApp = angular.module('application');
myApp.controller('ProvidersCtrl', function($scope, $http) {
    $http.get('/providers.json').then(function(res){
      $scope.providers = res.data;
    });
  });

Notes: (1) The var myApp was adjusted to angular.module('application'); to align with the naming convention in previous sections of app.js. For simplicity, I placed providers.json in the root directory. Additionally, I opted to consolidate the code into app.js instead of using a separate controllers.js file.

results.html =

---
name: results
url: /results
---
<div class="grid-container">
    <div class="grid-block">
        <div class="grid-content">
            <div ng-controller="ProvidersCtrl">
              {{ providers }}
            </div>
        </div>
    </div>
</div>

(1) To bind the data to the div, I utilized ng-controller instead of ng-model. (2) I chose not to follow the foundation for apps convention of specifying the controller in the header.

Answer 4

After sorting through a plethora of errors and pulling bits and pieces from various sources, I arrived at the following solution:

app.js controller =

var myApp = angular.module('application');
myApp.controller('ProvidersCtrl', function($scope, $http) {
    $http.get('/providers.json').then(function(res){
      $scope.providers = res.data;
    });
  });

Notes: (1) The var myApp was adjusted to angular.module('application'); to align with the naming convention in previous sections of app.js. For simplicity, I placed providers.json in the root directory. Additionally, I opted to consolidate the code into app.js instead of using a separate controllers.js file.

results.html =

---
name: results
url: /results
---
<div class="grid-container">
    <div class="grid-block">
        <div class="grid-content">
            <div ng-controller="ProvidersCtrl">
              {{ providers }}
            </div>
        </div>
    </div>
</div>

(1) To bind the data to the div, I utilized ng-controller instead of ng-model. (2) I chose not to follow the foundation for apps convention of specifying the controller in the header.

Exploring the power of Foundation For Apps and Angular by seamlessly displaying dynamic data sourced from

Answer №1

Answer №2

Similar questions

Effortlessly transfer files with Ajax through Box

What is the reasoning behind storing type definitions in the @types namespace within npm?

Retrieve a unified data array from the provided data source

Angular services Eclipse Mars JavaScript validation

Converting JSON data into an HTML table

Guide on transferring input element to h3 tag without using the URL

Embed a script into an iframe from a separate domain

Guidance on changing the user's path within the same domain using a button click in express

Managing and keeping track of a universal value within the success callback function among numerous Ajax POST requests

The Cross-Origin Resource Sharing request using the PUT method has been denied due to restrictions set by the

Applying a class to a specific element within another element using jQuery

What are the steps to effectively utilize an interface within a TypeScript file that contains its own internal import?

Trouble displaying image due to issues with javascript, html, Angular, and the IMDb API integration

Determine the 'source' attribute value of the image (img) with a dynamically changing Id

Can a script be executed using ssh2shell or simple-ssh in node.js?

Despite containing data, the JSON object continues to display as undefined

Creating a visual representation of the information stored in my JSON data file using a Quasar table

Tips for updating the color of table data when the value exceeds 0

JavaScript checking the current page's URL is crucial for maintaining accurate and dynamic

establish expiration date for image