problem with javascript Object , i always get [object Object] instead of the value i want

Question

this is my HTML file

<body>
    <form id="myform" style="width:200px;margin:0 auto" >
        <select id="selectCountry" class="btn btn-secondary dropdown-toggle">
            <option>یک کشور را انتخاب کنید</option>
        </select>
        <button type="button" class="btn btn-danger" onclick="myFunction()">Try it</button>
    </form>
    <script src="./script.js"></script>
    <script>
    function myFunction() {
        var x = document.getElementById("selectCountry").selectedIndex;
        var result = document.getElementsByTagName("option")[x].value;
        console.log(result); // this line gives [Object object]
    }
    </script>
    
</body>

console.log(result); gives back [object Object] no matter what i do.`

and this is my .js file

const api_url = 'https://api.covid19api.com/summary';
var dropDownSelector = document.getElementById('selectCountry');
var api_countries = [];
var api_getCountrySpecifics = [];

// Initializing The Api ///
    async function getData(url) {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    }  

    getData(api_url).then(response => {
        
        for( var i=0 ; i < 190 ; i++ ) {
             api_countries.push(response.Countries[i].Country);
             api_getCountrySpecifics.push(response.Countries[i]);
        }

        for(var j = 0 ; j < 190 ; j++) {
            var opt = api_countries[j];
            var specifics = api_getCountrySpecifics[j]
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = specifics;
            dropDownSelector.appendChild(el);
        }
});

Does anyone know what's the problem? it is very important to me to solve this. thank you beforehand.

problem is el.value = specifics; assigns an object to an html attribute — bel3atar
– bel3atar, Commented May 27, 2021 at 17:06
We have to have a duplicate for this in vanilla JS, but all I can find are posts focusing on jQuery. — zcoop98
– zcoop98, Commented May 27, 2021 at 17:10
You can clearly see on your code that response.Countries[i] is an object since you push its Country property on api_countries. It all boils down to... What do you want to do with this object. — MinusFour
– MinusFour, Commented May 27, 2021 at 17:12

I wrestled a bear once. · Accepted Answer · 2021-05-27 17:14:57Z

3

Because your API call is returning an array of objects but you are treating it like an array of strings.

On this line:

el.value = specifics;

specifics is an object and it is being automatically converted to a string, when that happens the JS engine turns it into [Object object].

You need to examine that object and assign a string to the value instead of that whole object.

If you want the whole object to be the value, you need to stringify it first and then decode it later...

el.value = JSON.stringify(specifics);

And then...

var result = JSON.parse(document.getElementsByTagName("option")[x].value);

edited May 27, 2021 at 17:14

answered May 27, 2021 at 17:05

I wrestled a bear once.

23.5k20 gold badges74 silver badges122 bronze badges

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

Comments

Himanshu Chhikara · Accepted Answer · 2021-07-21 07:35:33Z

0

As the data is in object and you need to convert that object into value.

So, For that you can simply assign a variable and then check the value in the console.

let value = JSON.stringify(result)

edited Jul 21, 2021 at 7:35

answered May 27, 2021 at 17:02

Himanshu Chhikara

513 bronze badges

Comments

Pat Freeze · Accepted Answer · 2021-05-27 17:12:21Z

-1

Instead of

var result = document.getElementsByTagName("option")[x].value;

try

var result = document.getElementsByTagName("option")[x].innerText;

answered May 27, 2021 at 17:12

Pat Freeze

14 bronze badges

Collectives™ on Stack Overflow

problem with javascript Object , i always get [object Object] instead of the value i want

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related