read json file in the desktop using jquery

Contributor ,
Dec 22, 2021 Dec 22, 2021

Copy link to clipboard

Copied

Hi All,

Im working in CEP panel, my requirement is to read json file in the desktop and insert the data into html fields.

 

I can't able to read the json file in the local path using jquery. And also I tried to integrate the JS code in Jquery that also not works.

Is there any option to fetch the data in the local path using jquery. Any help is much appreciated.

Thanks

TOPICS
Scripting , SDK

Views

345

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Dec 23, 2021 Dec 23, 2021

I have seen your code. There are two issues

1. JSON file data

2. Use complete path to the file in the _filePath variable

 

I hope it will work after doing these changes.

Likes

Translate

Translate
Adobe Community Professional ,
Dec 22, 2021 Dec 22, 2021

Copy link to clipboard

Copied

Hi,

In CEP panels you can use node module 'fs' to read the file. Below is the simple example to read json file in CEP panel.

 

var filePath = '/Users/charu/Desktop/test.json'
_jsonData = cep.fs.readFile(filePath)
if (_jsonData.err == 0) {
    var _data = JSON.parse(_jsonData.data)
}

 

 

NOTE: Change filePath value as per your requirements.

Best regards

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 23, 2021 Dec 23, 2021

Copy link to clipboard

Copied

Thanks Charu! 

This Code was not work at my end. If I need to include any library js file for this code works?

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 23, 2021 Dec 23, 2021

Copy link to clipboard

Copied

There is no need to include anything. These nodes modules are in built. When you say it is not working, could you please explain what exactly not working or what error are you getting? You just need to enable the node parameter in manifest file.

Best regards

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 23, 2021 Dec 23, 2021

Copy link to clipboard

Copied

I have customized the XMP Sample panel and created new fields. Actually Im trying to update the values for fields from the json file. I tried many ways but won't work and integrated your code in the below app.js file but it doesn't work. Yes enabled the node parameter in manifest file. 

 

var filePath = '~/Desktop/RelayMetadata.json'
_jsonData = cep.fs.readFile(filePath)

//if (_jsonData.err == 0) {
	var _data = JSON.parse(_jsonData.data)
	alert(_data)
//}


$(document).ready(function () {

	/**
	 * Helper function that extracts all mandatory information needed to reference an XMP property 
	 * from a given HTML node and constructs a simple data object based on that.
	 */
	function getFieldInfo(elem, callback) {
		var $elem = $(elem);

		var field = {
			elem: $elem,
			property: $elem.attr('data-property'),
			namespace: $elem.attr('data-namespace'),
			value: $elem.val()
		};

		if ($elem.attr('data-namespace-ref')) {

			// if namespace-ref is present it needs to be resolved to a valid URI via XMPBridge.
			XMPBridge.toNamespaceURI($elem.attr('data-namespace-ref'), function (namespaceURI) {
				field.namespace = namespaceURI;
				callback(field);
			});

		} else {
			callback(field);
		}
	}


	/**
	 * We're registering our data binding code for execution once the XMPBridge is ready to use.
	 * This prevents us to access any property before the ExtendScript library is initialized 
	 * properly.
	 */
	XMPBridge.onInit(function (state) {

		if (!state.isError) {

			$("#main").show();

			// retrieve a descriptive name for the active target item�(e.g. active document, footage, ...)
			XMPBridge.getTargetName(function (targetName) {

				// stored in an arbitrary HTML element with id="target-name"
				$('#target-name').html(targetName);

			});

			// all html nodes having a "data-property" attribute will be considered for data binding.
			var $fields = $("[data-property]");

			$fields.each(function () {
				getFieldInfo(this, function (field) {

					XMPBridge.read(field.namespace, field.property, function (value) {

						// form fields are initialized with the property's current value ...
						if (field.elem.is('input,textarea')) {
							if(field.elem.attr('data-property') == 'hww_id_deliverable'){
								field.elem.val("XXXX");
							}
							if(field.elem.attr('data-property') == 'hww_product'){
								field.elem.val("test1");
							}
				
							//	field.elem.val(value);
							// ... for other elements we just replace the node's inner HTML.
						} else {
							field.elem.html(value);
						}

					});

				});
			});

			// if the form is being submitted, we update the metadata and write it back into the application DOM.
			$("form").submit(function () {

				// only process writeable property fields.
				$fields.filter('input,textarea').each(function () {
					getFieldInfo(this, function (field) {
						XMPBridge.write(field.namespace, field.property, field.value);
					});
				});

				// commit the changes so they're reflected by the application DOM.
				XMPBridge.commit();

			});

		} else {

			$("#message .text").html(state.statusMessage).parent().fadeIn();

		}

	});

});

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 23, 2021 Dec 23, 2021

Copy link to clipboard

Copied

Could you please attach full CEP code as azip or email me on my email id.

My email id is sent you as a private message.

Best regards

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 23, 2021 Dec 23, 2021

Copy link to clipboard

Copied

Sure I will send! Thanks

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 23, 2021 Dec 23, 2021

Copy link to clipboard

Copied

I have seen your code. There are two issues

1. JSON file data

2. Use complete path to the file in the _filePath variable

 

I hope it will work after doing these changes.

Best regards

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 27, 2021 Dec 27, 2021

Copy link to clipboard

Copied

Hi Charu,
Is it Possible to pass the filepath from the jsx to js (i.e., indesign activeDocument filepath)?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 27, 2021 Dec 27, 2021

Copy link to clipboard

Copied

Yes it is very much possible but how it has to be done depends on how the workflow would work. If you want this process to be trigerred from jsx(like on an event happening on InDesign) then you can work with CSXS events. See the following posts for details

https://community.adobe.com/t5/photoshop-ecosystem-discussions/dispatching-an-event-from-index-jsx-t...

https://community.adobe.com/t5/illustrator-discussions/in-extension-how-to-call-function-from-javasc...

If you want to trigger this from js then its simple, just call up the function of jsx via evalScript.

-Manan

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

I have tried with the below code passing filepath from jsx to js using evalscript. But it doesn't work. Could you check this?

 

//jsx code

	function activeDocumentPath(){
		//@include 'json2.jsx'
		var myDocPath = app.activeDocument.filepath;
		alert(myDocPath)
		var finalDocPath = myDocPath.toString();
		var docObj = {
			filePath: finalDocPath
		}
	return JSON.stringify(docObj);
	}

 
// js code

	var csInterface = new CSInterface();

	csInterface.evalScript("activeDocumentPath()", function(res) {
		if (EvalScript_ErrMessage == res) {
			alert('EvalScript_ErrMessage and res is' + typeof res + ' res is ' + res);
		}
		else {
			var filePath = JSON.parse(res);
			alert(filePath)
		}
	}); 




Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

please ignore in jsx code filepath instead of filePath

 

Thanks

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

So you got it working or you still need help figuring this out?

-Manan

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

Till not working, there is no response from the js side. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 29, 2021 Dec 29, 2021

Copy link to clipboard

Copied

Worked for me, i just copied the json2.js file into the folder where the jsx resided. Changed the include statement extension to js instead of jsx and it worked

Do note that in the js end you use

var filePath = JSON.parse(res);

This will create an object so to get the filePath you will have to use

alert(filePath.filePath)

 If you still have troubles I would suggest you first try just the jsx code with InDesign and see if executes fine for you or gives an error.

-Manan

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 29, 2021 Dec 29, 2021

Copy link to clipboard

Copied

Hi Manan
I have tried the methods as you mentioned already and checked the function in indesign its working fine. But not pass the data to js.
For your information I have sent the CEP panel for your review. Please check and share youre thoughts.

Thanks

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 29, 2021 Dec 29, 2021

Copy link to clipboard

Copied

Hi Manan,
How to return the myFilePath value from the outside of the Promise function? If I put alert the outside of promise function call for myFilePath got undefined. And even get same result in callback function too.

		var csInterface = new CSInterface();
		var myFilePath;
		function runEvalScript(script) {
			return new Promise(function(resolve, reject){
				csInterface.evalScript(script, resolve);
			});
		}
		
		runEvalScript("app.activeDocument.filePath").then(function(data){
			myFilePath = data;
		})
                alert(myFilePath) // Undefined  

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 30, 2021 Dec 30, 2021

Copy link to clipboard

Copied

You are looking under the wrong tree. I looked at your code and it seems you did not follow the instructions I sent you. How did you get the activeDocumentPath running find in ExtendScript? It's not even defined. Let me explain, you have activeDocumentPath method defined twice as private function inside the file XmpSamplePanel.jsx so that method is not available in global scope so just calling it like activeDocumentPath() won't work. Either define the method in global scope or expose it via the objects within which you have defined.

For testing first execute just the XmpSamplePanel.jsx file in ESTK and try calling your method, whatever works here the same calling statement can then be used in the JS file.

-Manan

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 30, 2021 Dec 30, 2021

Copy link to clipboard

Copied

Hi Manan,

I have checked XmpSamplePanel.jsx file in the ESTK its working fine and returns the file path. Let me know how to talk from jsx to js, is there any steps to follow?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 30, 2021 Dec 30, 2021

Copy link to clipboard

Copied

So you mean to say that you were able to just write the following call in your XmpSamplePanel.jsx and it worked? I was not able to get it working that way, can you share over here the exact contents of the jsx file that you claim to be executing successfully.

activeDocumentPath()

Also please share it here as code not as a personal message because that way the discussion helps nobody except you, but we should aspire to make the discussion worthwhile for other folks with the same problem as well.

-Manan

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 02, 2022 Jan 02, 2022

Copy link to clipboard

Copied

The below function I have checked in ESTK separately its working fine.

	activeDocumentPath()

	function activeDocumentPath(){
		//@include 'json2.js'
		var myDocPath = app.activeDocument.filePath;
		alert(myDocPath)
		var finalDocPath = myDocPath.toString();
		var docObj = {
			filePath: finalDocPath
		}
	return JSON.stringify(docObj);
	}

But it doesn't return the file path from jsx to js.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 03, 2022 Jan 03, 2022

Copy link to clipboard

Copied

Did you even read my last post where i explained what is the issue according to my assessment i.e. https://community.adobe.com/t5/indesign-discussions/read-json-file-in-the-desktop-using-jquery/m-p/1...

I asked you to execute XmpSamplePanel.jsx and check if you are able to call the activeDocumentPath method without adding a new definition for it(the file already has two definitions for the method, you seriously need to refactor this file). However, what you tested is by adding the defintion and the call, it was bound to work. In the current state your method is undefined as far as I can see and that is the error, not that the method is called but something inside it fails.

No one will get their hands into fixing the bug in your code(someone might do it but not all the time), I am trying to make you learn but I see you are not willing to apply the required effort to solve this. There are no more hints I can give unless you follow the instructions already given and come back with some new information.

P.S.:- I don't claim to be totally correct. My assessment could be wrong but you did not present any facts to that effect.

-Manan

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 03, 2022 Jan 03, 2022

Copy link to clipboard

Copied

Hi Manan,

 

I have tried everything as you suggested, it doesn't work for me. Thanks for your help and I tried with different method its worked.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 03, 2022 Jan 03, 2022

Copy link to clipboard

Copied

That's good news. If you don't mind, please share what you did to resolve this so that the next person facing this could benefit out of this discussion.

-Manan

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 04, 2022 Jan 04, 2022

Copy link to clipboard

Copied

LATEST

Yes Sure

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines