for - visualización de error en*ng para el objeto de matriz json

ngfor keyvalue

Question

al recuperar el objeto json array desde la api de descanso y tratar de mostrar en ngfor falló con la razón

error

EXCEPCIÓN: No se puede encontrar un objeto de soporte diferente ''[objeto Objeto]'' de tipo ''objeto''. NgFor solo admite la vinculación a Iterables como Arrays. en [índices en HomeComponent @ 5: 37]

Código

import {Component} from ''angular2/core'';
import {HomeService} from ''./home.services'';
import {Index} from ''./index'';
@Component({
selector: ''home-app'',
providers: [HomeService],
template: `
<section class="left_side">
<article>
<div class="div_home">
<div class="div_homeIndxPartition">
<div class="div_IndxPartition" *ngFor="#indObj of indexes">
<table width="500px" class="idx_cons_table_det">
<tr>
<th align="center" color="#A9F5F2"><h3>{{indObj.name}} ({{indObj.tracker}})</h3></th>
<th align="center">Value</th>
<th align="center">Change</th>
<th align="center">%</th>
</tr>
<tr>
<td align="center" colspan="1"></td>
<td align="center">{{indObj.value}}</td>
<td align="center">{{indObj.change}}</td>
<td align="center">{{indObj.percent}}%</td>
</tr>
</table>
<br/>
<table width="500px" class="idx_cons_table">
<tr>
<th align="center">High</th>
<th align="center">Low</th>
<th align="center">Open</th>
<th align="center">Close</th>
<th align="center">52 Week High</th>
<th align="center">52 Week Low</th>
</tr>
<tr>
<td align="center">{{indObj.high}}</td>
<td align="center">{{indObj.low}}</td>
<td align="center">{{indObj.open}}%</td>
<td align="center">{{indObj.close}}</td>
<td align="center">{{indObj.yearHigh}}</td>
<td align="center">{{indObj.yearLow}}%</td>
</tr>
</table>
</div>
</div>
</div>
</article>
</section>
`
})
export class HomeComponent {
public indexes:Array<Index>=[];
public error;
constructor(private _service: HomeService){
this.indexes = _service.getIndexes().subscribe(
data => this.indexes = JSON.parse(data),
error => alert(" Error is : " + error),
()=> console.log("finished")
);
console.log(this.indexes);
}
}

Datos JSON

[
{
"id": 1,
"name": "FTSE 100",
"ticker": "UKX",
"value": 69875.23,
"change": 100,
"percent": 2.3,
"high": 69875.23,
"low": 69700.89,
"yearHigh": 699999.23,
"yearLow": 680005.23,
"open": 69600.54,
"close": 699000.97,
"constituents": null,
"runDate": "21/04/2015"
},
{
"id": 2,
"name": "FTSE 250",
"ticker": "MCX",
"value": 465820.85,
"change": 100,
"percent": 2.3,
"high": 465880.12,
"low": 465810.74,
"yearHigh": 478990.34,
"yearLow": 465320.23,
"open": 69600.54,
"close": 699000.97,
"constituents": null,
"runDate": "21/04/2015"
},
{
"id": 3,
"name": "FTSE All-Share",
"ticker": "ASX",
"value": 236549.23,
"change": 100,
"percent": 2.3,
"high": 236949.23,
"low": 236149,
"yearHigh": 246949.21,
"yearLow": 235549.29,
"open": 236519.23,
"close": 236649.23,
"constituents": null,
"runDate": "21/04/2015"
},
{
"id": 4,
"name": "Euro Stoxx 50",
"ticker": "STOXX50E",
"value": 123469.87,
"change": 100,
"percent": 2.3,
"high": 123499.87,
"low": 123439.87,
"yearHigh": 123499.87,
"yearLow": 123169.87,
"open": 123465.87,
"close": 123459.87,
"constituents": null,
"runDate": "21/04/2015"
},
{
"id": 5,
"name": "S&P 500 ",
"ticker": "S500",
"value": 358976.36,
"change": 100,
"percent": 2.3,
"high": 358986.36,
"low": 358946.36,
"yearHigh": 359976.36,
"yearLow": 357976.36,
"open": 358970.36,
"close": 358996.36,
"constituents": null,
"runDate": "21/04/2015"
},
{
"id": 6,
"name": "Dow Jones I.A.",
"ticker": "INDU",
"value": 456789.36,
"change": 100,
"percent": 2.3,
"high": 456799.36,
"low": 456779.36,
"yearHigh": 456889.36,
"yearLow": 456689.36,
"open": 456729.36,
"close": 456779.36,
"constituents": null,
"runDate": "21/04/2015"
},
{
"id": 7,
"name": "GOLD",
"ticker": "",
"value": 500,
"change": 100,
"percent": 2.3,
"high": 700,
"low": 300,
"yearHigh": 1500,
"yearLow": 350,
"open": 450,
"close": 470,
"constituents": null,
"runDate": "21/04/2015"
},
{
"id": 8,
"name": "Brent Crude",
"ticker": "",
"value": 112,
"change": 100,
"percent": 2.3,
"high": 115,
"low": 107,
"yearHigh": 200,
"yearLow": 72,
"open": 110,
"close": 115,
"constituents": null,
"runDate": "21/04/2015"
}
]

Answer 1

Creo que el valor que establece en la propiedad de indexes no es una matriz sino un objeto.

Vería varias razones para esto:

• Recibe la respuesta en lugar de la carga útil del método getIndexes . En este caso, podría utilizar el operador de map en este método:

  getIndexes() {
  return this.http.get(...).map(res => res.json());
  }

• La carga útil recibida no corresponde a una matriz sino a algunas de sus propiedades. En este caso, debe establecer esta propiedad en la propiedad de indexes .

Si desea iterar sobre las propiedades de un objeto, necesita implementar un filtro personalizado como este:

@Pipe({name: ''keyValues''})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]);
}
return keys;
}
}

y usalo asi

<div class="div_IndxPartition" *ngFor="#indObj of indexes | keyValues">
(...)
</div>

Vea esta pregunta:

• Cómo mostrar el objeto json usando * ngFor

Answer 2

Deberías intentar esto:

En html:

<div *ngFor="let subsciption of subscriptions;">
<div class="col-md-6">
<h5 class="widget-title">{{subsciption.name}}</h5>
</div>
</div>

en el archivo .ts:

 export class SubscriptionComponent implements OnInit {
private subscriptions: any =[];
// private subscriptions: any ={}; // here dont use {}
.
.
.
.
.
getAllSubscriptions(queryString) {
this._http.get(`${environment.base_url}/subscriptions` + queryString)
.subscribe((response: Response) => {
this.subscriptions = response.json();
},
(error: Response) => {
console.log("Login error");
});
}
this.getAllSubscriptions(query);
}

Answer 3

No querrás usar tuberías cuando trabajes con Observables. Este error es muy genérico y la mejor manera es lanzar un console.log () y ver dónde está yendo mal, ya que podría haber muchas cosas.

Mi problema era que mi Array estaba dentro del Objeto, y estaba tratando de hacer un bucle sobre el Objeto. Otros problemas podrían incluir la asignación o el ngFor. La salida de mi consola se vería así:

this.indexes = _service.getIndexes()
.subscribe(
data => {
this.indexes = JSON.parse(data);
console.log(indexes);
},
error => alert(" Error is : " + error),
()=> console.log("finished")
);
console.log(this.indexes);

Así que la solución que necesitaba era algo como esto:

this.indexes = _service.getIndexes()
.subscribe(
data => {
this.myNewObject = JSON.parse(data);
this.indexes = this.myNewObject.indexes;
},
error => alert(" Error is : " + error),
()=> console.log("finished")
);
console.log(this.indexes);

Esto se debía a que la matriz estaba anidada dentro del Objeto, por lo que acabo de crear un nuevo objeto y accedí a la matriz al obtener su propiedad.

Answer 4

Tuve el mismo problema y mi solución fue sin tuberías. No utilicé la variable en la plantilla que devuelve Observer, creo una variable intermedia y le asigno un resultado. Por ejemplo, this.sub flujo en this.sub pero el resultado guardará en this.indexes en una devolución de llamada exitosa y usaremos esta variable en la plantilla html.

@Component({
template: `
<ul>
<li *ngFor="let index of indexs">
{{ index }}
</li>
</ul>
`
})
export class HomeComponent {
privat sub;
public indexes:Array<Index>=[];
public error;
constructor(private _service: HomeService) {
this.sub = this._service.getIndexes().subscribe(
data => this.indexes = JSON.parse(data),
error => alert(" Error is : " + error),
() => console.log("finished")
);
}
}