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

If I use npm install to update my packages, could that cause any conflicts with the code on the remote server?

As I navigate through the numerous issues, I stumbled upon the command npm ci that is supposed to not change the package-lock.json file. However, when I attempt to run npm ci, it fails: ERR! cipm can only install packages when your package.json and package ...

javascriptnpm

How can nested dictionaries be created in Python from a JSON file with dotted notation?

Here is an example of a JSON file structure: { "x": 0.123456789, "x.y": 0.987654321, "x.z": 0.567890123 } Let's call this dictionary "data" I am looking to access the values in the following manner: if " ...

pythonjsondictionary

Upon refreshing the page, nested React routes may fail to display

When I navigate to the main routes and their nested routes, everything works fine. However, I encounter an issue specifically with the nested routes like /register. When I try to refresh the page, it comes up blank with no errors in the console. The main r ...

javascriptreactjsexpresswebpackreact-router-dom

Setting up a Variable with an Object Attribute in Angular

I am attempting to create a variable that will set a specific property of an object retrieved through the get method. While using console.log in the subscribe function, I am able to retrieve the entire array value. However, as a beginner, I am struggling ...

javascriptangulartypescript

Accessing JavaScript results in PHP

Hello everyone! I am working on creating a dropdown menu for selecting time using JavaScript to get the computer's current time. My goal is to have an output that automatically selects the option in the dropdown if it matches the computer's time. ...

phpjavascripthtml

What is the best way to utilize useClient in the code of my Next.js project?

I've been attempting to execute the code attached below, but I keep encountering an error stating that a component being imported requires useState and should only be used in a Client Component. However, none of its parent components are marked with " ...

javascriptreactjsnext.jsreact-hooks

"Can someone guide me on where to place the JavaScript code within this Bootstrap snippet when working with CakePHP

I'm currently delving into CakePHP and am eager to incorporate this Bootstrap code snippet from onto my website. I've successfully added the HTML to the .ctp file in the Pages directory and styled it with custom.less, but I hit a roadblock when ...

javascripttwitter-bootstrapcakephp

Guide on setting an attribute value with JavaScriptExecutor in Selenium WebDriver

I am attempting to set an attribute value for all instances of the same type of <img> tag on My website, for example: <img src="images/temp/advertisement.png"> and I want to set style="display: none" so that I can hide them. I have tried the ...

javascriptjavaseleniumselenium-webdriver

Here is a compilation of Json data entries

Within my collection of JSON records, there are various entries such as: [{“age”:27,”lastname”:”Robert “,”firstName”:”Rob”,”company”:”abc”}, {“age”:27,”lastname”:”Ashok “,”firstName”:”Bob”,”company”:” ...

javajsonspring-boot

Dynamically load scripts in angularJs

Having multiple libraries and dependencies in my angularjs application is posing a challenge as I want to load them all using just one script, given that three apps are utilizing these dependencies. Currently, I have this custom script: var initDependenci ...

javascriptangularjs

Sending PDF file to client's request using PDFKIT and Strapi (Koa) via HTTP response

My goal is to send a PDF file as a response to a GET request on my Strapi endpoint. The current Strapi controller, which uses Koa, is structured like this: const PDFDocument = require("pdfkit"); module.exports = { async printOne(ctx) { const doc = ...

javascriptnode.jskoastrapipdfkit

JavaScript - Deleting the last element of an array

I have currently integrated a third-party API to visualize data using Highcharts. This external API provides data specific to the current month, such as March, April, May, and so on. graphArrOne contains an array with 251 elements. graphArrTwo contains ...

javascriptarrays

Revise the reply within ExpressJS

I need help with editing the response to a request in Express. When the request is made via XHR, I want to encapsulate the body inside a JavaScript object. This way, different parts of the page can be accessed individually within the JavaScript object, suc ...

javascriptnode.jsexpressmiddleware

No data is being retrieved by SWR

I'm struggling to make SWR work in my code. Despite trying multiple examples, I can't seem to get it functioning properly. It's frustrating because the code looks fine and should work. I feel like I must be missing something simple. Current ...

javascriptnext.jsswr

Ways to maintain uniform size in displaying images even when they are of different dimensions

Within my web application, administrators have the ability to upload various images that will be displayed on the site. The challenge arises from the fact that these images come in different sizes and dimensions. However, it is important that all users w ...

angularjsimagecss

Vue.js Class-based Decorator not Transmitting Event from Child to Parent Component

I'm fairly new to working with Vue.js and I've encountered an issue with the child to parent emit functionality. Essentially, I have a Box component that contains a Search component. In the Search component, I attempted the following: @Watch("se ...

javascriptvue.js

Combining strings within an HTML attribute

Within my custom directive, the template looks similar to this: template:'<li ui-sref-active="active" ng-class="\'has\'+ getSubClassString(item)">'+ '<a ui-sref="{{item.state}}">' + ...

angularjs

transferring a JavaScript variable to PHP upon submitting a form

This question arises after my previous inquiry on the topic of counting the rows in an HTML table using PHP. Since I didn't find a solution that worked for me, I am exploring new methods but struggling with the implementation. My approach involves ass ...

phpjavascriptajaxhtmlforms

Increasing the ID of a select input using Jquery

Is there a way to modify the identification of my select field? This select option is dynamically created using PHP. The select input can be accessed through var indirectSelect Despite its simplicity, I am facing difficulty in changing it. I attempted th ...

javascriptjquery

What could be the reason for the "begin" script failing to execute?

I have a simple node and express application that works as expected, but I encounter an issue when trying to run the server from the script. When my script is set to "start", running the command simply opens my cmd. However, if my script is set to any oth ...

javascriptnode.jsexpressnpm