Parsing JSON in adobe illustrator extended panel

[OhmsG]

I currently have two files.

A js file "myjs.js" and a jsx file "myjsx.jsx"

I pass some data and call a method in myjsx.jsx file like so:

      const someData = ['john', 'bar', 'son', 'datto'];
      csiRun.evalScript(`setupPlateTemplate('${someData}')`);

I then can view this data in my jsx file.

function setupPlateTemplate(orderData) {

alert( JSON(orderData) );

} 

This alerts a full string if I try to do this: alert (JSON(orderData[0]))  I get the alert of '"' since it's reading it as a string I only get the first character which is ".

I try this alert (JSON.parse(orderData)) but nothing happens.  Nothing as in no error or anything.

I'm using this library: json2.jsx found here.

I tried json.stringify on the js before I send it and that doesn't work either.  Any idea what I'm doing wrong?

[Inventsable]

Hi, JSON is a class, not a method. Try csiRun.evalScript(`setupPlateTemplate('${JSON.stringify(someData)}')`) in JS, then in JSX:

function setupPlateTemplate(orderData) { alert( JSON.parse(orderData) ); }

[OhmsG]

This doesn't work or give any error.  Same thing nothing happens. @Inventsable

[Inventsable]

That is the correct syntax, so your problem is likely somewhere earlier in your setup. If JSON fails in JSX, it will cause the entire script to silently fail. I'd confirm with an alert the line below with just a string, like "hello world". If both alerts don't fire, there's an evalScript error. You may be able to use a try/catch statement to find it. Otherwise:

1. Are you sure you've evaluated json2.jsx before your myjsx.jsx? And each before this function in myjs.js is fired?
2. Is json2 a .js or .jsx file?
3. For this to work, you must stringify it before passing to evalScript, then you must parse it at the beginning of the jsx function. If not, your use of single-quotes in both the array you send and in the evalScript parameter will likely throw false pairs. Do you have this on a Github repo?

[OhmsG]

I did it in a try / catch and I got this error:  

ReferenceError: JSON.parse is not a function

The file is a jsx it's called json2.jsx in my jsx directory.  I'm including it like this:

In my jsx file: 

#include 'json2.jsx' 

To confirm the file is being read I added a method

function testMeInHere() {

alert('I work')

} 

it fired so I know that the file is being read.  Any idea what I'm doing wrong?

[Inventsable]

I don't know that include syntax works for JSON. Did you try doing the evalFile method I showed you in the thread before last? I never use include since it doesn't have full cross-app support any way.

Are you sure you actually need JSON? What does the array data you need actually look like, instead of mock data?

[OhmsG]

This is the code from the previous thread I tried.

let root = decodeURI(csiRun.getSystemPath("extension")).replace(/file\:\/{1,}/, "");
const json2File = `${root}/jsx/json2.jsx`;
const productTemplateSetupFile = `${root}/jsx/productTemplateSetup.jsx`;
csiRun.evalScript(json2File);
csiRun.evalScript(productTemplateSetupFile);
const someData = ['john', 'bar', 'son', 'datto'];
csiRun.evalScript(`setupPlateTemplate('${JSON.stringify(someData)}')`)

This appears to not even get to the jsx since the try / catch doesn't fire.  

The data is pretty complex, it's a return from an api call so there will be different objects and arrays I need to manipulate.  

[Inventsable · Accepted solution]

Hi, the code you've just quoted is incorrect. You've confused the $.evalFile with CSInterface.evalScript, you should be doing this instead:

let root = decodeURI(csiRun.getSystemPath("extension")).replace(/file\:\/{1,}/, "");
const json2File = `${root}/jsx/json2.jsx`;
const productTemplateSetupFile = `${root}/jsx/productTemplateSetup.jsx`;
csiRun.evalScript(`$.evalFile('${json2File}')`);
csiRun.evalScript(`$.evalFile('${productTemplateSetupFile}')`);
const someData = ['john', 'bar', 'son', 'datto'];
csiRun.evalScript(`setupPlateTemplate('${JSON.stringify(someData)}')`)

Notice that I'm using $.evalFile to the root path, otherwise you're just passing an arbitrary string (which happens to be a file path) into CSInterface.evalScript but you aren't calling any function on it so it has no effect.

[OhmsG]

With the code above I get the error:

ReferenceError: JSON.parse is not a function

[Inventsable]

Something is wrong with the setup or file paths. You've double-checked they are correct? Where did you get the json2.jsx file from? This would be infinitely easier if you had a Github repo so I could actually see the code prior to this, otherwise I'm really in the dark here.

Have you fully reloaded your panel after any script edits?

[Inventsable]

I've made you a sample panel that proves this logic with the exact code from before. You can feel free to copy/paste from it or grab the exact json file I'm using, and the install/run steps are on the readme.

• User clicks a button
• A function is called which evaluates json2.jsx, the script, then creates an arbitrary array and passes stringified data to a function.
• The function is called in JSX context. It parses the contents, alerts them, adds another Array entry, then returns a stringified result back to JS.
• The panel takes the result, parses it, and displays it.

It may be confusing to you because it's written in Vue, meaning that HTML, JS, and CSS are all intermixed into a single file. You only need to pay attention to 3 files, listed on the readme

[Inventsable]

A related thread with answers from Davide Barranca 

[OhmsG]

I went back and replaced the jsx library to the json2.js referenced in that other article.

It now works!  It obviously has something to do with that other library.  I don't know if he just didn't use JSON.parse() and added some other syntax or what.  I'm going to mark your example with the evalfile as the correct answer since that also was a problem with my code, thank you!  @Inventsable