3


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:

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 :

enter image description here

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

Kirtan
  • 153
  • 1
  • 4
  • 10
  • 1
    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. – ruth Apr 30 '20 at 23:11
  • 1
    Does this answer your question? [Error trying to diff '\[object Object\]' in Angular](https://stackoverflow.com/questions/38216857/error-trying-to-diff-object-object-in-angular) – ruth Apr 30 '20 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 Apr 30 '20 at 23:21
  • type of data you get is not an array ?? i saw in console is an sample object – OAH Apr 30 '20 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 Apr 30 '20 at 23:23
  • i post JSON where you got idea in which format data are Get – Kirtan Apr 30 '20 at 23:29
  • As per your suggested question : my data are in Array Format – Kirtan Apr 30 '20 at 23:33
  • Post new screenshots in the question. Also it isn't helpful to see some data in the middle of the response. Please post the beginning of the console log instead of something in the middle. – ruth May 01 '20 at 07:27

4 Answers4

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

OAH
  • 1,160
  • 2
  • 11
  • 24
  • i use .push method but it push new data every time and its a UPDATE api ... Check service.ts its put api – Kirtan Apr 30 '20 at 23:47
  • i update the answer init the list before push data in it – OAH Apr 30 '20 at 23:51
  • Okay i tried this but it push the new data not perform the put(Update) method – Kirtan Apr 30 '20 at 23:58
  • [Your Output](https://imgur.com/a/qSSyj7g when i refresh all pushed items are gone and also delete record which i use to update – Kirtan May 01 '20 at 00:08
  • I think the error [object object] is resolved now, you still need to find out why the data is not as expected – OAH May 01 '20 at 01:30
  • in console still shows error. it push the data in Variable not in Database(JSON File) so thats why when i refresh the all data's are gone because actual data comes from database(JSON file) – Kirtan May 01 '20 at 12:57
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);
}
ionut-t
  • 1,121
  • 1
  • 7
  • 14
  • i use .push method but it push new data every time and its a UPDATE api – Kirtan Apr 30 '20 at 23:46
  • [Your Output](https://imgur.com/a/qSSyj7g) 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 – Kirtan May 01 '20 at 00:07
  • 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. – ionut-t May 01 '20 at 08:46
  • i do this again what you trying to say i totally understand let me show you code and output both [code & Output](https://imgur.com/a/u86Fwpa) 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). – Kirtan May 01 '20 at 13:06
  • 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. – ionut-t May 01 '20 at 13:15
  • In backend i use NODE.JS and it returns with 200. All good in backed just problem is getting new data after updating the data. and if i write `data=>window.location.refresh()` it works fine but it refresh the page thats the problem `data=>allDatas(data)` from this code i get updated data without refreshing the page – Kirtan May 01 '20 at 13:33
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

user12163165
  • 555
  • 8
  • 12
  • Its an Array type i also attached image that its an array type please check and tell me if i'm wrong – Kirtan Apr 30 '20 at 23:46
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;
});
      }
Muhammed Shafeeque
  • 61
  • 4
  • Hey, i tried this code but its gives error in code [errorInCode](https://imgur.com/a/v01XUsd) and then i edit your code and at the end i put [](brackets) but still not working properly [output](https://imgur.com/a/hMvNAzy) when i click update task it removes all the records from – Kirtan May 01 '20 at 12:55
  • sory mistack is we dont create an array... please add array like this allDatas : Array = []; – Muhammed Shafeeque May 02 '20 at 02:48