Accessing JSON data from a URL in AngularJS

Just dove into the world of fetching and displaying JSON data in my AngularJS app for the first time, but unfortunately, no data is showing up. Here's the code I have implemented:

HTML

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>

    <td>{{ x.id }}</td>
    <td>{{ x.title }}</td>

</table>

</div>

</body>
</html>

Script

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://example.com/api/get_page_index/")
    .then(function (response) {$scope.names = response.data.pages;});
});
</script>

JSON Content Retrieved from URL

 {
      "status": "ok",
      "pages": [
        {
          "id": 2,
          "type": "page",
          "slug": "sample-page",
          "url": "http:\/\/example.com\/",
          "status": "publish",
          "title": "example page",
          "content": "",
          "excerpt": "",
          "date": false,
          "modified": "2016-08-09 17:28:01",
          "comments": [],
          "attachments": [],
          },

Answer №1

You have the ability to complete this task,

 <table>
    <thead>
      <tr>
        <th ng-repeat="(header, value) in results[0]">
          {{header}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in results">
        <td ng-repeat="cell in row">
          {{cell}}
        </td>
      </tr>
    </tbody>
  </table>

VIEW LIVE DEMO

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

What could be causing the "Error - Only secure origins are permitted" message to appear for my service worker?

Whenever I attempt to implement a service worker on my progressive web application page, why does the browser console display this specific error message? ERROR "Uncaught (in promise) DOMException: Only secure origins are allowed JavaScript Code: ...

Ensure that every HTML link consistently triggers the Complete Action With prompt on Android devices

After extensive searching, I have yet to find a solution to my issue. I have been developing a web application that allows users to play video files, primarily in the mp4 format. Depending on the mobile browser being used, when clicking the link, the vide ...

"Enhancing Webpages with AngularJS: The Power of Binding and Re

Using AngularJS to load AJAX content and ng-repeat to generate a list of items. I have a placeholder {{noun}} in the content, expecting it to be replaced with data from $scope.noun when the AJAX content is loaded. However, this does not happen automaticall ...

What methods can I employ to utilize preg_match with jQuery?

Is it possible to validate a phone number in jQuery using preg_match? I have tried the following code without success: if (!preg_match("/^[0-9]{3}-|\s[0-9]{3}-|\s[0-9]{4}$/", phone.val() )) { phone.addClass("needsfille ...

Unable to locate properties "offsetHeight" or "clientHeight" within a React/Next.js project developed in TypeScript

I have a unique customized collapsible FAQ feature that adjusts its height based on whether it's expanded or collapsed. import { useState, useRef, useEffect } from "react"; export default FAQItem({title, description}: FAQItemProps) { cons ...

Encountering an error while configuring webpack with ReactJS: Unexpected token found while

I'm attempting to update the state of all elements within an array in ReactJS, as illustrated below. As a newbie to this application development, it's challenging for me to identify the mistake in my code. closeState(){ this.state.itemList.f ...

Add a touch of mystery to a triangle SVG with CSS shadows

Is there a way to apply shadows to SVG images, like a triangle? I've tried using polyfill solutions but they didn't give me the desired effect. Check out this JSFiddle where I showcase what I'm trying to achieve. This is my HTML: <div c ...

The fetch request in a React application is not returning a response body, whereas the same request functions properly when made using Postman

My React app is successfully running locally with backend REST APIs also running locally. However, when I attempt to make a POST call to the REST API, the call goes through but the body appears to be empty. Below is a snippet of the sample code: const bod ...

Encountering an unusual error while utilizing the Rails 3 form_for with the :remote option set to true

Encountering an error and seeking assistance: try { Element.update("status", "There seems to be an issue with this product."); } catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.update(\"status\", &bsol ...

Executing an Angular 4 script using a scheduled CRON job

We are currently facing a challenge with our Angular-built APP for Android phones. The logic has become quite intricate and we have decided to transfer it to our server, where it can be executed as a CRON job every hour instead of within the Phone APP it ...

Trouble with value updating in PostgreSQL with NodeJs

var express = require('express'); var app = express(); var pg = require('pg'); var connectionString = "postgresql://postgres:sujay123@localhost:3001/redc"; app.use(express.static('public')); app.get('/index.h ...

Developing web applications using a combination of PHP, MySQL, and

I am in need of creating an HTML form that functions as CRUD. This form should be able to record inputs such as "row_number", "channel_name", and "ip_address". It will store all the data in a MySQL table using the "ORDER BY row_number" function. The form i ...

Is my rtk slice's initial state not being saved correctly in the store?

Currently diving into the world of RTK with typescript. I have created 2 slices - one using RTK query to fetch data (called apiSlice.ts) and another utilizing createSlice for handling synchronous state changes in my todo app (named snackbarSlice.ts). The ...

Instructions on how to trigger a function after adding HTML content to the directive

When working with the viewBannerCtrl controller and using the "customTable" directive, I encountered an issue. I am unable to access the "VBC.bannerAlert()" function from the directive even though I tried appending the code to the directive. Confusingly, I ...

Passing a variable to a template in Node.js and express with hbs is causing an unexpected identifier error

I’m working on a Node.js Express app, and I’m trying to pass a variable when rendering my index.hbs file, like this: <!DOCTYPE html> <html> <body> Hello. <a href="/auth/facebook">Login with Facebook</a> {{ ...

Implementing the Applet Param Tag using JavaScript or jQuery

<applet id="applet" code="myclass.class"> <param name="Access_ID" value="newaccessid"> <param name="App_ID" value="newappid"> <param name="Current_Url" value="newticketurl"> <param name="Bug_ID" value="newbugid"&g ...

How to position button components at the center in a NextJS application?

Incorporating a button within my nextjs page has been a challenge as I am striving to position it in the center of the page for optimal viewing on both PCs and mobile devices. Despite various attempts, the button remains fixed on the far left side of the p ...

What is the best way to navigate to the bottom of a page when new data is added?

I've created a chat feature in my Ionic app, but the issue is that when a user receives a new message while being on the chat screen, the view doesn't automatically scroll down to show the new message. The user has to manually scroll down to see ...

Eliminate the jQuery AJAX timestamp from the URL parameters

Is there a way to eliminate the jQuery AJAX cache buster code (_=3452345235) from string URLs? While working on a global AJAX fail handler, I need to identify which URL failed. However, every time I locate the failed request's URL, the jQuery cache q ...

Retrieve error messages from API while utilizing Next-auth

Is it possible for Next-auth to handle API errors and pass them to the client-side? For example, our mobile app successfully handles API responses indicating incorrect email or password. However, on our website using Next-auth, we want to modify the retur ...