Tips for organizing JSON data in AngularJS

  [{name: 'A', team: 'team alpha', value:"10"},
  {name: 'A', team: 'team beta' value:"20"},
    {name: 'A', team: 'team gamma' value:"40"},
  {name: 'B', team: 'team alpha' value:"15"},
  {name: 'B', team: 'team beta' value:"25"},
  {name: 'C ', team: 'team alpha' value:"30"}];

I am looking to organize the data in a specific format as shown below:

    name:A
    team alpha: 10
    team beta: 20
    team gamma:40

   name:B
    team alpha:15
    team beta:25

   name:C
   team alpha:30

I tried searching online for a solution to group this data structure, but couldn't find any. Can someone help me with how I can achieve this grouping or filtering of data in angularjs based on the mentioned format? Any assistance would be greatly appreciated.

javascriptangularjsjsonjsfiddleangularjs-filter

Answer №1

View the Live Demo

HTML Code:

<ul ng-repeat="(key, value) in players | groupBy: 'name'">
  <li>name: {{ key }}
     <ul>
        <li ng-repeat="player in value">
          {{ player.team }} : {{player.value}} 
        </li>
     </ul>
  </li>
</ul>

JavaScript Code:

$scope.players = [
      {name: 'A', team: 'team alpha', value:10},
      {name: 'A', team: 'team beta',value:20},
      {name: 'A', team: 'team gamma',value:40},
      {name: 'B', team: 'team alpha',value:15},
      {name: 'B', team: 'team beta',value:25},
      {name: 'C', team: 'team alpha',value:30}
    ];

For more information, take a look at this helpful answer on Stack Overflow.

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

Replicating a website to use at a later time

I am brand new to the world of Javascript, currently diving into JavaScript and jQuery for an issue I'm facing. Here's what I'm trying to accomplish: I have a selection of words ("foo", "bar") Retrieve the current webpage's content ( ...

javascriptjqueryhtmlcss

Optimize data storage with javascript on Otree

I've been attempting to store the timestamp from a click in an Otree database, but I've tried using various codes without success. Here's the first code snippet: function myFunction() { var n = Date.now(); document.getElementById(" ...

javascripthtmlotree

Saving a JSON object to a JSON file

My code successfully utilizes the following structure: $.getJSON('Json_users_templates/SO_example.json', function(data) { }); to retrieve JSON data from a local .json file into an object. Now, I am looking for some code that will allow me to s ...

jqueryajaxjson

I utilized the explode function in PHP to transform a string into an array. Now, I require assistance with manipulating

Currently, I am facing a challenge where I have converted a string into an array in PHP using explode. I need to pass this array to a separate JavaScript page and then access the data values from within. Below is the structure of the array in JavaScript o ...

phpjavascriptajaxarrays

Tips for generating a .csv document using data from an array?

I am currently utilizing a PHP class to validate email addresses in real-time. The PHP Script is functioning as expected: validating the emails and displaying the results on the same page by generating a <td> element for each validated email. Howeve ...

javascriptphpjqueryhtmlcsv

What is the method for arranging swatch images thumbnail bar vertically within the Media Viewer?

<script type="text/javascript"> var mediaMixViewer = new s7viewers.MixedMediaViewer({ "containerId":"s7viewer", "params":{ "asset":"Scene7SharedAssets/Mixed_Media_Set_Sample", "serverurl":"http://s7d1.scene7.com/is/image/", "videoserverurl" ...

javascripthtmlcssadobemediaview

Change the UTC DateTime received from the server to the Local DateTime displayed on the web page

In my Sql database, I have a column storing values as UTC in a DateTime field. The requirement now is to convert this UTC into Local Time based on the geographical location of the User accessing the report. I am aware that using ToLocalTime() will achieve ...

javascript.netdatetimerazorutc

Issue with Nav Bar Toggle not changing text to white color

Query I'm baffled as to why the text in the navigation bar (when opened with the Burger Menu) refuses to turn white. I've exhausted all efforts to change the color to white. Please assist me in pinpointing why the text remains unaffected when t ...

javascripthtmlcssuser-experience

Local Passport Authentication

Recently, I delved into the world of JavaScript and embarked on a small project involving user authentication. To achieve this, I decided to utilize the Passport local strategy. However, upon sending a post request with the login button, I encountered an e ...

angularjsnode.jsauthenticationexpresspassport.js

Encountering an error when attempting to upload a file to S3 using JS Vue

I'm attempting to upload a file to my S3 bucket using the aws-s3 library, but I am encountering this error in the console: https://i.stack.imgur.com/lk47U.png Here is the code for the component: <template> <input type="file" @ch ...

javascriptamazon-web-servicesvue.jsamazon-s3

What are the steps to ensure compatibility with relative paths when transitioning from v5 to v6?

In my application, there are scenarios where multiple routes must pass through a component before rendering specifics. Additionally, there are situations where something is displayed for the parent route and then divided for the children. It's crucia ...

javascriptreactjsreact-routerreact-router-dom

Employing a form for initiating a JavaScript function

I need help running a JavaScript method with a custom text variable as a parameter. My goal is to input some text in a form and then pass that value to the method for execution. However, I'm encountering an issue where it seems like the method is rece ...

javascripthtmlforms

creating an HTML document with 2 interactive elements

In my app.js file, I have defined routes using Angular and included references to HTML files. However, when I run the file, it only displays two controls instead of what is expected. Below is a snippet from my login.html file: ![<!DOCTYPE html> < ...

htmlangularjsforms

JavaScript click handlers for styling elements

I have successfully created a CSS element to invert the entire website for a dark mode effect. I was able to use a key code to toggle the CSS element and it worked perfectly. However, my challenge now is that I want to implement a button to toggle the elem ...

javascripthtmlcss

Having trouble with the JSON array not being rendered properly in React Native?

I received the following JSON data from an API endpoint using a fetch() function: [{"username":"\"Hyh\"","name":"GitHub","url_main":"https://www.github.com/","url_user&quo ...

javascriptreactjsjsonreact-native

Execute JavaScript code following the completion of loading and running an external script

My goal is to dynamically load and run a third-party JavaScript file (from a different domain) and then execute some of my own code afterwards. One option I'm considering is using jQuery's $.getScript: $.getScript('https://login.persona.org ...

javascriptjquerybrowserhtml

display the text content of the chosen option on various div elements

I created a subscription form that includes a category dropdown select field. The selected option's text value needs to appear 4 times within the form. It's all part of a single form. <select name="catid" onchange="copy()" id="catid" class="i ...

javascriptjqueryhtml

Having trouble sending a prop to an API function from UseEffect in React with Next.js

Currently, I am utilizing the App Router within next.js. I am encountering difficulties when attempting to pass serial_num as an argument to my API function fetchImages from within the useEffect in my page.tsx file. The API function can be found in /app/ ...

javascriptreactjsnext.js

What is the best way to incorporate a child controller within a view in Angular?

I am facing an issue in my app where I have a Main controller and within the template/view for that controller, I call a second controller using <div ng-controller="BasketCtrl"></div>. My question is, how can I specify which view/template &apos ...

angularjs

How can I transfer the total and counter values to a different PHP page and store them in a text box before saving them to the database?

I need to transfer the total and counter values to another PHP page using a text box and then save them to a database. { var price =10; //price $(document).ready(function() { var $cart = $('#selected-seats'), //Sitting Are ...

javascriptphp