Uncaught TypeError: Converting circular structure to JSON --- JSON.Stringify Issue

[Chris_G_1975]

Hi,

I'm having problems trying to pass a variable from an HTML panel using JS to an Extendscript function, I can pass a string no problem but when I try and pass an object in using JSON.Stringify I get the following error in the Chrome Debug Window: Uncaught TypeError: Converting circular structure to JSON

My function runs like this:

function onDEFloaded()

{

    fs = require('fs')

    fs.readFile('C:/TTGames/Photoshop/scripts/Master_PBR_Templates/Data_Files/PBR_Default_Materials.json', 'utf8', function (err,data) //Reads JSON File

    {

    if (err)

    {

    return console.log(err);

    }

    console.log(data); //Returns Data Read In Console Log

    {

        var DEFarray = JSON.parse(data); //Parses JSON File And Returns Array

        console.log(DEFarray); //Returns Array In Console Log

        var material="<th>";

        for (var i in DEFarray)

            {

               //Create Material Button

                material+="<h1>" + "<button type=button role=button id=DEF_Material class="myButton" onClick=DEFAULT_Material() data-toggle=tooltip title='Click\ To\ Add\ Material\ Template,\ ALT\ Click\ To\ Add\ Layers'>" + DEFarray.material + "</button>" + "</h1>";

            }

        material+="</th>";

        document.getElementById("Default_Materials").innerHTML=material;

        var roughness="<th>";

        for (var i in DEFarray)

            {

                //Create Roughness Button

                roughness+="<h1>" + "<button type=button role=button id=DEF_Roughness class="myButton2" data-toggle=tooltip title='Click\ To\ Set\ Colour,\ ALT\ Click\ To\ Add\ Layer'>" + DEFarray.roughness + "</button>" + "</h1>";

            }

        roughness+="</th>";

        document.getElementById("Default_Roughness").innerHTML=roughness; //Put Buttons Defined Above In For Loop Back into HTML Element.

        var swatches = document.getElementsByClassName("myButton2"); //Get All Buttons By Class Name.

        var i;

        for (i = 0; i < swatches.length; i++) //Initiate For Loop For Each Button.

            {

            swatches.style.backgroundColor = DEFarray.roughness; //Sets Background Colour Over-Ride Of HTML Buttons So They Look Like Colour Swatches.

            var swatch_colour = DEFarray.roughness;

            console.log(swatch_colour); //Correctly Returns Each Colour Value From JSON File In The For Loop Into The Console Log Window.

            swatches.addEventListener('click', NEW_DEFAULT_Roughness, false); //On-Click Event Listener For Button.

            function NEW_DEFAULT_Roughness(swatch_colour)

                {

                var csInterface = new CSInterface();

                console.log(swatch_colour); //Appears to return - MouseEvent {dataTransfer: null, toElement: button#DEF_Roughness.myButton2, fromElement: null, y: 132, x: 309…}

                csInterface.evalScript('ColourToArtLayer_ROUGH(' + JSON.stringify(swatch_colour) + ')' ), function(res) { console.log(res); } //Generates Uncaught TypeError: Converting circular structure to JSON error.

                }

            }

        }

    });

}

What I want to happen is that is that for each button I generate I need to return the variable swatch_colour from the JSON file as an object that I can use as part of the Extendscript in order to perform some Photoshop function.

If I console log the variable swatch_colour before the event listener the script correctly returns each value from the array in a list shown in the debug log window however if I pass this as an argument to the function: NEW_DEFAULT_Roughness(swatch_colour) and console log that inside the function I get: MouseEvent {dataTransfer: null, toElement: button#DEF_Roughness.myButton2, fromElement: null, y: 132, x: 309…} returned in the log and the JSON.Stringify command returns: Uncaught TypeError: Converting circular structure to JSON

I'm thinking that I'm going about this all wrong but I can't see how I can pass the value from the JSON file for each button into the function to do the evalScript.

Any pointers as to where I might be going wrong appreciated.

Thanks.

[Chris_G_1975]

Small breakthrough, I didn't really need to use JSON.Stringify as my argument would be the correct value returned from the initial JSON file anyways, my syntax was just wrong as I needed to escape my argument as shown below:

csInterface.evalScript('ColourToArtLayer_ROUGH(\'' + swatch_colour + '\')'), function(res) { console.log(res); }

The problem I have now is that for every single button it returns the last value in the JSON file as the result rather than the value at the correct index of the array 😞