Tips for organizing and showcasing data in AngularJS

Recently, I developed a scope function that looks like this:

$scope.sample = [
   {'SUPNAME':'AAA','SUPCODE':'22671','SLIPNO':'18384','DESG':'1','iv':'1'},
   {'SUPNAME':'AAA','SUPCODE':'22671','SLIPNO':'18384','DESG':'2','iv':'2'},
   {'SUPNAME':'AAA','SUPCODE':'22671','SLIPNO':'18384','DESG':'3','iv':'3'},
   {'SUPNAME':'BBB','SUPCODE':'24603','SLIPNO':'26714','DESG':'1','iv':'4'},
   {'SUPNAME':'BBB','SUPCODE':'24603','SLIPNO':'26714','DESG':'2','iv':'5'},
   {'SUPNAME':'BBB','SUPCODE':'24603','SLIPNO':'26714','DESG':'3','iv':'6'},
]

In order to display the data grouped by the same SUPNAME, SUPCODE, SLIPNO, it should look something like this.

SUPNAME:AAA  SUPCODE=22671
DESG 1  DESG2 DESG 3


SUPNAME:BBB   SUPCODE=24603
DESG 1  DESG2 DESG 3

I am now wondering how to structure the ng-repeat in order to achieve this. Any tips or solutions would be greatly appreciated!

javascriptangularjs

Answer №1

I have created a Codepen specifically for your situation

See the grouped Codepen here

<table  class="table table-striped">
<tr><td>{{data1}}</td><td>{{data2}}</td></tr>
<tr ng-repeat="item in filteredsample = (sample | filter:{ SUPNAME: 'AAA'})">
</tr>
  <ul ng-repeat="thing in filteredsample">
<li style = "float:left; margin:20px">DESG VALUE {{$index}} = {{thing.DESG}}</li>
</ul>
</div>

I hope this Codepen is useful for your needs

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

Embed an event into an HTML div that is not editable

How can I bind the paste event on a div to grab an image from the clipboard and assign it to an Angular scope variable? This solution works in Chrome, but not in IE 11 without adding the contenteditable=true attribute. However, using content editable break ...

javascriptjqueryhtmlangularjs

How to Load JavaScript Files into Joomla 2.5 default.php File

When creating a component in Joomla 2.5, I encountered an issue while trying to add some JavaScript code into the layout file tmpl/default.php . To include the JavaScript files, I used the following code: $document->addScript(JURI::base() . "components ...

javascriptphpjoomla

Step-by-step guide on building an Android application with Cordova framework and VisualStudio2015

I am looking to create a basic Android application using C#. A friend recommended the Cordova framework, but I'm not sure how to use it. Can you guide me on getting started with Cordova and what tools I'll need to install? If there is a simpler w ...

javascriptc#htmlasp.net-mvc-5

Is there a way for me to execute a function multiple times in a continuous manner?

I am attempting to create a blinking box by calling a function within itself. The function I have is as follows: $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle("slow"); }); }); <script src="https://a ...

javascriptjqueryhtmlajax

Modifying the onclick function for a bootstrap glyphicon

How can I swap the .glyphicon-menu-down to glyphicon-menu-up when a user clicks on a link? Currently, it's not working as expected. Could there be an issue with my jQuery implementation? Markup <a data-toggle="collapse" data-parent="#accordion" h ...

javascriptjqueryhtmltwitter-bootstrap

Using Javascript, delete all chosen HTML elements containing innerText

Looking to extract certain HTML tags from a block of code in TextArea1 and display the modified output in TextArea2 upon clicking a button. <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8&quo ...

javascripthtml

Getting values from check boxes with the same name in a POST request utilizing Node - the ultimate guide!

As a newcomer to the Node language, I am facing issues trying to retrieve the values of checkboxes with the name 'hobbies[]' from the req.body object. The contents of req.body are as follows: { title: 'Ume', gender: 'female&apos ...

javascripthtml

Transition event listener fails to trigger

I am currently experimenting with transitions using JavaScript. My goal is to hide an element when the transition ends. I have set up an event listener using addEventListener, but the function does not seem to be executing. var fun; var transitions = { ...

javascriptcss

What could be the reason for sending XmlHttpRequest even if ClientValidation has failed?

Having multiple AJAX forms on my page poses a challenge when I need to submit them all on button click. Simply iterating over the forms with forms.each(function (index, form) { $(form).submit();} won't work as expected because only the last form gets ...

javascriptasp.netjqueryjquery-validate

Using Angular-Resource instances throughout the entire application

Within my code, I have set up a straightforward resource of categories that utilizes a cached query action: app.factory 'Category', ($resource) -> $resource "/categories/:id", {id: '@id'}, { query: { cache: true, isArray: true, ...

angularjsangular-resource

Enable automatic scrolling on a website using jQuery with the option to pause

I'm trying to implement a feature in jQuery where the web page auto-scrolls to a specific point, pauses for a moment, and then continues scrolling. It's like simulating a user scrolling down a page while reading an article - stopping and starting ...

javascriptjquery

How can I delete cached AJAX POST requests for a web app on the iOS6 home screen?

We are currently facing a significant issue with iOS6 ajax POST request caching in our webApp. After the upgrade, most of our users who have added the app to their home screen are experiencing problems with stale data being retrieved from over 6 days ago. ...

javascriptjqueryajaxios6

Using Nuxt: Integrating a Third-Party Library into a Vue Page Component

Consider the scenario where you wish to integrate a third-party JavaScript library (such as Three.js) into a Vue page using Nuxt. Attempting to link local sources in the head section of either nuxt.config.js or YourPage.vue proves unsuccessful: head: { ...

javascriptnode.jswebpackvue.jsnuxt.js

When JQuery Ajax encounters an error

I'm facing an issue with my ajax function after setting the dataType to Json. Below is the code snippet: Ajax script: $('#da').on("change",function() { $.ajax({ url: "callAjaxIndex.php", type: "P ...

javascriptphpjqueryajax

Creating a WebSocket service similar to stackoverflow using Node.js: A step-by-step guide

I'm currently developing a chat application using node.js. I have implemented a feature to receive new messages via ajax, where requests are sent every 3 seconds. However, I recently observed that stackoverflow handles fetching new data differently. I ...

javascriptweb-servicesnode.jswebsocket

Using vue.js to sort comments based on the highest number of votes

Can someone guide me on sorting data (comments) based on the number of votes using vue.js? Much appreciated! data: { comments: [{ title: "Excellent blog post!", votes: 5 }, { title: "Interactive commenting feature in VueJ ...

javascriptvue.js

Having trouble updating values in Vue3 when accessing the next item in an object?

I'm attempting to allow my users to browse through a collection of various items. Take a look at the records object below: 0: {id: 1, pipeline_id: 1, raw: '1', completion: null, processed: 0, …} 1: {id: 2, pipeline_id: 1, raw: '2&apo ...

javascriptvue.jsvuejs3

Utilize the power of XMLHttpRequest to fetch and load numerous audio files, seamlessly integrating them for playback through the Web Audio

I am looking to create a web application that loads three different audio files, each one second long, in a specific order, and then merges them into a single Audio Buffer consecutively. To illustrate my goal, here is a sample code snippet: var AudioCo ...

javascriptajaxaudio

Trigger Object RuntimeError

Initially, I attempted to pass the object :id to the URL and it was successful. However, when I tried to pass the object to the list, I encountered a ReferenceError. index.ejs: <tr> <th class="text-center">AWB NO</th> <th c ...

javascriptnode.jsexpressejs

Tips for transferring data between iframes on separate pages

I am currently working on implementing a web calendar module within an iframe on page-b. This module consists of 1 page with two sections. Upon entering zipcodes and house numbers, the inputs are hidden and the calendar is displayed. The technology used he ...

javascriptasp.netajaxpostiframe