Displaying JSON data obtained from two separate arrays in AngularJS - is it possible?

I want to display the value of my Json element,

"Baru20151","Lama20151","Baru20152","Lama20152", but I'm unsure how to do it.

The element is fetched from 2 arrays, for the "Baru20151" elements, "20151" is obtained from the "isimasa" array in my Json file.

Snippet of HTML code:

<div ng-app="myApp" ng-controller="RegistrationCtrl"> 
 <h4 style="text-align:center">REGISTRATION OF PENDAS STUDENTS</h4>
 <table class="table table-striped table-bordered table-hover">
 <tr>
  <td ng-repeat-start="Isimasa in myDataIsimasa" align="center">Baru</td>
  <td  align="center">Lama</td> 
 </tr>
 <tr ng-repeat="Pendas in DataPendas" >
  <td ng-repeat-start="Isimasa in DataIsimasa" align="center">{{Pendas.Baru{{Isimasa.masa}}}}</td>
  <td  align="center">{{Pendas.Lama{{Isimasa.masa}}}}</td>
 </tr>
 </table>
</div>

Controller section:

<script>
var app = angular.module('myApp', []);
app.controller('RegistrationCtrl', function($scope, $http) {
$http.get("json.json").then(function (response) {
  $scope.DataPendas = response.data.pendas;
  $scope.DataIsimasa = response.data.isimasa;
  $scope.Data = response.data;
});
});
</script>

Sample Json data:

{"name":"ACEH",

"isimasa":[{"masa":"20151"},{"masa":"20152"}],

"column":9,

"pendas":[

{"kode":"121","prodiname":"PGPAUD", "Baru20151":22,"Lama20151":0,
"Baru20152":22,"Lama20152":20}

]}

Answer №1

Give this a try.. Controller:

        <script>
    var app = angular.module('myApp', []);
    app.controller('RegistrationCtrl', function($scope, $http) {
    $http.get("json.json").then(function (response) {
      $scope.DataPendas = response.data.pendas;
      //console.log($scope.DataPendas);

      $scope.DataIsimasa = response.data.isimasa;
      var isimasa = $scope.DataIsimasa;

      console.log(isimasa);
      $scope.Data = response.data;
      $scope.constructJson = constructJson;

       function constructJson(theKey, jsonKey, jsonObj){
           console.log(theKey, jsonKey);

           var newKey = theKey + jsonKey;
           var newValue = jsonObj[newKey];
           console.log(newValue);
           return newValue;

      }
    });
    });

    </script>

HTML:

    <div ng-app="myApp" ng-controller="RegistrationCtrl">
STUDENT REGISTRATION
<table class="table table-striped table-bordered table-hover">

    <tr ng-repeat-start="Isimasa in DataIsimasa">
       <td>{{Isimasa.masa}}        
       <div  ng-repeat="Pendas in DataPendas">        
         New{{Isimasa.masa}} : {{ constructJson("New",Isimasa.masa, Pendas ) }}<br/>
         Old{{Isimasa.masa}} : {{ constructJson("Old",Isimasa.masa, Pendas ) }}
        </div>
       </td>
   </tr>
   <tr ng-repeat-end>
   </tr>

</table>

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

Exploring AngularJS and Jasmine: Testing a controller function that interacts with a service via $http

I encountered an issue while testing a controller that relies on a service. The problem arises because the service is currently set to null in order to focus solely on testing the controller. The current test setup is failing due to the BoardService being ...

Removing   from a text node using JavaScript DOM

I am currently working with xhtml in javascript. To retrieve the text content of a div node, I am concatenating the nodeValue from all child nodes where nodeType is Node.TEXT_NODE. However, sometimes the resulting string includes a non-breaking space enti ...

What are the steps to implement the jQuery slide menu effect on a website?

When visiting the website , you may notice a symbol positioned in the top left corner of the site. By clicking on this symbol, a sleek div will slide out. How can this type of animation be achieved through javascript or jquery? ...

The progress event of the XMLHttpRequest updates quickly, outpacing the speed of the upload itself

I've been working on setting up an upload form and using xhr to return the upload status to the user. Everything seems to be in place, but I'm facing a strange issue where the callbacks are happening too quickly and showing a higher percentage th ...

Enhancing web page interactivity through dynamic element names with Javascript and jQuery

I have an interesting HTML setup that looks like this: <div> <input type="text" name="array[a][b][0][foo]" /> <input type="text" name="array[a][b][0][bar]" /> <select name="array[0][a][b][baz]>...</select> </div> ...

What is the process for importing a JSON5 file in Typescript, just like you would with a regular JSON file?

I am looking to import a JSON5 file into a JavaScript object similar to how one can import a JSON file using [import config from '../config.json']. When hovering over, this message is displayed but it's clearly visible. Cannot find module & ...

Which is the Better Choice for an MMO WebSocket Server: Node.js or C++?

Contemplating creating a live game using WebSockets for the web has been on my mind. With my knowledge of Node.js, it's tempting to develop it there. However, C++ appears to be the favored server language due to its speed. Would it be best to try bui ...

Tips for changing the value of a TextField in React Material

I am faced with a challenge regarding a form that is populated with data from a specific country. This data is fetched from a GraphQL API using Apollo Client. By default, the data in the form is read-only. To make changes, the user needs to click on the e ...

The sliding effect in react-owl-carousel seems to be malfunctioning once new data is dynamically incorporated into the carousel

Hey there, I'm currently working on a React JS project where I am utilizing react-owl-carousel. Initially, I'm loading 5 items through an API call, and then upon clicking the next button, I make another API call to fetch more data. However, I&apo ...

Possible solutions for AngularJS using ng- tags

I absolutely love incorporating AngularJs into my Multiple Pages Laravel Application. However, using the Laravel Blade Template Engine has made me reconsider adding Angular Tags to clutter my blade templates. For instance <div ng-controller="TodoCont ...

Is there a way to identify if the parent page has completed loading while within an iframe?

Is there a way to detect properties or events within the iframe that can help determine this? The src of the iframe and the parent page belong to different domains. ...

Can you tell me the JavaScript alternative to Jquery's .load() shortcut method?

Exploring the modernized version of jquery, specifically the .load() ajax shorthand method that is not deprecated. One example to consider is finding the javascript equivalent for the traditional jquery ajax shorthand method mentioned below: $("#targetdi ...

Jade fails to show image in route with parameter

Currently, I am utilizing express 4 and have images saved in the uploads directory. This is a snippet of my code: app.use(express.static(__dirname + '/uploads')); //This part works app.route('/') .get(function (req, res) { ...

What is the best method for saving a chosen radio button into an array?

I am currently developing an online examination system where questions are retrieved from a database using PHP and displayed through AJAX. I am facing an issue where I am unable to capture the selected radio button value and store it in an array. Despite e ...

"Embracing Progressive Enhancement through Node/Express routing and the innovative HIJAX Pattern. Exciting

There may be mixed reactions to this question, but I am curious about the compatibility of using progressive enhancement, specifically the HIJAX pattern (AJAX applied with P.E.), alongside Node routing middleware like Express. Is it feasible to incorporate ...

Having trouble with AngularJS $location.path() not redirecting properly?

Why am I unable to redirect to a different URL using $location.path in angular.js? .controller('CheckCtrl', function($scope, $localStorage, $location) { $scope.check = function(){ if($localStorage.hasOwnProperty("accessToken") === t ...

Getting values from a PHP multidimensional array that has been decoded from JSON can be achieved by accessing the different levels of the array using

I am currently integrating PayPal payments into my website. After the Paypal API sends me the order details in JSON format to my success.php script, I need to extract and store each variable in my database. To retrieve the JSON data, I use the following ...

Improving efficiency by saving and loading the form value using best practices

One of the challenges I'm facing is how to populate dropdown selections on a webpage without resorting to hard-coded procedures. The code snippet below illustrates the current setup: <td> <ui-select ng-model="user_profile.gender" require ...

Using curl to display JSON data in an array: A simple guide

I have written some code to retrieve JSON data using Curl. I am now looking to display all the retrieved data, but it seems to be not showing any output. <?php $json = file_get_contents('myurl'); $data = json_decode($json); print_r($data); ?& ...

Is it possible to validate only the fields that are currently visible using HTML form validation

I need a solution for excluding hidden fields from HTML form validation. My situation involves having two groups of form fields, each with some required attributes. Depending on user selection, one group may be hidden, and those fields should not contribut ...