Error: TypeError encountered during UI Runtime JSON conversion of Circular Data Structure

I'm facing an issue while attempting to parse and stringify certain JSON data.

The error occurs on this specific line of code:

this.copyOfColumns = JSON.parse(JSON.stringify(Object.assign([], this.columns)));

Below is the complete @Input (using Angular 4):

  @Input()
  set gridColumns(gridColumnsArr: Array<object>) {
    console.log('gridColumnsArr');
    console.log(gridColumnsArr);
    this.columns = this.sortActiveAndInactiveColumns(gridColumnsArr);
    console.log('this.columns');
    console.log(this.columns);
    this.copyOfColumns = JSON.parse(JSON.stringify(Object.assign([], this.columns)));
    console.log('this.copyOfColumns');
    console.log(this.copyOfColumns);
  }

Here are the details logged in the console for 'this.columns'...along with the subsequent errors:

https://i.sstatic.net/ytHWJ.png

Answer №1

It seems like you're looking to create a deep copy of an array using the method JSON.parse(JSON.stringify()). However, it appears that your data structure contains circular references, causing the JSON.stringify() to fail.

To address this issue, consider sanitizing your data to remove circular references or explore using a library such as flatted.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing @PathVariable in Spring to handle Strings with IP addresses without needing a trailing slash

This snippet is a segment of my controller code: @RequestMapping(value="/json/getPCs/{serverAddress}", method=RequestMethod.GET) public @ResponseBody List<PC> getPCForServerJSON(@PathVariable String serverAddress) { logger.info("Server address: ...

Is moduleId a reserved word in Angular2 / CLI?

After downloading the newest CLI version, I initiated a fresh test project. angular2 version: "^2.3.1" "@angular/compiler-cli": "^2.3.1", "typescript": "~2.0.3" Within AppComponent, there is this constructor: export class AppComponent ...

Unclear value of button when being passed

In my Welcome.html file, I am attempting to send the value of a button to a function that simply logs that value. This function is located in a functions class that has been imported into my welcome.ts file. <ion-content padding id="page1"> <h1 ...

The tableView is not showing the data I have inputted

I am struggling to retrieve data from an API and facing issues with displaying the data. Alamofire.request(https://jsonplaceholder.typicode.com/comments, method: .get, encoding: URLEncoding.default, headers: nil).validate(statusCode: 200..<300).respons ...

Utilizing AngularJS to Retrieve JSON Data in Controller using Factory

I am facing an issue with loading data in the controller, it is returning undefined. Below is my factory service: app.factory('factoryLlamada', function($http,$q) { return{ cargar: function(archivo) { var deferred = $q.defer(); ...

In my Cordova application, I am able to print the locally stored JSON array, but I am encountering an issue where the

Hello, I'm having some difficulties with JSON as a beginner. I've tried searching extensively but haven't found a solution that works for me. My issue arises when attempting to save data using local storage in JSON format - the array prints ...

Encountering both a CORS error and data in Angular 7

My application is using Angular 7 for the front end and Node.js (express) for the backend. The cors module in the Node.js server.js file is implemented like this: var cors = require('cors') app.use(cors()); When making an API call from the fro ...

Tips for creating a cookie for an alternate website upon launching a new browser tab

Hey there, I'm facing an issue that I could really use some help with. To give you some context, I'm working on a project using Angular and TypeScript. My goal is to implement single sign-on functionality for multiple websites within one applica ...

The HttpParams are reluctant to be established

Working with Angular 8, I am attempting to assign an HttpParam using the provided code snippet and observing the outcome on the final line. let newParams = new HttpParams(); newParams.set('ordering', 'name'); console.log('getting: ...

Arrange information in table format using Angular Material

I have successfully set up a component in Angular and Material. The data I need is accessible through the BitBucket status API: However, I am facing an issue with enabling column sorting for all 3 columns using default settings. Any help or guidance on th ...

When running the command `npm start`, an error message is generated

Hey everyone, I've been trying to learn some basic AngularJS 2.0 skills through a tutorial. Unfortunately, when I tried running the command npm run start, it didn't work as expected. I'm currently using Git Bash on Windows 10 OS. If you hav ...

Extracting a data element from a JSON array nested within an object

I am attempting to retrieve a value from a JSONP web-service, however I am unsure of the method to access this specific value within the JSON array. $('#bookThumbnaill').attr('src', bookDetails.volumeInfo.imageLinks.thumbnail); $(&apo ...

Trouble with Angular 4: One-time binding directive not functioning properly

I am currently working on incorporating a directive for one-time binding in order to ensure that when I use this directive, the one-time binding feature is enabled. For reference, here is an example I created: https://stackblitz.com/edit/angular-bhayzy W ...

Utilize Gson to generate and analyze JSON data containing nested objects including a local date

I encountered an error while trying to parse my JSON data. java.lang.IllegalStateException: Expected a string but was NAME at line 1 column 313 path $.reminder com.google.gson.JsonSyntaxException: java.lang.IllegalStateException: Expected a string but was ...

What is the best way to create a MySQL query using the JSON data provided?

Here is the example data that is being sent to the PHP script: [{"id":1,"due_date":"2011-09-03","due_amount":"48279.00","wo_interest":"45980.00"}, {"id":2,"due_date":"2011-10-03","due_amount":"48279.00","wo_interest":"45980.00"}] The table fields are in ...

Unable to retrieve data from Angular service to component

My service function involves querying the database for products. getPro():any{ this.database.all("SELECT * FROM product").then(rows => { console.log("hello pro hear....") let productList:Product[]=[] for(var row in rows) { ...

Can optional properties or defaults have a specific type requirement defined for them?

When defining a type for a function's input, I want to designate certain properties as required and others as optional: type Input = { // Required: url: string, method: string, // Optional: timeoutMS?: number, maxRedirects?: number, } In ...

What is the syntax for creating ES6 arrow functions in TypeScript?

Without a doubt, TypeScript is the way to go for JavaScript projects. Its advantages are numerous, but one of the standout features is typed variables. Arrow functions, like the one below, are also fantastic: const arFunc = ({ n, m }) => console.log(`$ ...

Typescript - Defining string value interfaces

I have a property that can only be assigned one of four specific strings. Currently, I am using a simple | to define these options. However, I want to reuse these types in other parts of my code. How can I create an interface that includes just these 4 va ...

How can we direct the user to another tab in Angular Mat Tab using a child component?

Within my Angular page, I have implemented 4 tabs using mat-tab. Each tab contains a child component that encapsulates smaller components to cater to the specific functionality of that tab. Now, I am faced with the challenge of navigating the user from a ...