How to fix json code coming into html dropdown as object Object

Question

I have an HTML dropdown for an InDesign script that when I pull the JSON from the file into, it comes back as object Object. i cannot figure out what i am doing wrong.

I've tried a bunch of answers on here, but none are working with the code I have.

my HTML:

<h4>Design Tools</h4>

    <select id="swatchNumber" onchange="swatchIndex()" class="custom-select"></select>

my jsx:

function swatchIndex() {  
    var doc, swatches, json, n, l, swatch;  
    doc = app.activeDocument;  
    swatches = doc.swatches;  
    json = [];  
    l = swatches.length;  
    for (n = 0; n < l; n++) {  
        swatch = swatches[n];  
        json[n] = '"' + n + '": {' +  
            '"name": "' + swatch.name + '"}' 
    }  
    // prepare the JSON as a string  
    json = '{' + json.join(',') + '}';  
    return json;  
}

my javascript:

var callBack = function (result) {
    try {
        var swatchesConv = JSON.parse(result);

        var select = document.createElement('SELECT');
        select.name="swatchNumber";
        select.id="swatchNumber";
        document.body.appendChild(select);

        Object.keys(swatchesConv).forEach(function(result){
        document.getElementById('swatchNumber').innerHTML +='<option value="'+result+'">'+swatchesConv[result]+'</option>'
        })

        alert(result);

    } catch (e) { alert(e.message); }
//         alert("Wrong");
}
csInterface.evalScript('swatchIndex()', callBack);

the actual JSON that pops into my alert(result): {“0”: {“name”: “None”}, “1”: {“name”: “Registration”), “2”: {“name”: “Paper”}, “3”: {“name”: “Black”}}

when I load the application I get the alert to pop up the JSON but the dropdown shows the right amount but each index just says object Object

Geshode · Accepted Answer · 2019-09-11 08:08:31Z

2

Since swatchesConv is

{
 “0”: {“name”: “None”}, 
 “1”: {“name”: “Registration”), 
 “2”: {“name”: “Paper”}, 
 “3”: {“name”: “Black”}
}

the result in Object.keys(swatchesConv).forEach will be the keys, but the value of swatchesConv[result] will be the object of the key. So, for the key 0 it would be {“name”: “None”}.

To display the name, you have to use:

'<option value="'+result+'">'+swatchesConv[result].name+'</option>'

or

'<option value="'+result+'">'+swatchesConv[result]['name']+'</option>'

when creating the options of the select.

edited Sep 11, 2019 at 8:08

answered Sep 11, 2019 at 1:24

Geshode

3,7686 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blue Moose Over a year ago

thanks so much! the [name] didn't work but the [result].name did! I need to find time to learn json and how to parse! Thanks for everything!

Geshode Over a year ago

Fixed the typo.

Collectives™ on Stack Overflow

How to fix json code coming into html dropdown as object Object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related