3

Teniendo las siguiente estrucura, ¿COMO HAGO para imprimir la cantidad de estrelas que tiene cada auto? osea. SI en el json dice "stars":"3" tendria que imprimir 3 etiquetas

El resultado esperado es que se impriman 3 ; El primero con 3 dentro. El segundo con 4 dentro y el ultimo con 2 dentro.

Por Favor ayuda!

** 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>

0

5 respuestas 5

2

Primero una funcion para almacenar en un arreglo las estrellas de acuerdo al 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);
})

utilizando la función de arriba, almacenamos las estrellas en contenedorDeEstrellas, y devolvemos al $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>

ahora si quieres agregar la etiqueta li de acuerdo a las estrellas (3,4,2) el siguiente codigo te puede ayudar:

    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>

0

Para resolver esto al estilo angular tienes que poner el valor que quieres mostrar en el código html. La linea quedaría así:

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

Te dejo un ejemplo de como funcionaría (adaptando un poco lo que tu tienes:

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>

0

Crea un ng repeat dentro de un ng repeat, como un for anidado

  
  <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>

0

¿COMO HAGO para imprimir la cantidad de estrellas que tiene cada auto?

Una solución seria crear un array de longitud igual a la cantidad de estrellas.

  • Usando angular.forEach, el constructor Array(length) y 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

  • Usando ng-repeat combiando con un 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

0

Lo que tienes que hacer es un ng-repeat anidado.

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

En el controlador hacer una función que te regrese un arreglo con el número de estrellas que se requiera, el contenido no importa ya que solo necesitamos que ng-repeat se ejecute el número de veces que indica el argumento stars:

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

El primer ng-repeat recorre el arreglo de autos, el segundo coloca en pantalla el numero de estrellas que indica la propiedad stars.

1
  • Te en cuenta que auto.stars es un string, por lo que es necesario hacer un parseInt. De lo contrario se crearia un array de longitud 1 con un solo valor.
    – Marcos
    el 31 ene. 2017 a las 11:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.