CODEWITHSUNDEEP
javascripthtml
Geco
Geco

Reputation: 197

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

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.

Upvotes: 0

Views: 2109

Answers (3)

Himanshu Chhikara
Himanshu Chhikara

Reputation: 51

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)

Upvotes: 0

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

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);

Upvotes: 3

Pat Freeze
Pat Freeze

Reputation: 1

Instead of

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

try

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

Upvotes: -1

Related Questions