Having trouble with AngularJS fetching data from a JSON URL

Can someone kindly take a look at my js fiddle? I'm attempting to use angular JS to display the list from the JSON file but I'm having trouble getting it to work.

I am new to angular JS and learning as I go along

https://jsfiddle.net/2zumpvy9/

<body ng-app="DraftApp">
  <div class="main" ng-controller="HomeController">
    <div class="container">

      <div class="each" ng-repeat="player in players">
        {{ player.Player }}
      </div>

    </div>
  </div>
</body>


var app = angular.module('DraftApp', []);

app.factory('players', ['$http', function($http) {
  return $http.get('http://redraft.comxa.com/test.json')
    .success(function(data) {
      return data;
    })
    .error(function(err) {
      return err;
    });
}]);


app.controller('HomeController', ['$scope', 'players', function($scope, players) {
  players.success(function(data) {
    $scope.players = data;
  });
}]);

Answer №1

One way to handle cross-origin requests is by using the https://crossorigin.me/ service.

For example, you can request data from: «». This data can then be easily integrated into your AngularJS application.

A demonstration has been created, featuring an AngularJS Service and Controller setup.

var app = angular.module("DraftApp", []);

app.factory("players", ["$http",
  function($http) {
    return $http.get("https://crossorigin.me/http://redraft.comxa.com/test.json")
      .success(function(data) {
        return data;
      })
      .error(function(err) {
        return err;
      });
  }
]);

app.controller("HomeController", ["$scope", "players",
  function($scope, players) {
    players.success(function(data) {
      $scope.players = data;
    });
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="DraftApp">
  <div class="main" ng-controller="HomeController">
    <div class="container">

      <div class="each" ng-repeat="player in players">
        {{ player.Player }}
      </div>
    </div>
  </div>
</body>

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

Encountering a rendering error with Jest while trying to load a functional child component

I encountered an error message stating Error: Uncaught [Error: Child(...): Nothing was returned from render while testing the Parent component. Below are the relevant files that were involved: /components/Page/Children/Child.js import React from "re ...

Modifying a single value within a 2D array has a ripple effect, altering the

While working on a basic game of life simulation, I encountered an unusual problem. I have a 2D array and I'm attempting to modify a single value at coordinates x,y. Sounds simple enough, right? let arr = new Array(10).fill(new Array(10).fill(1)) a ...

Having trouble adding a value to a specific location in Javascript

I have a JavaScript code that retrieves HTML markup or text data from the user and submits it to the server. Now, I have added a dialog box that collects descriptions about the code from the user on button click and sends this data to the server as a desc ...

dealing with errors coming from a child asynchronous callback function

function main(){ try { subCallbackFunction(1,(err,res) =>{ if(err){ throw Error(err); } }) } catch (e) { /// Handling error from subCallbackFunction inside this catch block ////// conso ...

The potential opportunity to utilize a JavaScript variable defined through an asynchronous request

After reading a thread on Stack Overflow about asynchronous calls in JavaScript, I decided to implement my own code using jQuery 3.2.1 to make an ajax call and retrieve a JSON response with specific data. The JSON structure returned by the endpoint /get-d ...

Using Threejs with dropdown menus: Showcasing the chosen model exclusively

I am looking to only show the selected value (in this case, the 3D model) from a dropdown menu. The chosen option should be the only one visible in the camera view. I am encountering some difficulty with the following code segment: cons ...

What is the best way to trigger a method in Angular when a user leaves an input field blank?

I have implemented controller methods to trigger upon changes in this specific input field: <input type="text" ng-model="query" ng-model-options='{ debounce: 500 }' ng-change="searchOnTags(query)"/> Is there a way to call a separate metho ...

What is the current state of Javascript in versions 3.4 and 3.5 of ANTL

Can someone provide information on the current status of the JavaScript target in ANTLR 3.4 or 3.5? I've searched online for answers but haven't found anything conclusive. While I know it was fixed in v3.3 after being broken in v3.2, there is no ...

Guide on linking a svelte user interface with a Python application programming interface

As a newcomer to web development, I have successfully created a "front.svelte" file with mock data and a "back.py" file with functions returning raw lists and arrays. My idea was: Run the "back.py" file on one localhost port Run the "front.svelte" file on ...

Is there a way to serve an HTML file using the response object in expressjs while also incorporating an external JavaScript file?

My express application successfully serves an HTML page from my disk when I initially make a GET request to "http://localhost:3000/" in the browser. Now, I am trying to access a JavaScript file that is located in the same directory on the disk as the HTML ...

Utilizing conditional statements within the array.forEach method to select specific sub-objects within an array of objects

Need help troubleshooting an if statement inside a function that is called by a forEach array loop. My array contains objects, with each object structured like this: arrofobj = [ {"thing_id":"1a", "val": 1, "Type": "Switch","ValType":{"0":"Open","1":" ...

Can you please tell me the event that is triggered when an option is unselected in Vue.Drag

I am trying to figure out the event for selecting an item since I already know about the "choose" event. However, I am uncertain about what to use for un-selecting an item. In my particular case, I am unable to utilize the @end event. <draggable :list= ...

Creating a JSX syntax for a simulated component and ensuring it is fully typed with TypeScript

Looking for some innovative ideas on how to approach this challenge. I have a test helper utils with added types: import { jest } from '@jest/globals' import React from 'react' // https://learn.reactnativeschool.com/courses/781007/lect ...

Storing and assigning variable values within Angular.js

I have a multi-tabbed application with two separate controllers. Each time a tab is entered, I need to make an API call. Once the response is obtained, it does not need to be fetched again when revisiting that tab. My query revolves around the most effici ...

What is the best way to retrieve ul li values using AngularJS?

I am looking to extract the content of li elements within a ul element in an AngularJS controller and save them into an array. Sample HTML Code: <ul id="list" my-directive> <li>A</li> <li>B</li> <li>C ...

Using Play! and Jackson, repair encoded data in JSON payload that has been passed through htmlspecialchars()

When consuming a JSON web API, I noticed that certain characters are being converted to their HTML entities such as &amp;, &quot;, etc. It seems like the data is being processed using PHP's htmlspecialchars() function. In my existing PHP code ...

Ways to retrieve a variable from a prototype object

Is there a way to properly pass the context of Test = function(){ this.x = //(1) How do I access 'this' in the return statement? this.line = d3.svg.line() .interpolate("linear") .x(function (d) { return th ...

Gson fails to deserialize fields when an instance creator is registered

Currently, I am employing gson to deserialize objects. Instead of specifying the implementation class of the object I desire, I inform gson about the interface class. Subsequently, I enlist an InstanceCreator that generates an instance of the implementatio ...

How can I execute a HTTP POST request in Node.js using MongoDB and Mongoose?

I have completed my schema setup and now I am looking for guidance on how to perform an HTTP POST request. I am currently utilizing MongoDB with the Mongoose framework. By implementing this, I aim to view the JSON data I have posted when accessing localhos ...

Storing input data in a dynamic form upon returning to or reloading the page

Currently, my form dynamically adds input fields using code. I am trying to figure out a way to submit the data and proceed to the next page, while ensuring that if someone decides to go back, the newly created input fields will still be populated with the ...