Angular : Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Question

i got Error trying to diff '[object Object]'. Only arrays and iterables are allowed this error when i'm trying to get updated data

Get code:

allDatas
  allData(data) {
    this.allDatas = data
  }

Okay So this is Update Code i Write :

updateTodo(currentTodo){  
       // console.log(currentTodo)
        this._todo.updateTask(currentTodo).subscribe(
          data=>{console.log(data);this.allData(data)},
          error=>console.log(error)
        )
  }

This Request Comes From Service.ts

updateTask(todo:TodoModel):Observable<TodoModel>{
    return this._http.put<TodoModel>('http://127.0.0.1:3000/todo/updateTodo/'+todo.id,todo,headerOption)
  }

I checked all the things using cosole.log And at the end i got the line from where i got the error let me show you

updateTodo(currentTodo){  
           // console.log(currentTodo)
            this._todo.updateTask(currentTodo).subscribe(
              data=>{console.log(data);this.allData(data)}, //Error Comes from this line----------
              error=>console.log(error)
            )
      }

this is the same update code : when i write data=>console.log(data) in update code then there is no longer error shows but when i use data=>{console.log(data);this.allData(data)} i got this Error:

HTML : where i bind data:

<tbody *ngFor="let t of allDatas;let i= index">
                <tr class="table-success" *ngIf="t && t.complited">
                    <td>{{t.task}}</td>
                    <td>{{t.date.year+"-"+t.date.month+"-"+t.date.day}}</td>
                    <td> {{t.complited}}</td>
                    <td>
                        <i class="fa fa-times-circle btn idelete" style="font-size:25px;" (click)="putTrue(t)"></i>
                        <i class="fa fa-edit btn iedit" style="font-size:25px;color:rgb(31, 12, 12)" (click)="editTodo(t)"></i>
                        <i class="fa fa-trash-o btn idelete" style="font-size:25px;" (click)="deleteTask(t.id)"></i>
                    </td>
                </tr>
                <tr class="table-danger" *ngIf="t && !t.complited">
                    <td>{{t.task}}</td>
                    <td>{{t.date.year+"-"+t.date.month+"-"+t.date.day}}</td>
                    <td> {{t.complited}}</td>
                    <td>
                        <i class="fa fa-check-circle btn idone" style="font-size:25px;" (click)="putTrue(t)"></i>
                        <i class="fa fa-edit btn iedit" style="font-size:25px;color:rgb(31, 12, 12)" (click)="editTodo(t)"></i>
                        <i class="fa fa-trash-o btn idelete" style="font-size:25px;" (click)="deleteTask(t.id)"></i>
                    </td>
                </tr>
            </tbody>

So allDatas is A array :

JSON Data: Where all oprations are Performed

[{"id":29,"task":"random 5","date":{"year":2020,"month":5,"day":9},"category":"genral","complited":false},null,{"id":31,"task":"task 32","date":{"year":2020,"month":5,"day":31},"category":"genral","complited":false}]

so in short i got error when i update task and getting updated task but i use the same method for post put other data i get perfect result
please someone help me i'm trying to solve this error since very long...

You need to show the template where the this.allDatas variable is used. It looks like the API is returning an object and you are probably trying to loop over it using *ngFor directive. — Barremian
– Barremian, Commented Apr 30, 2020 at 23:11
Does this answer your question? Error trying to diff '[object Object]' in Angular — Barremian
– Barremian, Commented Apr 30, 2020 at 23:13
i think there is no issue of array or object because in post method i use the same approach at there its working fine — Kirtan
– Kirtan, Commented Apr 30, 2020 at 23:21
type of data you get is not an array ?? i saw in console is an sample object — OAH
– OAH, Commented Apr 30, 2020 at 23:22
i Add HTML code i bind date as Different because of format issue i also check by removing date but it shows the same error — Kirtan
– Kirtan, Commented Apr 30, 2020 at 23:23

ionut-t · Accepted Answer · 2020-04-30 23:39:21Z

0

From what I can understand from your code, you are getting the error because you are assigning an object to an array in allData method.

In the subscription of the PUT request you receive an object and not an array.

This is how your allData method should look like:

allData(data) {
 this.allDatas.push(data);
}

answered Apr 30, 2020 at 23:39

ionut-t

1,1771 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kirtan Over a year ago

i use .push method but it push new data every time and its a UPDATE api

Kirtan Over a year ago

Your Output hey i run your code but its not updating my Record it just push the value repeatedly and when i refresh it delete the value with all pushed value and the original record

ionut-t Over a year ago

the PUT request (update) returns in the request body a JSON object and not an array. that object is your updated todo. I assume you're getting that behaviour you mention above because you're using the allData method also for getting all todos. if is that the case, you should keep that method as you already have it and in the subscription of the update request, you should have this.allDatas.push(data) (data, in this case, is the object). if won't work create a stackblitz with a reproduction of your code.

Kirtan Over a year ago

i do this again what you trying to say i totally understand let me show you code and output both code & Output here you find 2 images of code and output so when i click update it push new task every time and when i refresh the page all pushed data are gone because its update in Variable not in actual database (JSON file).

ionut-t Over a year ago

hmm, it seems to me that you are not getting the data from the server as you should. can you post the code on how you retrieve the whole todos from the server? do you get any errors from the server when you're updating the todo? you should also check your network tab to see if the request gives you 200 status code after update.

|

OAH · Accepted Answer · 2020-04-30 23:49:51Z

0

Try to initialise allDatas: this.allDatas=[]

updateTodo(currentTodo){  
          // console.log(currentTodo)
            this._todo.updateTask(currentTodo).subscribe(
              data=>{
               this.allDatas=[]
               console.log(data);
               this.allDatas.push(data)
}

            )
      }

But the best solution is to change the return type of your API to an array []

edited Apr 30, 2020 at 23:49

answered Apr 30, 2020 at 23:34

OAH

1,2102 gold badges12 silver badges24 bronze badges

6 Comments

Kirtan Over a year ago

i use .push method but it push new data every time and its a UPDATE api ... Check service.ts its put api

OAH Over a year ago

i update the answer init the list before push data in it

Kirtan Over a year ago

Okay i tried this but it push the new data not perform the put(Update) method

Kirtan Over a year ago

[Your Output](imgur.com/a/qSSyj7g when i refresh all pushed items are gone and also delete record which i use to update

OAH Over a year ago

I think the error [object object] is resolved now, you still need to find out why the data is not as expected

|

user12163165 · Accepted Answer · 2020-05-01 00:20:35Z

0

This error is related to *ngFor loop in your html file. it basically says that allDatas is not an array.

Verify the type of allDatas using "typeof" make sure it's an array.

EDIT
I saw the second image and it looks like it's an array.
Please also try to validate that array using an online validation tool.. search Google for json validator.

Also move the *ngFor loop from <tbody> to <tr>

good luck

edited May 1, 2020 at 0:20

answered Apr 30, 2020 at 23:40

user12163165

6551 gold badge9 silver badges13 bronze badges

1 Comment

Kirtan Over a year ago

Its an Array type i also attached image that its an array type please check and tell me if i'm wrong

Muhammed Shafeeque · Accepted Answer · 2020-05-02 02:47:43Z

0

try this
if you use this.allDatas = data; the allDatas refresh and 'allDatas' equals 'data'.
if you use this.allDatas.push(data); the 'data' newly added into the 'allDatas'

and first create a array allDatas : Array = [];

   allDatas : Array<any> = [];

updateTodo(currentTodo){  
          // console.log(currentTodo)
            this._todo.updateTask(currentTodo).subscribe(
              data=>{
               console.log(data);
               this.allDatas = data;
});
      }

edited May 2, 2020 at 2:47

answered May 1, 2020 at 5:12

Muhammed Shafeeque

614 bronze badges

2 Comments

Kirtan Over a year ago

Hey, i tried this code but its gives error in code errorInCode and then i edit your code and at the end i put [](brackets) but still not working properly output when i click update task it removes all the records from

Muhammed Shafeeque Over a year ago

sory mistack is we dont create an array... please add array like this allDatas : Array<any> = [];

Collectives™ on Stack Overflow

Angular : Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Get code:

Okay So this is Update Code i Write :

This Request Comes From Service.ts

HTML : where i bind data:

JSON Data: Where all oprations are Performed

4 Answers 4

6 Comments

6 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Get code:

Okay So this is Update Code i Write :

This Request Comes From Service.ts

HTML : where i bind data:

JSON Data: Where all oprations are Performed

4 Answers 4

6 Comments

6 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related