Tips for populating individual arrays in AngularJS with data from a JSON:- Iterate through the JSON

I am attempting to extract each data from a JSON file and store it in a new array, as I want to create a graph. However, the process is not working as expected.

Here is what I expect:

f = { "FAKULTAS":"01/FKIP", "FAKULTAS":"02/FMIPA", "FAKULTAS":"03/FISIP" }

g = { "MASA20131":283133, "MASA20131":2419, "MASA20132":58719 }

This is my JSON File:

{

"DARIMASA":"20131",

"KEMASA":"20142",

"ISIMASA":

[{"masa":"20131"},{"masa":"20132"},{"masa":"20141"},{"masa":"20142"}],

"DATAFAKULTAS":
[
 {
   "FAKULTAS":"01/FKIP",
   "MASA20131":283133,
   "MASA20132":26746,
   "MASA20141":261238,
   "MASA20142":245722
 },
 {
   "FAKULTAS":"02/FMIPA",
   "MASA20131":2419,
   "MASA20132":29,
   "MASA20141":2706,
   "MASA20142":3207
 },
 {
   "FAKULTAS":"03/FISIP",
   "MASA20131":53312,
   "MASA20132":58719,
   "MASA20141":55047,
   "MASA20142":53745
 }]
}

Controller :

.controller("RegMhsSemesterCtrl", function ($scope, $http, chartBar4) {
        $scope.data = {};
          $http.get('data/RegPerSemester.json')
            .success(function (data) {
                 var axis2 = [],seriesA = [],seriesB = [],seriesC = [],seriesD = [];
                  data.forEach(function(row) {
                    axis2.push(row.FAKULTAS);
                    seriesA.push(row.MASA20131);
                    seriesB.push(row.MASA20132);
                    seriesC.push(row.MASA20141);
                    seriesD.push(row.MASA20142);
                    });
                $scope.data.f=axis2;
                $scope.data.g=seriesA;
                $scope.data.h=seriesB;
                $scope.data.i=seriesC;
                $scope.data.j=seriesD;

                console.log($scope.data);
                var i= chartBar4('chartbar4',$scope.data);

                window.onresize=function ()
                 {
                    i.resize()
                 }

            })
            .error(function (error) {
                $scope.data.error = error;
            });
    })

Answer №1

To implement the functionality, consider utilizing this code snippet:

.controller("StudentRegistrationCtrl", function ($scope, $http, chartBar4) {
    $scope.data = {};

   $http
      .get('data/StudentRecords.json')
      .success(function (data) {

           var STUDENTDATA = data.STUDENTDATA;
           var axis2 = [],seriesA = [],seriesB = [],seriesC = [],seriesD = [];
           for(var i=0; i<STUDENTDATA.length; i++) {
               axis2.push({
                   "FACULTY": STUDENTDATA[i].FACULTY
               });

               seriesA.push({
                 "SEMESTER1": STUDENTDATA[i].SEMESTER1
               });

               .....................................................
               .....................................................

           }
       });

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

I am having trouble with angular route children where only the first path component seems to be working

Issue with program running only the first path/component and not displaying others. The Navbar on the home page is working but other components are not showing up. Seeking help to resolve this problem. Please refer to the images for a better understanding. ...

Leverage the power of AJAX for fetching data from a database in Node.js

As I am utilizing Node.js as the server and Mysql as the database to store logged in usernames, I am curious if it is possible to use AJAX to execute a SQL database query and retrieve a list of usernames. More precisely, I am interested in using XMLHttp r ...

implement an angular directive to apply a CSS element

I am utilizing AngularJS and ng-repeat to populate a dynamic list of studies. This list has the capability to toggle into child elements of each item, creating an accordion-style toggle list that can go up to three levels deep for each list item. I am curr ...

How can I reset the mousemove event in jQuery?

I need to create a mechanism where I can move a div by clicking on it, and then click again to stop the div in that position. However, encountering an issue when trying to move the div again as the mousemove event does not get activated. How can this be ...

Error: The function `map` cannot be applied to this.props.comments

I am new to coding in React and have been trying to create a comment box. However, I keep encountering errors such as TypeError: this.props.comments.map is not a function and Uncaught TypeError: comments.concat is not a function. I am feeling lost and conf ...

Unable to establish a hyperlink to specific section of page using MUI 5 Drawer

When attempting to link to a specific part of my first page upon clicking the Shop button in the navigation Drawer, nothing happens: https://i.stack.imgur.com/FUQCp.png This snippet shows the code for the MUI 5 Drawer component: <Drawer anch ...

Can the tooltip on c3 charts be modified dynamically?

Creating a c3 chart involves defining various properties, including a tooltip. Here is an example: generateData = () => { const x = randomNR(0, 100); const y = randomNR(0, 100); const together = x + y; return { data: { columns: [ ...

Utilizing Json.NET for the process of serialization

When utilizing JavaScriptSerializer, the serialization process looks like this: var serializer = new JavaScriptSerializer(); string requestData = serializer.Serialize(new { EventID = 1, SubscriberID = 5, ToList = "abcd", TemplateParamVals = " ...

What is the best way to implement an Angular application within the child routes of another Angular application?

Is it possible to load an Angular app using lazy-loading (when a specific route is hit by users) into another Angular app without compiling the first one for use in the second? This is the Routing-Module of the app to nest into an Angular app: const upgr ...

Tips for clearing all content within a React Material UI table

How can I create a reset button to clear a table filled with user input data, without having to write functions from scratch? For example, similar to using clearLayer() for clearing a leaflet map. Thank you for any suggestions! //example of dynamical ...

What is the most efficient method for implementing absolute imports in Webpack 2?

I'm currently working on configuring Webpack for a React project and I'm looking to streamline how I import my components. Ideally, I want to import components like this: import ComponentName from "components/ComponentName" Instead of the more ...

Having trouble creating a report with an HTML screenshot using Protractor

Need assistance with generating reports using a html screenshot in Protractor. I have followed all the necessary steps but encountered an error. Any help would be appreciated. Here is my conf.js: // Sample configuration file. var HtmlReporter = require(& ...

How to arrange data in angular/typescript in either ascending or descending order based on object key

Hey there! I'm fairly new to Angular and have been working on developing a COVID-19 app using Angular. This app consists of two main components - the State component and the District component. The State component displays a table listing all states, ...

Modifying the sidebar navigation in Ionic for a user who is logged in

Is it possible to modify the side menu content based on whether a user is logged in or not? Example 1 - user not logged in: If a user isn't logged in, this side menu will be displayed. https://i.stack.imgur.com/iY427.png Example 2 - user is logged ...

The function crypto.randomUUID() does not exist in the Vitest library

vite.config.ts import { sveltekit } from '@sveltejs/kit/vite'; const config = { plugins: [sveltekit()], test: { include: ['**/*.spec.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], environment: 'jsdom', glo ...

Utilizing React JS to call a static function within another static function when an HTML button is clicked

Can you please analyze the following code snippet: var ResultComponent = React.createClass({ getInitialState: function () { // … Some initial state setup ……. }, handleClick: function(event) { // … Handling click event logic …… // Including ...

What is the best way to display just one record that has the lowest score out of all the records?

I need help with displaying only 1 record from the DL list that has the lowest score, instead of showing all records. In the example on stackblitz, you can see that for the first record, the DL scores are: 54, 20, and updated. Instead of displaying all 3 ...

What is the best way to enable ondemand icon usage in Vue Vite 3 with Iconify?

Did you know in the iconify documentation, there is just one simple step to follow? Visit All you have to do is: npm install --save-dev @iconify/vue import { Icon } from '@iconify/vue'; <Icon icon="mdi-light:home" /> After thi ...

When I try to alter HTML using JS, I encounter an undefined error related to AngularJS

Using this specific function: function adjustContent(elemento){ if (document.getElementById(elemento).innerHTML.indexOf('&#10004;')>0){ document.getElementById(elemento).innerHTML=document.getElementById(eleme ...

What could be causing the issue with my hour parameter in node-cron?

Having difficulty setting up a cron job to run with node-cron every Monday at 8:30. I've tried using "30 8 * * Mon" and even "30 08 * * Mon", but it doesn't seem to work. Interestingly, "30 * * * Mon" does work and runs every hour on the 30th min ...