Error: Converting circular structure to JSON

Wesley Oliveira

I have a problem with my application. Anyone can help me?

Error: Converting circular structure to JSON

My Service to create items and save on localstorage:

  addItem(item: Item): void {
    this.itens.unshift(item);
    let itens;
    if (localStorage.getItem('itens') == null){
      itens = [];
      itens.unshift(itens);
      localStorage.setItem('itens', JSON.stringify(itens));
    } else {
      JSON.parse(localStorage.getItem('itens'));
      itens.unshift(itens);
      localStorage.setItem('itens', JSON.stringify(itens));
    }
  }

And my component.ts:

  addItem(): void  {
    this.itemAdicionado.emit({
      nome: this.nome,
      unidade: this.unidade,
      quantidade: this.quantidade,
      preco: this.preco,
      perecivel: true,
      validade: this.validade,
      fabricacao: this.fabricacao,
    });

    this.nome = '';
    this.unidade ;
    this.quantidade ;
    this.preco;
    this.validade;
    this.fabricacao;

    console.log(this.nome, this.unidade, this.quantidade, this.preco, this.validade, this.fabricacao);
  }
David Walschots

This isn't an Angular error. It's a JavaScript runtime error thrown by the JSON.stringify function. The error tells you that itens contains a circular object reference. This is OK while you run the application, but when stringifying it causes a problem: the JSON generated would become infinitely long.

As Kevin Koelzer indicated in his answer. The problem is that you wrote itens.unshift(itens);. Basically this adds the array of items to the array of items, thus creating a circular reference. Therefore, writing itens.unshift(item); instead solves your problem and is probably what you intended to do anyway.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

TypeError: Converting circular structure to JSON - find error in json

Converting circular structure to JSON in window

Converting circular structure to JSON Firebase

Error Converting Circular Structure to JSON...take 2

MongoDB and Express: Type Error: Converting Circular structure to JSON

Reading fixture is throwing error TypeError: Converting circular structure to JSON

AWS Cognito - Encountering Error Converting Circular Structure to JSON

[Vue warn]: Error in render: "TypeError: Converting circular structure to JSON

Express Middleware: ERROR: TypeError: Converting circular structure to JSON

Chrome sendrequest error: TypeError: Converting circular structure to JSON

"Converting circular structure to JSON" error despite functions being executed properly

With restify my post is showing a "converting circular structure to JSON" error

ERROR TypeError: Converting circular structure to JSON --> starting at object with constructor 'FormGroup'

Getting error "Converting circular structure to JSON" while working with express,mongodb

Checking headers with an ERROR. Converting circular structure to JSON

Converting circular structure to JSON at JSON.stringify ()

Sequelize: TypeError: Converting circular structure to JSON

GraphCool TypeError: Converting circular structure to JSON

"TypeError: Converting circular structure to JSON" with GET request

"TypeError: Converting circular structure to JSON" with GET request

Elliptic : TypeError : Converting circular structure to JSON

Axios TypeError: Converting circular structure to JSON

express & sequalize Converting circular structure to JSON

Angular - TypeError: Converting circular structure to JSON

TypeError: Converting circular structure to JSON in nodejs

Nodejs express Converting circular structure to JSON

avoiding TypeError: Converting circular structure to JSON

Firebase simple query gives error: "Converting circular structure to JSON at JSON.stringify"

Error Converting circular structure to JSON, while sending json from Flask to Node.js

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive