Print json in an angular grid js (ionic framework)

Question

Print json in an angular grid js (ionic framework)

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have the following json:

[
    {
      "id":"1",
      "fecha_trama":"2016-02-16",
      "hora_trama":"17:34:48",
      "Nombre":"Evaluación de riesgos",
      "Apellido":"Sala F",
      "Sexo":"10h00-10h30",
      "Residencia":"GESTIÓN DE PROYECTOS"
   },{
     "id":"2",
     "fecha_trama":"2016-02-16",
     "hora_trama":"17:34:49",
     "Nombre":"Metodologia Scrum",
     "Apellido":"sala D",
     "Sexo":"09h30-10h00",
     "Residencia":"GESTIÓN DE PROYECTOS"
   },{
     "id":"3",
     "fecha_trama":"2016-02-16",
     "hora_trama":"23:15:55",
     "Nombre":"Python",
     "Apellido":"aula 132",
     "Sexo":"12h00-12h30",
     "Residencia":"TIC-EC 2015"
  }
];

Which I want to print each name on a grid. For this I found this example but it prints my json structure but not the name. I hope you can help me thanks

Code:

<div ng-controller="MyCtrl">


    <div ng-repeat="i in numbers">
        <div class="row" ng-if="$even">
            <div class="col col-50">{{numbers[$index]}}</div>
            <div class="col col-50">{{numbers[$index + 1]}}</div>
        </div>

    </div>

</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.numbers = [{"id":"1","fecha_trama":"2016-02-16","hora_trama":"17:34:48","Nombre":"Evaluación de riesgos","Apellido":"Sala F","Sexo":"10h00-10h30","Residencia":"GESTIÓN DE PROYECTOS"},{"id":"2","fecha_trama":"2016-02-16","hora_trama":"17:34:49","Nombre":"Metodologia Scrum","Apellido":"sala D","Sexo":"09h30-10h00","Residencia":"GESTIÓN DE PROYECTOS"},{"id":"3","fecha_trama":"2016-02-16","hora_trama":"23:15:55","Nombre":"Python","Apellido":"aula 132","Sexo":"12h00-12h30","Residencia":"TIC-EC 2015"}];
}

When executing this I print the structure and I or what I want to print is the following:

Risk assessment Scrum methodology Python

angularjs ionic

asked by Dimoreno 06.04.2016 в 06:27

source

2 answers

Unexpected end in getLocalHost with InetAddress Access the variables of the activity from its fragment

score 2 · Answer 1

If I understand what you are looking for, maybe this will help you:

<div data-ng-app ng-controller="MyCtrl">
    <div ng-repeat="i in numbers">
       <div class="row" ng-if="$even">
            <div class="col col-50">{{i.Nombre}}</div>
        </div>
    </div>

</div>

var myApp = angular.module('myApp',[]);

Test fiddle

Update:

Warning: haha

I am not a programmer Angularjs 1.x.

It's the first time I use Ionic.

It is very possible that this can be done better.

If I understand well now I think this is what I'm looking for in some way

Risk assessment | Scrum Methodology | Python

<body ng-controller="MyCtrl as ctrl">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Test</h1>
    </ion-header-bar>
    <ion-content>
        <div class="row header">
          <div class="col">1 </div>
          <div class="col">2 </div>
          <div class="col">3 </div>
        </div>
      <div class="" ng-repeat="data in ctrl.data">
        <div ng-if="$index % 3 === 0">      
          <div class="row">
            <div class="col">{{ctrl.data[$index].Nombre}}</div>
            <div class="col">{{ctrl.data[$index+1].Nombre}}</div>
            <div class="col">{{ctrl.data[$index+2].Nombre}}</div>
          </div>
        </div>   
      </div>
    </ion-content>
  </body>

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {

  var ctrl = this;

  ctrl.data = [{"id":"1","fecha_trama":"2016-02-16","hora_trama":"17:34:48","Nombre":"Evaluación de riesgos","Apellido":"Sala F","Sexo":"10h00-10h30","Residencia":"GESTIÓN DE PROYECTOS"},{"id":"2","fecha_trama":"2016-02-16","hora_trama":"17:34:49","Nombre":"Metodologia Scrum","Apellido":"sala D","Sexo":"09h30-10h00","Residencia":"GESTIÓN DE PROYECTOS"},{"id":"3","fecha_trama":"2016-02-16","hora_trama":"23:15:55","Nombre":"Python","Apellido":"aula 132","Sexo":"12h00-12h30","Residencia":"TIC-EC 2015"}] 
});

Test codepen

As it is not very clear to me how you want it, I leave you with the two forms that I think it says when you read your question and see the comment.

Risk assessment | Scrum Methodology

Python

<body ng-controller="MyCtrl as ctrl">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Test</h1>
    </ion-header-bar>
    <ion-content>
        <div class="row header">
          <div class="col">1 </div>
          <div class="col">2 </div>
        </div>
      <div class="" ng-repeat="data in ctrl.data">
        <div ng-if="$index % 2 === 0">      
          <div class="row">
            <div class="col">{{ctrl.data[$index].Nombre}}</div>
            <div class="col">{{ctrl.data[$index+1].Nombre}}</div>
          </div>
        </div>   
      </div>
    </ion-content>
  </body>

Test codepen

score 0 · Answer 2

I will start by saying that your data structure is an "arrangement" of "objects".

The example you use uses indexes to print the values of an array. This is not necessary with ng-repeat since the variable i will contain the object as such. numbers[$index] is exactly equal to i in each iteration so you can use i.propiedad directly to print what you want in each row.

If your collection is very large (thousands of rows) you should use the directive collection-repeat instead of ng-repeat . Both are identical except that collection-repeat is optimized for mobile.

<div ng-controller="MyCtrl">
    <div collection-repeat="i in numbers">
        <div class="row">
            <div class="col col-50">{{i.Nombre}}</div>
        </div>
    </div>
</div>

var myApp = angular.module('myApp',[]);

This is what you want but it is not very mobile-friendly. You say that you want to print your data in a grid but I recommend that you use lists since in mobile the width of the screen is very variable, your application can be seen in a tablet (high resolution) or in a mini version of some mobile ( very small resolution) so the data should be tried to organize vertically.

<ion-content ng-controller="MyCtrl">
    <ion-list>
        <ion-item collection-repeat="i in numbers">
            {{i.Nombre}}
        </ion-item>
    </ion-list>
</ion-content>

var myApp = angular.module('myApp',[]);

Remember to use ion-content in the views of your application to enable the scroll. This is very useful when used in combination with ion-list

If you want you can put a grid inside each item and show other data horizontally but I repeat that you should not abuse and you should always try to organize them vertically so that your users have a better experience with your app.

Note: collection-repeat belongs to ionic, so it is not available in a pure angle project.