Print a label i for each ng-repeat of a Json

Question

Print a label i for each ng-repeat of a Json

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)
#5 by (0 votes)

3

Having the following structure, HOW DO I do it to print the amount of stars that each car has? that is. IF in the json it says "stars": "3" would have to print 3 labels

The expected result is to print 3; The first with 3 inside. The second with 4 inside and the last with 2 inside.

Please help!

** app.js | data.json | HTML **

var app = angular.module("app", []);

app.controller("appController", function($scope, $http) {

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

    $scope.autos = data.autos;

  });
});

{
  "Autos" : [
    {
      "name" : "BMW",
      "stars" : "3",
    },
    {
      "name" : "Ferrari",
      "stars" : "4",
    },
    {
      "name" : "Ford",
      "stars" : "2",
    }
  ]
}

<html lang="en" ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body ng-controller="appController">
  <div>
    <i ng-repeat="star in autos" class="fa fa-star"></i>
  </div>
</body>

</html>

javascript html json angularjs ng-repeat

asked by Matt 30.01.2017 в 15:32

source

5 answers

Checkbox to select all and add the javascript selections POST request error with JSON with accents in Android

score 2 · Answer 1

First a function to store stars in an array according to Json

var varJson={
  "Autos" : [
    {
      "name" : "BMW",
      "stars" : "3",
    },
    {
      "name" : "Ferrari",
      "stars" : "4",
    },
    {
      "name" : "Ford",
      "stars" : "2",
    }
  ]
};
varJson.Autos.forEach(function(currentValue, index, arr){
var estrellas="";
  for(var x=0;x<currentValue.stars;x++){
   estrellas+="*";
  }
  console.log(estrellas);
})

using the function above, we store the stars in contenedorDeEstrellas , and return to $ scope $scope.contenedorDeEstrellas=contenedorDeEstrellas;

function appController($scope) {
  
  var varJson={
  "Autos" : [
    {
      "name" : "BMW",
      "stars" : "3",
    },
    {
      "name" : "Ferrari",
      "stars" : "4",
    },
    {
      "name" : "Ford",
      "stars" : "2",
    }
  ]
};
var contenedorDeEstrellas=[];
varJson.Autos.forEach(function(currentValue, index, arr){
var estrellas="";
  for(var x=0;x<currentValue.stars;x++){
   estrellas+="*";
  }
  contenedorDeEstrellas.push({star:estrellas});
})

$scope.contenedorDeEstrellas=contenedorDeEstrellas;


};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="appController">
    <div>
      <ul>
        <li ng-repeat="estrellas in contenedorDeEstrellas" class="fa fa-star">{{estrellas.star}}</li>
      </ul>
    </div>
  </div>
</div>

now if you want to add the tag li according to the stars (3,4,2) The following code can help you:

    function appController($scope) {
      
      var varJson={
      "Autos" : [
        {
          "name" : "BMW",
          "stars" : "3",
        },
        {
          "name" : "Ferrari",
          "stars" : "4",
        },
        {
          "name" : "Ford",
          "stars" : "2",
        }
      ]
    };
    var contenedorDeEstrellas=[];
    varJson.Autos.forEach(function(currentValue, index, arr){
    var estrellas="";
      for(var x=0;x<currentValue.stars;x++){
       estrellas+="*";
       contenedorDeEstrellas.push({star:estrellas});
      }
      
    })

    $scope.contenedorDeEstrellas=contenedorDeEstrellas;


    };

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app>
      <div ng-controller="appController">
        <div>
          <ul>
            <li ng-repeat="estrellas in contenedorDeEstrellas" class="fa fa-star">{{estrellas.star}}
<li ></li>

</li>
          </ul>
        </div>
      </div>
    </div>

score 0 · Answer 2

To solve this in angular you have to put the value you want to show in the html code. The line would look like this:

<i ng-repeat="star in autos" class="fa fa-star">{{star.name}}</i>

Here is an example of how it would work (adapting a bit what you have:

function appController($scope) {

  $scope.autos = [{
    "name": "BMW",
    "stars": "3",
  }, {
    "name": "Ferrari",
    "stars": "4",
  }, {
    "name": "Ford",
    "stars": "2",
  }];
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="appController">
    <div>
      <ul>
        <li ng-repeat="star in autos" class="fa fa-star">{{star.name}}</li>
      </ul>
    </div>
  </div>
</div>

score 0 · Answer 3

Create a ng repeat within a ng repeat, such as a nested for

  
  <body ng-controller="appController">
    <div>
      <ul ng-repeat="auto in autos" class="fa fa-star">auto.name</ul>
        <i ng-repeat="star in auto.star" class="fa fa-star">Estrella</i>
          
    </div>

score 0 · Answer 4

HOW DO I DO to print the number of stars that each car has?

One solution would be to create a array of length equal to the number of stars.

Using angular.forEach , constructor Array(length) and ng-repeat track by :

var app = angular.module("app", []);

app.controller("appController", function($scope, $http) {

  $http.get('/data.json')
  .then(function(data) {
    var autos = data.Autos;
    // Por cada auto
    angular.forEach(autos, function(auto) {
      // Creamos un arreglo de logintud igual a la cantidad de estrellas
      auto.arrayStars = Array(parseInt(auto.stars, 10));
    });
    //
    $scope.autos = autos;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div ng-app="app">
  <ul ng-controller="appController">
    <li ng-repeat="auto in autos">
      {{auto.name}}
      <i ng-repeat="n in auto.arrayStars track by $index" class="fa fa-star"></i>
    </li>
  </ul>
</div>

Demo

Using ng-repeat combing with filter custom:

var app = angular.module("app", []);

// Custom filter
app.filter('range', function() {
  return function(input, total) {
    total = parseInt(total, 10);
    for (var i=0; i<total; i++) {
      input.push(i);
    }
    return input;
  };
});

app.controller("appController", function($scope, $http) {

  $http.get('/data.json')
  .then(function(data) {
    $scope.autos = data.Autos;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div ng-app="app">
  <ul ng-controller="appController">
    <li ng-repeat="auto in autos">
      {{auto.name}}
      <i ng-repeat="n in [] | range:auto.stars" class="fa fa-star"></i>
    </li>
  </ul>
</div>

Demo

score 0 · Answer 5

What you have to do is a nested ng-repeat.

<div ng-repeat="auto in autos">
    <i ng-repeat="star in getArray(auto.stars)" class="fa fa-star"></i>
</div>

In the controller do a function that returns an array with the number of stars required, the content does not matter since we only need ng-repeat to run the number of times indicated by the argument stars :

getArray: function(stars) {
    return new Array(start);
}

The first ng-repeat goes through the arrangement of cars, the second places on the screen the number of stars indicated by the stars property.