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

Arranging pre-selected checkboxes in MUI Datatable

I noticed that the checked data is appearing at the top of MUI data tables without any sorting. Checkbox In this image you can see that all the checked boxes are mixed up without any order. I would like to have all the checked rows displayed together and ...

The property of undefined map cannot be read

import React from 'react'; import { Card, Text } from "react-native-paper"; import { SafeAreaView, } from "react-native"; class HackerNewsClone extends React.Component { constructor(props) { super(props); this.sta ...

Node.js server-side storage solutions for integration with Dojo

Currently, I am working on developing a new application. It is my first time creating a single-page AJAX application that solely relies on Restful stores. So far, I have written some code and executed simple queries using the GET method. To maintain organ ...

Is it possible to identify images within a message sent by users to the server and provide a response accordingly

Apologies for my not-so-great English I am currently learning JavaScript and I am trying to detect an image in a message sent by users from the server, and reply with that image embedded in a bot message. However, message.content is not working for this p ...

Transform specific data binding values into JSON format using Knockout.js

Just dipping my toes into the world of knockoutjs, I've got this viewmodel set up: var Testing = function(){ this.Username = ko.observable(""); this.Password = ko.observable(""); this.email = ko.observable(""); } I'm tasked with ...

Node.js Azure Functions: My route parameters are not included in context.bindingData as the documentation implies

I'm currently working on a function that needs to retrieve 2 route parameters (first required, second optional), but I'm encountering some difficulties despite following the Documentation provided. I am specifically referring to this set of inst ...

Utilize Vue: Bring in the router within a helper class and navigate to a specific

I'm new to utilizing Vue, and I am currently attempting to import my existing router instance into a JavaScript class where I manage the Authentication. This is the content of my router file: import Vue from 'vue'; import Router from &apos ...

AngularJS - Introducing blurred delay

Here is the code snippet I am working with: <div class="staff"> <input ng-model="user" ng-focus="isFocused = true;" ng-blur="isFocused = false;/> <div class="matches" ng-if="isFocused"> <div ...

Refresh the page without reloading to update the value of a dynamically created object

Maybe this question seems silly (but remember, there are no stupid questions).. but here it goes. Let me explain what I'm working on: 1) The user logs into a page and the first thing that happens is that a list of objects from a MySQL database is fet ...

What are some strategies for extracting additional information from a JSON file that spans multiple pages?

I am trying to figure out how to display a list of all characters when using a search bar. Currently, I can filter characters but the JSON data has multiple pages which limits the number of characters displayed. I have implemented logic to move to the next ...

Retrieve information from the var variable following the deserialization of JSON

I am encountering an issue while attempting to deserialize a JSON string into an object. Below is the method that I have employed: var dict = new JavaScriptSerializer().Deserialize<Dictionary<string, object>>(json1); var pc= dict["getresults"] ...

What is the best way to mix up the middle letters within certain positions of a word?

Here is what I have managed to achieve so far: mounted() { const randomVariants = [...Array(3)].map(() => this.baseWord .split('') .sort(() => 0.5 - Math.random()) .join('') ) const variantsWithoutIniti ...

The screen-responsive navigation bar is experiencing functionality issues

I am facing an issue with my navigation bar on both desktop and mobile. When I maximize the window while the mobile navbar is open, it disappears as expected but the desktop navbar does not appear. I am using a bootstrap template and I am unsure if solving ...

Displaying two div elements horizontally using Material-UI

Can the styled utility from mui be used to align 2 divs side by side? The documentation examples don't seem to cover this specific scenario. While answers on this and this address it, they don't relate to mui / material ui. I attempted the fol ...

What purpose does the <noscript> tag serve in React?

Recently delving into the world of React, I've been working on a simple application by following this tutorial: https://reactjs.org/tutorial/tutorial.html. I've started modifying the code to suit my own project. While inspecting my HTML, I notic ...

What is the best way to refresh a page after rotating the web page?

Struggling with a challenge in Next JS - can't seem to figure out how to automatically refresh the page when it rotates const app () => { useEffect(()=>{ window.addEventListener("orientationchange", function() { window.locati ...

Is there a way for me to implement this code to achieve the functionality shown in the demo link

$('select').change(function() { var sum = 0; var sum = parseInt($('select[name="bathrooms"]').val() * 25) + parseInt($('select[name="bedrooms"]').val() * 8); $("#sum").html(sum); }); <script src="https://ajax.googleap ...

Use CSS specifically for codeigniter viewpage

I am unsure if it is possible, but I would like to load CSS and JavaScript within a view page instead of on include.php. Currently, the CSS file is loading on include.php and it is working correctly. What I want to achieve now is to load it directly inside ...

Direct a flow to an unknown destination

What I am trying to achieve is writing a stream of data to nowhere without interrupting it. The following code snippet writes the data to a file, which maintains the connection while the stream is active. request .get(href) .on('response', func ...

Steps for running the function saved in variable `x`, with the value `function(){alert('a')}` assigned to it

How can I achieve this using javascript? var x = 'function(){ ... }' x = x.toFunction(); x(); Previously, I used var x = '...'; eval(x), but I have learned that this method is inefficient and slow. To provide some context, my goal is ...