JSON output only in console, not in browser

Wappler Extensions How To
#1

Hi,

I added custom extension which translate XML files to JSON. It seems to work but I got output only in console (as JSON), not in the browser, there is no error, just empty value. I was trying also with Set Value Step but no result. Do I need to transform JSON to another format or something? To be honest it is my first custom made extension so I could miss something.

var objectValue = JSON.parse(myJSON);

console.log(objectValue.offer.products.product.sizes);
return objectValue.offer.products.product.sizes

Do you have any idea?

It is NodeJS with Docker.

#2

You’ve not posted your entire code, this is going to be difficult for those looking to help you. Can you post the entire code? :slight_smile:

#3

Sure, I can. There can be mess because I am still trying different combinations…

const { XMLParser } = require('fast-xml-parser');
const fs = require('fs');
var util = require('util');

exports.GetJsonXml = function (options) {

var filePath = __dirname + '/../../../' + options.path;

fs.readFile(filePath, 'utf8', function (err, data) {
    if (err) {
        throw err;
    }

    const content = data;

    processFile(content);
    //console.log(content);

});

function processFile(content) {

    const options = {
        ignoreAttributes: false
    };
    const parser = new XMLParser(options);
    const data = parser.parse(content);
    const myJSON = JSON.stringify(data);

    var objectValue = JSON.parse(myJSON);

    console.log(objectValue.offer.products.product.sizes);
return objectValue.offer.products.product.sizes
}

};
#4

You’re missing this:
return processFile(content);

1 Like
#5

Thanks for advise.
I tried to add it in several places but still the same issue. I can see output in Docker console but not in browser. There is just empty value without any errors…

Can you maybe advise where it should be in my code?

#6

Hi,

Sorry about that, I’ve just realized I gave you an incomplete solution…

So, you’re returning something in the function processFile(), that’s good.

However, where your code is processFile(content), you’re not doing anything with the value that was returned. So, I suggested you put return processFile(content) there.

However, this also doesn’t work, because then the value is returned to nothing again:

fs.readFile(filePath, 'utf8', function (err, data) {

Look carefully up there - you’re creating an anonymous function - that’s why the returned value is discarded.

This way of writing Javascript code is no longer recommended, as you can see it’s very easy to make mistakes like this. Nowadays, we use async/await:

Here’s my suggestion:

const { XMLParser } = require('fast-xml-parser');
const fs = require('fs');
var util = require('util');

exports.GetJsonXml = async function (options) {

    function processFile(content) {
        const options = {
            ignoreAttributes: false
        };
        const parser = new XMLParser(options);
        const data = parser.parse(content);
        const myJSON = JSON.stringify(data);

        var objectValue = JSON.parse(myJSON);

        console.log(objectValue.offer.products.product.sizes);
        return objectValue.offer.products.product.sizes
    }

    var filePath = __dirname + '/../../../' + options.path;

    const data = await fs.promises.readFile(filePath, 'utf8');
    return processFile(data)
};

Edit: Ensure you’re using at least NodeJS 16

1 Like
#7

You don’t need to apologies :wink: I appreciate your effort to help with it.

Thanks a lot for clear explanation and code. I paste it and magic happened, it works as expected :smiley: Your are great!

1 Like