Can't find id in DOM! extensions?

A

Artyom2021-01-17 21:08:44

JavaScript

Artyom, 2021-01-17 21:08:44

Insertion of array data from the server into the DOM of the extension, panel.html does not work:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/main.css">
</head>
<body>
    <ul class="nav__extensions">
        <li><a id="main" href="">Главная</a></li>
        <li><a id="vk_parse" href="">vk parse</a></li>
        <li><a id="facebook_parse" href="">facebook parse</a></li>
        <li><a href="">О нас</a></li>
        <li><a href="">Контакты</a></li>
    </ul>

    <div class="items_extensions" id="items_extensions"></div>

</body>
</html>

javascript file:

window.onload = () => {
    var requestURL = "http://mvs.com/feed/ajax";
    var request = new XMLHttpRequest();
    request.open('POST', requestURL)
    request.responseType = 'json';
    request.send()
    request.onload = function() {
        var superHeroes = request.response;
        populateHeader(superHeroes);
    }

    function populateHeader(jsonObj) {
        const items = document.getElementById("items_extensions")
        if (items != null) {

            for (var key in jsonObj) {
                items.innerHTML = jsonObj[key]
                console.log(jsonObj[key])
            }
            console.log(items)
        }
    }
}

manifest.json:

{
    "name": "ParserS V1",
    "description": "ParserS v1",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action" : {
        "default_popup": "panel.html",
        "default_icon": "icon.png"
    },
    "permissions": [
        "storage",
        "activeTab"
    ],
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["background.js", "res_block.js"]
        }
    ]
}

Why isn't data being inserted into my extension's interface?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

G

GF, 2021-01-17
@fomenkogregory

Try converting the json to an object before iterating over it with JSON.parse()

D

Dima Pautov, 2021-01-17
@bootd

Perhaps you allowed a Russian character in the id name, this happens.
There might be something wrong with the markup. Inspect the element to see if the browser sees it correctly.
PS Did you accurately show all the code that you are using or did you accurately copy your code to paste here? Because everything seems to be right