How to retrieve the index of an object in Angular using ng-repeat

I am working with an object structured like:

    {
      "2015": ["path",0, 0],
      "2016": ["path",0, 0],
      "2017": ["path",0, 0],
      "2018": ["path",0, 0],
    }

My goal is to display this information in a grid format using ng-repeat. The desired layout is as follows:

    <div class = "row">
      <div class = "col-sm-4"></div>
      <div class = "col-sm-4"></div>
      <div class = "col-sm-4"></div>
    </div>

I have attempted the following code snippet:

    <div ng-repeat="(exam, data) in imageJSON">
      <div class="row grid-divider" ng-if="$index%3 == 0">
        <div class="col-sm-3">{{exam}} {{index}}
        <div class="col-sm-3">{{exam}} {{index + 1}}
        <div class="col-sm-3">{{exam}} {{index + 2}}
      </div>
    </div>

I aim for the output to resemble a table-like structure in which each item is displayed within a bootstrap grid. How can I achieve this by iterating over the object and utilizing their respective indexes?

javascriptangularjsgridviewangularjs-ng-repeat

Answer №2

Revised for Object - To retrieve the index, utilize the $index service in angularjs as shown below:

<div>
  <div ng-repeat="(key, prop) in names track by key">
    <span>{{ $index + 1 }}</span>
    <span>{{ key }}</span>
    <span>{{names[key][0]}}</span>
  </div>
</div>

Explore this revised plunk here:

Feel free to check it out and let me know if you have any questions!

Answer №3

If my interpretation is correct, this solution should do the trick:

<div class="table">
  <div class="row" ng-repeat="(year, array) in object">
    <div class="col-sm-4 row-header">{{ year }}</div>
    <div class="col-sm-4 row-items" ng-repeat="item in array">{{ item }}</div>
  </div>
</div>

OR

<div class="table">
  <div class="row" ng-repeat="(year, array) in object">
    <div class="col-sm-4 row-items" ng-repeat="item in array">{{ year }} {{ item }}</div>
  </div>
</div>

depending on your intention.

Edit

HTML Markup:

<table>
  <tr ng-repeat="row in imageJSON">
    <td ng-repeat="item in row">
      {{ item.exam }}
      <br>{{ item.data }}
    </td>
  </tr>
</table>

AngularJS Logic:

var CELLS_IN_ROW = 3;
var imageJSON = {
  "2015": ["path",0, 0],
  "2016": ["path",0, 0],
  "2017": ["path",0, 0],
  "2018": ["path",0, 0]
};

var array = [];
var count = 0;

angular.forEach(imageJSON, function (value, key) {
  array[Math.floor(count / CELLS_IN_ROW)] = array[Math.floor(count / 3)] || [];
  array[Math.floor(count / CELLS_IN_ROW)].push({
    exam: key,
    data: value[0]
  });
  count++;
});

$scope.imageJSON = array;

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

Using a variable to replace the filter expression in AngularJS

I am facing an issue with a table object where I need to filter out a specific "index" row using the filter function. The code snippet below demonstrates my attempt, but unfortunately, $controller.expression is not functioning correctly. IF `$controller.e ...

angularjsfilter

In JavaScript, an HTTP request file includes a JavaScript variable

I am currently working on a Node.js project that involves making an HTTP request to fetch a JavaScript file. For example, let's say we have a file named a.js: var a = 'i am a.js'; var b = 'please convert me to js'; Here is the a ...

javascriptnode.jsexpressaxios

Seeking assistance with producing results

Is there someone who can provide an answer? What will be the output of the code snippet below when logged to the console and why? (function(){ var a = b = 3; })(); console.log("Is 'a' defined? " + (typeof a !== 'u ...

javascripttypescript

Is there a similar alternative to ignoring in webpack or browserify?

My code works perfectly in the browser after ignoring two packages with browserify: browserify files.js -i fs-extra -i request --standalone files > files.browserify.js. However, when I try to use webpack instead, the code throws errors about missing mod ...

javascriptnode.jsnpmwebpackbrowserify

Unable to load JavaScript files on the client side

Currently, I am in the process of learning how to develop an NPM package. Initially, I assumed it would be a simple task: create JS files with object literals, export modules, and then have users require the file and utilize the object like objectname.meth ...

javascripthtmlnpm

Connect CSS Transition to a click action

Below is the code snippet. When you click on the div, it creates a folding effect to the left. You can view it here. I want to link this effect to the arrows I use for sliding back and forth. For example: The left arrow should move the slide to the l ...

javascriptjqueryhtmlcss

Tips on sending the event object as the second parameter to a callBack function

I am looking to enhance a callback function by including the execution of event.stopPropagation() on the specific div element where it is called, alongside updating the state. QueryInput represents a custom input div element for adding text provided by the ...

javascriptnode.jsreactjsreact-hooks

Learn how to create a "generated" texture coordinate in three.js similar to how it is done in Blender Cycles

How can I properly display a texture on a cylinder object using THREE.js without distortion? Currently, the texture appears stretched along the edges of the cylinder as shown here: https://i.sstatic.net/O2YFr.png This issue is based on the texture provide ...

javascriptthree.js

Automatically open the first panel of the Jquery Accordion

Is there a way to automatically have the first panel in my JQuery accordion open when all panels are initially closed? Here is the HTML code for my accordion: <div class="accordionx"> <div class="acitemx"> <h3>First Panel</h3> ...

javascriptjqueryhtmlaccordion

Leveraging the AngularJS model within a tabset framework

I am working with a tabset that has two options and I am binding data from a JSON file using Angular. What I would like to do is log the name of the tab that I click on to the console. I thought about using a "model" for this, but I am not sure if that is ...

javascriptangularjs

JavaScript's power lies in its ability to create dynamic regular expressions

Currently, I am working on code that requires matching a specific number of digits after a decimal point. Here is what I have so far: var input = getValueFromUser(); var count = getCount(); var x = Number(input.toString().match(/^\d+(?:\.\d ...

javascriptregex

`The functionalities of classList.add and classList.remove aren't behaving as anticipated.`

I'm currently working on a list of items (ul, li) that have a class applied to them which adds a left border and bold highlight when clicked. My goal is to reset the style of the previously clicked item back to its original state when a new item is c ...

javascripthtmlcss

Validating properties of a class using Typescript's Class-Validator

I tried using the class-validator decorator library for validation processes on my sample project. However, it doesn't seem to be working as expected. The sample project aims to create projects based on user inputs, and I'm attempting to validate ...

javascripttypescriptclass-validatortypescript-decorator

Guide To Implementing HTML Geolocation API in Nativescript Vue Using WebView

I am completely new to nativescript-vue and I have been experimenting with my codes on stackblitz. I decided to use a webview to load an HTML page, but unfortunately, the HTML geolocation API is not functioning correctly. Can anyone provide some guidance o ...

javascriptvue.jsnativescript-vue

I'm in the process of designing a Todo list platform, but I've hit a roadblock trying to figure out the best way to showcase and delete tasks

Having some trouble with creating an li element even after following the necessary steps. Any guidance and explanation would be greatly appreciated. Thank you Managing HTML and CSS is fine, but when it comes to JavaScript, I always seem to struggle. I und ...

javascripthtml

Disordered dropdown display

I've implemented a class that conceals the 2nd and 3rd dropdown options until there's a click or change in the 1st selection. Current Behavior After choosing "regular" from the dropdown, the execution of $(".dropdown").removeClass(&quo ...

javascriptjquery

What are some effective techniques for implementing async/await within onAuthStateChanged() of Firebase?

Seeking to enhance my Firebase authentication process when using async/await in React Native. I am inquiring about the optimal method to utilize async/await within firebase.auth().onAuthStateChanged(). Currently, I have implemented it by creating an async ...

javascriptreactjsfirebaseasync-awaitfirebase-authentication

Testing the karma of an Angular directive that involves injecting the window object

I am working on creating a test for an angularjs directive that calculates the height of an element in comparison to the height of the window. The directive follows the google closure style, which is new to me, so any suggestions for improvement are welcom ...

angularjsjasminekarma-runnergoogle-closure-compilerkarma-jasmine

The function addClass() seems to be malfunctioning

I'm currently experimenting with creating a scrolling cursor effect on a string of text. The goal is to make it look like the text has been highlighted with a blinking cursor, similar to what you see in your browser's search bar. window.setInter ...

javascriptjquerycss

Ignoring break lines in Javascript using regular expressionsKeeping break lines at bay with regular expressions

I need help modifying a regular expression to prevent users from inserting special characters like $ # ?. The current expression I am using is /^((?![#$%^*<>{}!=|/?])\s.)*$/ When I apply this expression on a textarea, Angular throws an error w ...

javascriptangularregex