Displaying a list of JSON data in HTML using Angular.js is a breeze

I am attempting to create an HTML list displaying the id fields of game objects from a json file. However, it is not appearing in my user interface. I am unsure why it is not rendering properly.

---core.js---

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

function mainController($scope,$http) {
  $scope.formData = {};

  $http.get('/api/games')
    .success(function(data){
      $scope.games = data;
      console.log(data);

    })
    .error(function(data) {
      console.log('Error' + data);
    });
}

---- index.html----

<!doctype html>
<html ng-app="gameapp">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
  <script src="core.js"></script>

  <title>Games API</title>

  <body ng-controller="mainController">Games List:
    <ul>
      <li ng-repeat="game in games">
        {{ game._id }}
      </li>
    </ul>
  </body>

</html>

---- UI------

Games List:
{{ game._id }}

---- Here is the JSON output when accessing www.example.com/api/games

 [{"_id":"54e4add76b91eab37a3611c8","objectname":"objectname","objectid":"objectid","average":"average","avgweight":"avgweight","rank":"rank","minplayers":"minplayers","maxplayers":"maxplayers","playingtime":"playingtime","biggbestplayers":"bggbestplayers"},{"_id":"54e4add76b91eab37a3611c9","objectname":"6 qui prend !","objectid":432,"average":6.75695,"avgweight":1.2418,"rank":445,"minplayers":2,"maxplayers":10,"playingtime":45,"biggbestplayers":"5-- 6"},{"_id":"54e4add76b91eab37a3611ca","objectname":"Adel Verpflichtet","objectid":120,"average":6.40472,"avgweight":1.8605,"rank":861,"minplayers":2,"maxplayers":6,"playingtime":45,"biggbestplayers":"5-- 6"},{"_id":"54e4add76b91eab37a3611cb","objectname":"Age of Steam","objectid":4098,"average":7.53212,"avgweight":3.9285,"rank":53,"minplayers":1,"maxplayers":6,"playingtime":120,"biggbestplayers":4},{"_id":"54e4add76b91eab37a3611cc","objectname":"Agricola","objectid":31260,"average":8.06284,"avgweight":3.6088,"rank":5,"minplayers":1,"maxplayers":5,"playingtime":180,"biggbestplayers":"3-- 4"},{"_id":"54e4add76b91eab37a3611cd","objectname":"Aladdin's Dragons","objectid":492,"average":6.66519,"avgweight":2.4728,"rank":537,"minplayers":3,"maxplayers":5,"playingtime":90,"biggbestplayers":5},{"_id":"54e4add76b91eab37a3611ce","objectname":"Alexandros","objectid":8273,"average":5.86456,"avgweight":2.3423,"rank":2271,"minplayers":2,"maxplayers":4,"playingtime":45,"biggbestplayers":"NA"},{"_id":"54e4add76b91eab37a3611cf","objectname":"Alhambra","objectid":6249,"average":6.96861,"avgweight":2.1234,"rank":298,"minplayers":2,"maxplayers":6,"playingtime":60,"biggbestplayers":3},{"_id":"54e4add76b91eab37a3611d0","objectname":"Alien Frontiers","objectid":48726,"average":7.3786,"avgweight":2.541,"rank":93,"minplayers":2,"maxplayers":4,"playingtime":90,"biggbestplayers":"3-- 4"},{"_id":"54e4add76b91eab37a3611d1","objectname":"Amun-Re","objectid":5404,"average":7.21837,"avgweight":3.068,"rank":165,"minplayers":3,"maxplayers":5,"playingtime":90,"biggbestplayers":5}]

Answer №1

If the output on your page is {{ game._id }}, it could indicate a problem with your Angular configuration. Normally, you would either see nothing displayed or receive an error in the console. It's possible that there may be an issue with your JSON file as well.

Overall, the code appears to be correct. Check out this plunker for reference.

Additionally, consider using Angular's jqlite instead of jQuery since you are not utilizing jQuery in your current setup.

Answer №2

It is recommended to nest your ul element within a div

<div>
  <ul>
    <li ng-repeat="game in games"{{ game._id }}>
    </li>
  </ul>
</div>

Answer №3

Here are a few recommendations for you:

  • Consider utilizing a promise to load the data - check out this SO question.
  • Try using the ng-bind directive to display the data instead of {{game._id}} - take a look at this codepen

You may also find it helpful to review:

Answer №4

Ensure to define the $scope.games variable outside of the success function, ideally at the same level where $scope.formData is initialized.

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

ReactJS: Oops! Looks like there's an issue with the element type - it's invalid. We were expecting a string

I am in the process of setting up a basic server-side rendered React application. Listed below are the steps I have taken: Step 1: Creating a new React app using create-react-app: npx create-react-app my-ssr-app Step 2: Installing necessary dependencies: ...

How to retrieve the present value from an array using AngularJS

Struggling to assign the current user from my list Here is my array after submitting the form [{"name":"Erich","surname":"Josh","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096c67497a7a276a6664">[email prot ...

Nextjs API call ended without a response being sent

I am currently facing a challenge in my NextJS project as my endpoint API does not support multiple calls, and I am looking to implement a data refresh every 3 minutes from the original source. To achieve this, I have integrated an API in NextJS by creati ...

Socket.io in Express is already assigned to another address

I'm having trouble getting my app to connect with Socket.io via websockets. Each time I attempt to run this code snippet, I encounter the following error: Error: listen EADDRINUSE: address already in use :::3000 Despite checking for any other process ...

Is there a way to execute a SQL JSON_VALUE query without specifying path names?

Trying to import JSON data into a SQL Server database, but lacking path names for reference. How can I identify the elements in this scenario? Sample JSON: The output format is as follows: [ CloseTime, OpenPrice, HighPrice, LowPrice, ClosePrice ...

Is there a way to transform the SmartyStreets' jQuery.LiveAddress plugin into its JavaScript SDK?

My website currently utilizes the jQuery.LiveAddress plugin, however, it was deprecated and subsequently removed by SmartyStreets back in 2014. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <s ...

Passing arguments inside the source attribute of an image or link tag in Node.js and

As a beginner in NodeJS, I am facing an issue with passing arguments inside links and image sources. In my template.html file, I have included various scripts and elements to create a search form. The issue arises when I try to incorporate values from the ...

The div on my webpage is not loading its content as expected when using JavaScript

I am having trouble continuously loading the content of a div from another page. Using alert worked fine, but the page data is not loading. JavaScript <script> $(document).ready(function(){ setInterval(function(){$("#loadAvailable").load("update.p ...

Presenting JSON information in a concise and visually appealing manner

How can I extract a value from JSON data and display it in an HTML text field? The JSON data looks like this: {"name":"paul"}, but I only want to display "paul" in my text field. Here is my code in CodeIgniter PHP: $data['name'] = $this->name ...

What is the best way to retrieve distinct id values from a form in Rails when sending a DELETE request via AJAX?

I am determined to grasp the intricacies of AJAX and how it operates, hence, I prefer not to use "remote: true" for this task. The issue at hand is that despite attempting to send a DELETE request to the server using a form input, each submission results i ...

Exploring the blend of HTTP requests and personalized promises in AngularJS through recursive functions

I recently created a function wrapper that serves cached HTTP responses, but I'm encountering an inconsistency in one specific scenario (indicated by the comment // <--HERE). The issue seems to be related to the cache expiration not waiting for the ...

Exploring jQuery AJAX Attributes during ajaxStart and ajaxStop event handlers

With my project consisting of over 40 ajax webservice calls, I am looking to incorporate additional debugging features. One such feature is a timing method which I have already developed using my Timer class/object in Javascript. I'm seeking assistan ...

Data within React/Next.js will remain unchanged even after a link has been clicked

When using Next.js and clicking on a Link, the new page URL will open as "/component/product". However, the product data is not updated in the Redux store. The page needs to be refreshed in order to update the state data. import Link from "n ...

How can I properly parse a JSON file in Node.js?

Utilizing node.js, I have created a webpage (index.html) for visualizing a network graph using the vis.js library. To draw a network graph with this library, it is necessary to provide json arrays for both nodes and edges (see example). // array of nodes ...

NodeJs google analytics reporting API returning null response object

Just getting started with a question. In my project, I am utilizing NodeJS to interact with the Google Analytics Reporting API. I have successfully obtained the necessary OAuth 2 token and even receive a 200 response when querying the API. However, instea ...

The GET request in NSURLConnection terminates prematurely

I have been developing a method to streamline my URL connections for sending and receiving JSON data from a server. It is functioning properly with POST requests, but encountering issues with GET requests. My setup involves a Google App Engine server, wher ...

Having trouble pinpointing the issue with my JavaScript code

Recently, I've been experimenting with JavaScript code snippets and after making some edits to one particular sample, I can't seem to figure out why it's not working. Everything appears correct to me, but here is the code snippet (JSFiddle) ...

What is the process for uploading an image encoded in base64 through .ajax?

I am currently working with JavaScript code that successfully uploads an image to a server using an AJAX call. Here is the ajax call snippet that is functioning properly. $.ajax({ url: 'https://api.projectoxford.ai/vision/v1/analyses?', ...

Utilizing jQuery AJAX, we are able to seamlessly showcase information fetched from the database in CodeIgniter, moving it

I'm facing an issue with fetching data from the database using jQuery AJAX with json datatype. I've tried using JSON.parse in jQuery but it didn't seem to work. When I log data, all I see is an object returned, containing the data from the d ...

Can one extract a property from an object and assign it to a property on the constructor?

Currently working with TypeScript, I am looking to destructure properties from an object. The challenge lies in the fact that I need to assign it to a property on the constructor of the class: var someData = [{title: 'some title', desc: 'so ...