I need to get the key & value from a JSON to add it in an option created in JS.

In my html, I've just add input hidden to get data in JS like this :

<input type="hidden" value="<?= htmlspecialchars(json_encode($availableFlag)) ?>" id="list-flag">

$availableFlag is defined in my php just above :

$availableFlag = App::getAvailableTags();

And this function is defined in another class and give me that :

public static function getAvailableTags(): array {
        return array_merge(self::$availableTags, [
            Tag::TAG_OUT_UE => Tag::TAG_TYPE_ERROR, // Those variables are const
            Tag::TAG_PHYSICAL_TICKET     => Tag::TAG_TYPE_WARNING, // defined in the Tag class
        ]);
    }

So, back to my main problem. I'm creating dynamic options based on the lenght of my array

const listFlag = JSON.parse(oid("list-flag").value);
        
for (let i = 0; i < listFlag.length; i++) {
    filterFlagSelect.options[filterFlagSelect.options.length] = new Option(listFlag[i], listFlag[i]);
}

But listFlag[i] is undefined, and I don't know what to do because keys in listFlag is never the same.

This is my content in listFlag

{
  "out-ue": "error",
  "physical-ticket": "warning"
}

And listFlag.length seem to have problems too