El error NGFOR solo admite la unión a Iterables, como las matrices. JSON ARRAY es válido -- javascript campo con arrays campo con json campo con angular campo con multidimensional-array camp Relacionados El problema

ERROR NgFor only supports binding to Iterables such as Arrays. JSON array is valid


0
vote

problema

Español

Sigo obteniendo un error de error: no se puede encontrar un objeto de soporte diferente '[Objeto de objeto]' de tipo 'objeto'. NGFOR solo admite la unión a Iterables, como las matrices.

   *ngFor="let spec of vehicleSpecs"   

He intentado todo lo que puedo pensar, incluida la búsqueda aquí. Es una matriz JSON válida, por lo que realmente no entiendo lo que está pasando.

View-specs.ts

  ngOnInit() {     // get locally saved user information     let user_id = window.localStorage.getItem('user_id');      // construct the url     let apiUrl = 'https://ridetrekker.com/api_v1/vehiclespecs/' + this.vehicle_id;      // add the X-API-KEY HTTP header as required by API     let key = window.localStorage.getItem('key');     let options = {         headers: new HttpHeaders({             'X-API-KEY': key         })     };      // do the ajax request     this.http.get(apiUrl, options)         .subscribe(result => {             console.log(result);             this.vehicleSpecs = result.data;           }); }   

Datos JSON

   { "status": true, "message": null, "data": {     "0": {         "model_detail_id": "1509824",         "type_title": null,         "unit_title": "Millimeters",         "unit_code": "MM",         "measurement_type_title": "Free Play",         "type_item_title": null,         "spec_title": "Clutch Cable",         "system_title": "Controls",         "value_a": 10,         "value_b": 20     },     "1": {         "model_detail_id": "1509827",         "type_title": null,         "unit_title": "Millimeters",         "unit_code": "MM",         "measurement_type_title": "Free Play",         "type_item_title": null,         "spec_title": "Throttle Cable",         "system_title": "Controls",         "value_a": 2,         "value_b": 6     },     "2": {         "model_detail_id": "1509830",         "type_title": null,         "unit_title": "RPM",         "unit_code": "R/Min",         "measurement_type_title": "RPM",         "type_item_title": null,         "spec_title": "Engine Idle Speed",         "system_title": "Engine - General",         "value_a": 830,         "value_b": 1030     },     "3": {         "model_detail_id": "1509851",         "type_title": "Engine Oil Grades",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Standard Grade",         "type_item_title": "GN4 10W-40",         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": null,         "value_b": null     },     "4": {         "model_detail_id": "1509854",         "type_title": "Engine Oil Grades",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Premium Grade",         "type_item_title": "HP4S 10W-30 Synthetic Oil",         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": null,         "value_b": null     },     "5": {         "model_detail_id": "1509707",         "type_title": null,         "unit_title": "Liters",         "unit_code": "L",         "measurement_type_title": "Level",         "type_item_title": null,         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": 3.5,         "value_b": null     },     "6": {         "model_detail_id": "1509710",         "type_title": null,         "unit_title": "Liters",         "unit_code": "L",         "measurement_type_title": "Level With Filter",         "type_item_title": null,         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": 3.7,         "value_b": null     },     "7": {         "model_detail_id": "1509716",         "type_title": null,         "unit_title": "Foot Pounds",         "unit_code": "FT LBS",         "measurement_type_title": "Torque",         "type_item_title": null,         "spec_title": "Engine Oil Drain Bolt",         "system_title": "Engine - General",         "value_a": 22,         "value_b": null     },     "8": {         "model_detail_id": "1509719",         "type_title": null,         "unit_title": "Foot Pounds",         "unit_code": "FT LBS",         "measurement_type_title": "Torque",         "type_item_title": null,         "spec_title": "Engine Oil Filter",         "system_title": "Engine - General",         "value_a": 19,         "value_b": null     },     "9": {         "model_detail_id": "1509866",         "type_title": "Spark Plug Type",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Type",         "type_item_title": "DCPR6E",         "spec_title": "Spark Plug",         "system_title": "Ignition",         "value_a": null,         "value_b": null     },     "10": {         "model_detail_id": "1509869",         "type_title": "Spark Plug Type",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Type",         "type_item_title": "DCPR7E",         "spec_title": "Spark Plug Alternate",         "system_title": "Ignition",         "value_a": null,         "value_b": null     } }   

}

Original en ingles

I keep getting ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

 *ngFor="let spec of vehicleSpecs" 

I've tried everything I can think of, including searching here. It's a valid JSON array, so I really don't understand what's going on.

view-specs.ts

ngOnInit() {     // get locally saved user information     let user_id = window.localStorage.getItem('user_id');      // construct the url     let apiUrl = 'https://ridetrekker.com/api_v1/vehiclespecs/' + this.vehicle_id;      // add the X-API-KEY HTTP header as required by API     let key = window.localStorage.getItem('key');     let options = {         headers: new HttpHeaders({             'X-API-KEY': key         })     };      // do the ajax request     this.http.get(apiUrl, options)         .subscribe(result => {             console.log(result);             this.vehicleSpecs = result.data;           }); } 

JSON data

 { "status": true, "message": null, "data": {     "0": {         "model_detail_id": "1509824",         "type_title": null,         "unit_title": "Millimeters",         "unit_code": "MM",         "measurement_type_title": "Free Play",         "type_item_title": null,         "spec_title": "Clutch Cable",         "system_title": "Controls",         "value_a": 10,         "value_b": 20     },     "1": {         "model_detail_id": "1509827",         "type_title": null,         "unit_title": "Millimeters",         "unit_code": "MM",         "measurement_type_title": "Free Play",         "type_item_title": null,         "spec_title": "Throttle Cable",         "system_title": "Controls",         "value_a": 2,         "value_b": 6     },     "2": {         "model_detail_id": "1509830",         "type_title": null,         "unit_title": "RPM",         "unit_code": "R/Min",         "measurement_type_title": "RPM",         "type_item_title": null,         "spec_title": "Engine Idle Speed",         "system_title": "Engine - General",         "value_a": 830,         "value_b": 1030     },     "3": {         "model_detail_id": "1509851",         "type_title": "Engine Oil Grades",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Standard Grade",         "type_item_title": "GN4 10W-40",         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": null,         "value_b": null     },     "4": {         "model_detail_id": "1509854",         "type_title": "Engine Oil Grades",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Premium Grade",         "type_item_title": "HP4S 10W-30 Synthetic Oil",         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": null,         "value_b": null     },     "5": {         "model_detail_id": "1509707",         "type_title": null,         "unit_title": "Liters",         "unit_code": "L",         "measurement_type_title": "Level",         "type_item_title": null,         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": 3.5,         "value_b": null     },     "6": {         "model_detail_id": "1509710",         "type_title": null,         "unit_title": "Liters",         "unit_code": "L",         "measurement_type_title": "Level With Filter",         "type_item_title": null,         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": 3.7,         "value_b": null     },     "7": {         "model_detail_id": "1509716",         "type_title": null,         "unit_title": "Foot Pounds",         "unit_code": "FT LBS",         "measurement_type_title": "Torque",         "type_item_title": null,         "spec_title": "Engine Oil Drain Bolt",         "system_title": "Engine - General",         "value_a": 22,         "value_b": null     },     "8": {         "model_detail_id": "1509719",         "type_title": null,         "unit_title": "Foot Pounds",         "unit_code": "FT LBS",         "measurement_type_title": "Torque",         "type_item_title": null,         "spec_title": "Engine Oil Filter",         "system_title": "Engine - General",         "value_a": 19,         "value_b": null     },     "9": {         "model_detail_id": "1509866",         "type_title": "Spark Plug Type",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Type",         "type_item_title": "DCPR6E",         "spec_title": "Spark Plug",         "system_title": "Ignition",         "value_a": null,         "value_b": null     },     "10": {         "model_detail_id": "1509869",         "type_title": "Spark Plug Type",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Type",         "type_item_title": "DCPR7E",         "spec_title": "Spark Plug Alternate",         "system_title": "Ignition",         "value_a": null,         "value_b": null     } } 

}

              
 
 

Lista de respuestas

0
 
vote
vote
La mejor respuesta
 

Si está utilizando Angular 6.1 Use KeyValue Pipe

  _capitalize3  

para angular 2 +

Pruebe esto

ts

  _capitalize4  

html

  _capitalize5  

Ejemplo: https://stackblitz.com/edit/angular-6-template -R9DMNV

 

If you are using angular 6.1 Use keyvalue pipe

*ngFor="let spec of vehicleSpecs.data | keyvalue" 

For angular 2+

Try this

TS

 get key(){     return Object.keys(this.results.data);   } 

HTML

  <div *ngFor="let k of key">       <div>key: {{results.data[k].model_detail_id}}</div>           <div>key: {{results.data[k].unit_title}}</div>     </div>  

Example:https://stackblitz.com/edit/angular-6-template-r9dmnv

 
 
         
         
0
 
vote

Puedes probar:

  _capitalize6  

o use tubería de valor clave:

  _capitalize7  
 

you can try:

vehicleSpecs=[]  for(let item in result.data)   this.vehicleSpecs.push(item) 

or use keyvalue pipe:

<div *ngFor="let item of vehicleSpecs.data | keyvalue"> 
 
 
 
 
0
 
vote

Si está utilizando Angular 6.1, soporta TUBO KEYVALUE.

  _capitalize8  
 

If you are using Angular 6.1 it supports keyvalue pipe.

<p>Maps & KeyValue Pipe</p> <div *ngFor="let item of vehicleSpecs.data | keyvalue">     Key: <b>{{item.key}}</b> and Value: <b>{{item.value.model_detail_id}}</b> </div> 
 
 
   
   
0
 
vote

JSON no es válido,

Si desea iterar utilizando ngfor , el tipo de datos debe ser matriz

es como JSON válido,

  _capitalize9  
 

Json is not valid,

If you want to iterate using ngFor then the type of data must be array

valid json is like,

{ "status": true, "message": null, "data": [     "0": {         "model_detail_id": "1509824",         "type_title": null,         "unit_title": "Millimeters",         "unit_code": "MM",         "measurement_type_title": "Free Play",         "type_item_title": null,         "spec_title": "Clutch Cable",         "system_title": "Controls",         "value_a": 10,         "value_b": 20     },     "1": {         "model_detail_id": "1509827",         "type_title": null,         "unit_title": "Millimeters",         "unit_code": "MM",         "measurement_type_title": "Free Play",         "type_item_title": null,         "spec_title": "Throttle Cable",         "system_title": "Controls",         "value_a": 2,         "value_b": 6     },     "2": {         "model_detail_id": "1509830",         "type_title": null,         "unit_title": "RPM",         "unit_code": "R/Min",         "measurement_type_title": "RPM",         "type_item_title": null,         "spec_title": "Engine Idle Speed",         "system_title": "Engine - General",         "value_a": 830,         "value_b": 1030     },     "3": {         "model_detail_id": "1509851",         "type_title": "Engine Oil Grades",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Standard Grade",         "type_item_title": "GN4 10W-40",         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": null,         "value_b": null     },     "4": {         "model_detail_id": "1509854",         "type_title": "Engine Oil Grades",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Premium Grade",         "type_item_title": "HP4S 10W-30 Synthetic Oil",         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": null,         "value_b": null     },     "5": {         "model_detail_id": "1509707",         "type_title": null,         "unit_title": "Liters",         "unit_code": "L",         "measurement_type_title": "Level",         "type_item_title": null,         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": 3.5,         "value_b": null     },     "6": {         "model_detail_id": "1509710",         "type_title": null,         "unit_title": "Liters",         "unit_code": "L",         "measurement_type_title": "Level With Filter",         "type_item_title": null,         "spec_title": "Engine Oil",         "system_title": "Engine - General",         "value_a": 3.7,         "value_b": null     },     "7": {         "model_detail_id": "1509716",         "type_title": null,         "unit_title": "Foot Pounds",         "unit_code": "FT LBS",         "measurement_type_title": "Torque",         "type_item_title": null,         "spec_title": "Engine Oil Drain Bolt",         "system_title": "Engine - General",         "value_a": 22,         "value_b": null     },     "8": {         "model_detail_id": "1509719",         "type_title": null,         "unit_title": "Foot Pounds",         "unit_code": "FT LBS",         "measurement_type_title": "Torque",         "type_item_title": null,         "spec_title": "Engine Oil Filter",         "system_title": "Engine - General",         "value_a": 19,         "value_b": null     },     "9": {         "model_detail_id": "1509866",         "type_title": "Spark Plug Type",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Type",         "type_item_title": "DCPR6E",         "spec_title": "Spark Plug",         "system_title": "Ignition",         "value_a": null,         "value_b": null     },     "10": {         "model_detail_id": "1509869",         "type_title": "Spark Plug Type",         "unit_title": null,         "unit_code": null,         "measurement_type_title": "Type",         "type_item_title": "DCPR7E",         "spec_title": "Spark Plug Alternate",         "system_title": "Ignition",         "value_a": null,         "value_b": null      }   ]     } 
 
 
   
   
0
 
vote

Como veo sed0 es un sed1 de sed2 , necesita una matriz o convertir a la matriz de objetos.

Si está utilizando la última versión de angular, simplemente puede usar la tubería KeyValue.

  sed3  
 

As i see result.data is an object of objects, you need either an array or convert to array of objects.

if you are using latest version of angular, you can simply use the keyvalue pipe.

<div *ngFor="let item of vehicleSpecs.data | keyvalue"> 
 
 
   
   

Relacionados problema

0  ¿Cómo usaría la función .split para separar diferentes tipos de datos en matrices 2D?  ( How would i use the split function to separate different data types into 2d arr ) 
Tengo un archivo .txt que tiene varias líneas como esta: Robot 1923 human M 12M Star Gaze, 73, 1543, B, Joseph Smith Sanction 1932 indigo X 23X GI, 999...

9  ¿Cómo puedo usar un STD :: Valarray para almacenar / manipular una matriz de 2D contigua?  ( How can i use a stdvalarray to store manipulate a contiguous 2d array ) 
¿Cómo puedo usar un 9988777661 para almacenar / manipular una matriz 2D? Me gustaría ver un ejemplo de una matriz 2D con elementos accesibles por índices ...

3  Manteneros de datos sencillos en Python  ( Simple data storing in python ) 
Estoy buscando una solución simple con Python para almacenar datos como un archivo plano, de modo que cada línea sea una representación de cadena de una matri...

3  Problema con la salida del programa  ( Problem with program output ) 
A continuación es mi programa y estoy teniendo un problema con la función determinante. La entrada del archivo es: 2 1 0 0 1 3 8 9 1 3 5 2 -2 3 -1 0 ...

2  C ++ ¿Cómo usar y pasar una matriz de caracteres tridimensionales?  ( C how to use and pass a 3 dimensional char array ) 
Estoy tratando de construir una matriz de caracteres para almacenar el valor de retorno de una función. En la siguiente función, los datos se almacenan en ***...

11  ¿Cuál es la mejor manera de establecer todos los valores de una matriz tridimensional a cero en Java?  ( Whats the best way to set all values of a three dimensional array to zero in ja ) 
Tengo una matriz tridimensional que quiero reiniciar a cero. Parece que debería haber una manera fácil de hacer esto que no implique tres IOException16 Loop...

1  Obtenga elementos específicos de NDARRAY de NDARrays con forma (n,)  ( Get specific elements from ndarray of ndarrays with shape n ) 
Dado el NDARRAY: A = np.array([np.array([1], dtype='f'), np.array([2, 3], dtype='f'), np.array([4, 5], dtype='f'), ...

2  PHP - Hacer una matriz asociativa multidimensional de una cadena delimitada  ( Php make multi dimensional associative array from a delimited string ) 
¿Puedes convertir esta cadena: "package.deal.category" en una matriz como esta: $array['package']['deal']['category'] El valor dentro del índice...

-1  Clasificación de la matriz multidimensional en Java [cerrado]  ( Sorting multidimensional array in java ) 
Es difícil decir qué se está preguntando aquí. Esta pregunta es ambigua, vaga, incompleta, demasiado amplia, o retórica y n...

12  Obtenga el valor máximo de un elemento en una matriz multidimensional?  ( Get the maximum value from an element in a multidimensional array ) 
Estoy tratando de seleccionar el valor máximo para una clave particular en una matriz multidimensional. Estoy teniendo problemas "Llegar a" la clave en cuesti...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos