Incrementing values in ng-repeat object automatically

My project involves extracting game information from mlb.com and utilizing angularjs along with the ng-repeat directive to display it. A sample of the JSON feed is shown below.

{
 "data": {
    "games": {
        "next_day_date": "2017-08-19",
        "modified_date": "2017-08-18T16:57:16Z",
        "month": "08",
        "year": "2017",
        "game": {
            "0": [{
                "away_team_name": "CUBS"

            }, {
                "home_team_name": "INDIANS"

            }],
            "1": [{
                "away_team_name": "CUBS"

            }, {
                "home_team_name": "INDIANS"

            }]
        },
        "day": "18"
    }
}

While I have successfully displayed the data for one game, I am currently facing a limitation in displaying only a single game as per my current implementation. The html snippet is provided below:

<div class="card mb-3" ng-repeat="x in scoreboard" ng-if="$index > 1">
  <div class="card-header" align="center">
   {{x.games.game[0].away_team_name}} ({{x.games.game[0].away_win}}-{{x.games.game[0].away_loss}}) At {{x.games.game[0].home_team_name}} ({{x.games.game[0].home_win}}-{{x.games.game[0].home_loss}})<br>
      <small>{{x.games.game[0].time}}</small>
  </div>
  <div class="card-block"></div>
</div>

I understand that [0] corresponds to the game ID '0' in the JSON feed. However, I am seeking a solution to dynamically increment this number within {{x.games.game[0].time}} to iterate through all games instead of manually specifying each game individually as depicted below:

<div class="card mb-3" ng-repeat="x in scoreboard" ng-if="$index > 1">
  <div class="card-header" align="center">
   {{x.games.game[0].away_team_name}} ({{x.games.game[0].away_win}}-{{x.games.game[0].away_loss}}) At {{x.games.game[0].home_team_name}} ({{x.games.game[0].home_win}}-{{x.games.game[0].home_loss}})<br>
      <small>{{x.games.game[0].time}}</small>
  </div>
  <div class="card-block"></div>
</div>
<div class="card mb-3" ng-repeat="x in scoreboard" ng-if="$index > 1">
  <div class="card-header" align="center">
   {{x.games.game[1].away_team_name}} ({{x.games.game[1].away_win}}-{{x.games.game[1].away_loss}}) At {{x.games.game[1].home_team_name}} ({{x.games.game[1].home_win}}-{{x.games.game[1].home_loss}})<br>
      <small>{{x.games.game[1].time}}</small>
  </div>
  <div class="card-block"></div>
</div>

I attempted using 

{{x.games.game[$index + 1].time}}
, but it still only displays a single game.

If you have any suggestions or insights on how to tackle this challenge, your assistance would be greatly appreciated!

javascriptangularjsjson

Answer №1

I made a modification to my $scope in the controller where

<div class="card mb-3" ng-repeat="x in scoreboard track by $index" ng-if="$index > 1">
  <div class="card-header" align="center">{{x.away_team_name}} </div>
</div>

This adjustment is functioning perfectly.

Answer №2

Here are a few issues that need to be addressed:

  • Mistaken iteration: The loop should iterate over scoreboard.games.game rather than just scoreboard.
  • Incorrect syntax usage: The x in list syntax is meant for arrays, not Object literals like scoreboard and scoreboard.games.game.

To iterate over Object literals in ng-repeat, the correct syntax is (key, value) in object, as specified in the documentation.

To rectify these problems, make sure to use the correct object and syntax when iterating, as shown below:

<div class="card mb-3" ng-if="key > 1"
     ng-repeat="(key, game) in scoreboard.games.game">

   <div class="card-header" align="center">
      {{ game.away_team_name }} 
      ({{ game.away_win }}-{{ game.away_loss }}) At 
      {{ game.home_team_name }} 
      ({{ game.home_win }}-{{ game.home_loss }})<br />
      <small>{{ game.time }}</small>
   </div>
   <div class="card-block"></div>
</div>

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

Utilizing Jquery Ajax JSON to send information from a database

I have recently revisited an old project and I am seeking advice on some outdated code. Three years ago, I utilized the following code to transfer data from a database to JavaScript arrays using PHP: echo json_encode($result_array); accompanied by JQuery ...

phpjqueryjsonajax

Tips for configuring a schema within the `node_modules` directory using `$schema`

Currently developing an npm package inclusive of a schema file named set.schema.json. My query revolves around how I can designate this as the $schema for a JSON file within a separate project that has this particular package integrated as a dependency. ...

jsonnpmurijsonschema

Tips for Transferring Values Between Multiple Dropdown Menus with jQuery

Hello there, can anyone guide me on how to transfer selected items from one multiple combo box to another multi-combo box? I would really appreciate it if someone could provide an example for this scenario. <HTML> <HEAD> <TITLE></T ...

javascriptjqueryhtml

Utilizing a Static Image Path Prop in React JS: A Step-by-Step Guide

My Main Component import React from "react"; import TopModal from "./components/topModal"; // Passing productImage to the Child Component import productImage from "../../../../../../assets/images/juices.jpg"; import { makeS ...

javascriptreactjsmaterial-ui

The event SelectedIndexChanged is not triggering as expected on dropdown lists that are created dynamically

My Telerik RadComboBox triggers Javascript on change to fetch data from the database via AJAX and populate a second dropdown list. I need to fill text boxes based on the selection of the second dropdownlist. The code for the two dropdownlists is as follows ...

javascriptjqueryajaxvb.net

The combination of Material UI custom TextField and Yup does not seem to be functioning properly

I am facing an issue with integrating my custom TextField into my RegisterForm along with Yup validation. Whenever I use the custom TextField, I encounter a message "⚠ Champ obligatoire" after clicking on Submit, which is not the case when using a simple ...

javascriptreactjsmaterial-uitextfieldyup

Lacking the knowledge on establishing range for amCharts

I am currently utilizing the amcharts plugin to generate visually appealing charts. While browsing through its features, I came across a few interesting ways to add ranges. However, I noticed that the structure of the code for these charts is different fro ...

javascriptamcharts

The context of the selector causes an error to be thrown

Why does jQuery throw an exception when I attempt to select an element with context? The code is as follows: jQuery('b', "DAS<br/><br/><b>ID</b> = 02<br/><b>NAMA DAS</b> = CITARUM<br/><b>LUAS ...

javascriptjquery

Identifying Changes with jQuery Event Listeners

I am trying to run some javascript code that is in the "onchange" attribute of an HTML element. For example: <input id="el" type="text" onchange="alert('test');" value="" /> Instead of using the onchange attribute, I want to trigger the e ...

javascriptjqueryonchange

React and Axios: Overcoming CORS Policy to Connect with Java/SpringBoot REST Backend Service

As a first-time user of Axios to connect to my Java/SpringBoot Rest GET service on localhost:8080, I am using React and node.js. My goal is to successfully retrieve the REST data but encountered the following error: Failed to compile src\App.js Lin ...

javascriptreactjsaxioscors

Setting a cookie using express.js with a 'j' prefix

Trying to establish a cookie using res.cookie as shown below: res.cookie('userId',req.user._id); //cookie set here console.log(req.user._id); //correct value returned, eg abc However, I'm noticing j:"abc" in my cookie. What could be the re ...

javascriptnode.jsexpress

Effective communication among sibling components in Vue.js

Interaction between parent and child components can be easily achieved using $broadcast and $dispatch However, I'm currently faced with a challenge regarding communication between sibling components. My current approach involves triggering a $dispatc ...

javascriptvue.js

Struggling with rendering an HTML element utilizing jQuery's attribute functionality, encountering issues exclusively in Internet Explorer version

I need assistance with generating and inserting an HTML element using jQuery. In my code, I am including a class attribute for the element as shown below: jQuery('<li></li>', { class: "myClass" }); However, when testing in IE ...

javascriptjqueryhtml

Updating Angular Material theme variables during the build processIs this okay?

How can I easily customize the primary color of my angular 6 application to be different for development and production builds? Is there a simple solution to automatically change the primary color based on the build? ...

javascriptangularsassangular6angular-material-6

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

I am currently working on a one-page website and I would like to include a map as a background behind the "contact" section. The map can be set to float, draggable, or positioned at the back. I have experience using both the Google Maps API and LeafletJS, ...

javascripthtmlcssgoogle-mapsleaflet

Tips for hiding a soft keyboard with jQuery

Here is a text button: <input type="text" class="field" id="something" name="something" placeholder="text" autofocus /> I want to prevent the android soft keyboard from popping up and keep the focus on this field. I only want to do this for this ...

javascriptandroidjqueryhtml

Ensure modifications to a variable are restricted within an if statement

I am struggling to find a way to globally change a variable within an if statement and ensure that the modifications persist. User input: !modify Bye var X = "Hello" if (msg.content.includes ('!modify')) { X = msg.content.replace('!modi ...

javascriptnode.jsbots

When utilizing the `express.static(__dirname)` function in Node.js with Express, the visitor may be directed to an incorrect HTML page

My website consists of a login page named login.html and an index page named index.html. I want to implement authentication so that only logged in users can access the index page. I have not set up the post method on the login HTML page. Therefore, I have ...

javascripthtmlnode.jsexpress

Retrieving data via AJAX from an SD card

I am using the Atmel SAM4E-EK microcontroller as a server to host a webpage and send data over HTTP protocol. I am currently facing an issue with the download function while trying to download a file from my sd_card, which will not be larger than 512MB. s ...

javascripthtmlcajaxhttp

What is causing the undefined value to appear?

I'm puzzled as to why the term "element" is coming up as undefined. Even after running debug, I couldn't pinpoint the cause of this issue. Does anyone have any insights on what might be going wrong here? Below is the snippet of my code: const ...

javascriptmysqlexpressknex.js