What is the method for showcasing an array using AngularJs in my specific scenario?

I have an array in JavaScript structured like this:

var data = [
   2005 = [
       Jan = [0,1,2,3,5...],
       Feb = [0,1,2,3,5...],
       ...more
   ], 
   2006 = [
       Jan = [0,1,2,3,5...],
       Feb = [0,1,2,3,5...],
       ...more
   ], 
   2007 = [
       Jan = [0,1,2,3,5...],
       Feb = [0,1,2,3,5...],
       ...more
   ]
]

$scope.data = data;

I am attempting to create a calendar using ng-repeat

<div ng-repeat = "year in data">
    {{year}}
</div>

No output is being generated and I encountered an error message:

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys.
Repeater: year in data, Duplicate key: undefined:undefined, Duplicate value: undefined

I am struggling to figure out what went wrong and feeling overwhelmed. Any assistance would be greatly appreciated. Thank you!

javascriptangularjs

Answer №1

To ensure proper binding between year entries, you will need a shared property that acts as the identifier, such as the year or month value, and another property to store the corresponding array of values. Take a look at the example provided below.

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

myApp.controller('MyCtrl', function ($scope) {
    $scope.cal = [
        {
            value: 2005,
            month:
            [
                {
                    value: 'Jan',
                    days: [0, 1, 2, 3]
                },
                {
                    value: 'Feb',
                    days: [0, 1, 2, 3]
                }
            ]
        },
        {
            value: 2006,
            month:
            [
                {
                    value: 'Jan',
                    days: [0, 1, 3, 7]
                },
                {
                    value: 'Feb',
                    days: [0, 1, 2, 3]
                }
            ]
        }
    ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
      <div ng-repeat = "year in cal">
          Year: {{year.value}}
          <div ng-repeat = "month in year.month">
              Month: {{month.value}}
              <div ng-repeat = "day in month.days">
                Day: {{day}}
              </div>
          </div>
      </div>
    </div>
</div>

Answer №2

Feel free to view the functional plunker here

In order to address the syntax issues with the JSON object, the layout should resemble the following structure:

    [
        {
           yearNum: 2005,
           months: [
                        {Jan : [0,1,2,3,5]},
                        {Feb : [0,1,2,3,5]},
                      ]
        }, 
        {
           yearNum: 2006,
           months: [
                        {Jan : [0,1,2,3,5]},
                        {Feb : [0,1,2,3,5]},
                      ]
        }
    ]

Answer №3

Consider organizing your array in the following manner.

let myArray = [
   { 2005: [
      { Jan: [7, 12, 23, 35, 47] },
      { Feb: [8, 13, 24, 36, 48] },
   ]
}];

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

What is the best way to link CSS files from libraries that are downloaded using npm?

For instance, let's say I installed a package: npm install --save package and it gets saved in ./node_modules/package/ Inside that folder, there might be a directory named styles and within that directory, you could find style.css. How can I link ...

javascripthtmlcssnode.jsnpm

Tips for managing the onloadedmetadata event

If a video file cannot be played by the browser due to format or codec issues, I want to notify the user about it. When the browser is unable to play a video (because of unsupported format or codec), the onloadedmetadata event does not occur. I have some ...

javascripthtmlvideodom-events

NextJS rendering props in a loop

I need help figuring out how to render props in a loop using the forEach function. This is my current code: {console.log('the catalog inside the component ----->', catalog)} {Object.keys(catalog).forEach(key => { return ( <d ...

javascriptnext.js

Ways to Increase jQuery Element ID

I have several instances of jPlayer (a jQuery audio player) set up: jPlayer1, jPlayer2, jPlayer3, jPlayer4. Each one is initialized and preloaded with audio files. The following function will loop through an existing array and attach a method to play the ...

javascriptjqueryincrement

What is the impact of util.inherits on the prototype chain in JavaScript?

Exploring this particular design: Function ConstrA () { EventEmitter.call(this); } util.inherits(ConstrA, EventEmitter); var obj = new ConstrA(); If util.inherits is omitted, ConstrA and obj will each establish their own distinct prototype chain. T ...

javascriptnode.jsinheritanceprototype

Several components utilizing a popup module

I have created a modal popup example where scrolling is disabled in the background but enabled within the pop-up itself. Check out my demo here: View Demo My challenge lies in implementing a grid of images on the website: Take a look at the type of grid ...

javascriptjquerycsshtml

Updating the parameters when clicking on each pagination button: A guide

Does anyone have advice on implementing pagination? I am currently working on loading a datatable with a few records initially. Once the page is loaded, I want to be able to click on pagination buttons like next or any pagination buttons to display a new s ...

javascriptangulartypescriptdatatablesangular-datatables

Monitor changes in the ID attribute and ng-model using $watchCollection

My goal is to utilize the $watchCollection feature in my directive to monitor two specific elements. The first element is the ng-model. The second element is the id attribute. I have successfully implemented separate watches for each of them. retur ...

javascriptangularjsangularjs-directiveangular-directive

Discover the method for two form fields to submit data to a distant page, located two pages away

Currently, I'm trying to figure out the best approach for having two fields submitted to a page that is located two pages away. To provide more context, let me elaborate on the situation. On the initial page, there will be two fields - workshop title ...

javascriptphpjqueryhtmlforms

"Challenges Arising in Deciphering a Basic JSON Array

After countless attempts, I am still struggling to solve this issue. My PHP code is functioning properly, as it returns the expected data when "Grove Bow" is selected from the dropdown menu: [{"wtype":"Grove Bow","was":"1.55","wcc":"5","wbdmin":"12","wbdm ...

phpjavascriptjqueryhtml

Understanding the process of verifying signatures with Cloud KMS

I've been struggling to confirm the validity of a signature generated using Google's cloud KMS, as I'm consistently receiving invalid responses. Here's my approach to testing it: const versionName = client.cryptoKeyVersionPath( p ...

javascriptdigital-signaturesha256node-cryptogoogle-cloud-kms

The important role of max and min attributes in bootstrap-ui timepicker

Looking to integrate the timepicker directive from bootstrap-ui in my project. I am having trouble understanding how to utilize the min and max attributes effectively. I attempted to set a time range from 0 to 1440 as follows: <uib-timepicker ng-model ...

angularjsangular-uiangular-ui-bootstrap

Should I use Mongoose schema methods or prototype functions?

I am curious about the functionality of functions and ES6 classes in relation to new objects created from a mongoose schema. I wonder if the functions are duplicated for each new object and what the best approach is when utilizing ES6 classes. To illustrat ...

javascriptnode.jsmongoose-schema

Iterate through a intricate array of JavaScript objects to extract their values

Looking for ways to extract total calorie and nutrition information from a large document displaying the nutritional data of a simulated recipe. Please review the codesandbox json file first. The objective is to capture the total calories and nutritive c ...

javascriptjsondictionaryobject

Tips for preventing the ng-click event of a table row from being triggered when you specifically want to activate the ng-click event of a checkbox

So, I've got this situation where when clicking on a Table Row, it opens a modal thanks to ng-click. <tr ng-repeat="cpPortfolioItem in cpPortfolioTitles" ng-click="viewIndividualDetailsByTitle(cpPortfolioItem)"> But now, there&apos ...

javascriptjqueryhtmlangularjscheckbox

The fixed position setting does not anchor the elements to the bottom of a container

When applying the following styles: #fullpage-menu > .gradient { position: fixed; bottom: 0; left: 0; width: 100%; height: 0.3rem; } To the element with ID #fullpage-menu, which is styled as follows: #fullpage-menu { height: 100 ...

javascripthtmlcss

Utilizing JSON strings within an onclick function

Hey there, currently I am working on sending an encoded JSON through the onclick attribute. However, I am facing a challenge because the JSON contains strings with a lot of apostrophes and quotes which end up closing the quotes in the onclick attribute. Up ...

javascriptjson

JavaScript: void(0), Internet Explorer 6, and SWFAddress are all important components

Hello there, We are on the verge of launching a secure website (regrettably, we cannot provide the URL) and have come across a rather obscure bug in IE6 that I am hoping someone may have experienced or could shed some light on. This issue only arises when ...

javascriptinternet-explorer-6swfaddress

Deploy a web application using JavaScript and HTML to Heroku platform

I noticed that when I visit the Heroku dashboard, there is an option to create an app using Node.js, but not JavaScript. This raises a question for me - if I want to upload my locally created JavaScript/HTML5 app to Heroku, do I need to select Node.js or ...

javascriptnode.jsheroku

Is there a way to integrate jQuery and Javascript into a Firefox add-on?

Having trouble creating a new element on the page? After checking both the page and domain during onload, it seems that everything is in order. But how can you successfully create a new element in the correct window page? window.addEventListener("load", f ...

javascriptjqueryfirefox-addon