时间戳

首页 > 解决方案 > 无法将 JSON 数据或 javascript 函数转换为 HTML

javascript - 无法将 JSON 数据或 javascript 函数转换为 HTML

问题描述

我正在尝试将来自 json 链接的提要放入 html 文档中的单独 div 中，但我尝试的任何方法都不起作用。我从三份报纸上获得了一个 json 链接，并且我尝试了不同来源的不同东西，但我所做的一切都不起作用。

希望可以有人帮帮我。

这是我正在使用的四个文件中的所有内容。我没有包含css文件。

索引.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="sunnmoer.js"></script>
    <script src="adressa.js"></script>
    <script src="romsdal.js"></script>

    <title>Kultur</title>
</head>

<body>
<div id="header">
    <h1>Kultur</h1>
</div>
<div id="container">
    <div id="div-side">
    </div>

    <div id="div-mid">
        <div id="div-romsdal"></div>

        <div id="div-adressa"></div>

        <div id="div-sunnmoer"></div>
    </div>

    <div id="div-side">
    </div>
</div>

<script type="text/javascript">
    sunnmoerFunction();
</script>

<script type="text/javascript">
    adressaFunction();
</script>

<script type="text/javascript">
    romsdalFunction();
</script>

</body>
</html>

adressa.js（从文档中的 json 中写入了一些数据，并试图将其作为 div 获取到 html 文档中）

const items = [
    {
      id: 17501980,
      url:     "https://www.adressa.no/nyheter/innenriks/2018/09/12/L%C3%B8nnsutbetaling-til-    offentlige-ansatte-forsinket-av-IT-tr%C3%B8bbel-17501980.ece",
      title: "Lønnsutbetaling til offentlige ansatte forsinket av IT-    trøbbel",
      content_text: "En feil hos bankenes IT-leverandør gjorde at lønnen til     offentlig ansatte her i landet ikke kom inn på konto før sent onsdag     ettermiddag.",
      date_published: "2018-09-12T22:47:24",
      date_modified: "2018-09-12T22:47:24",
      _polaris_extra: {
        breakingtitle: "",
        kicker: "",
        title_prefix: "",
        paywall: "false",
        section: "innenriks",
        pub_name: "adressa",
        pub_id: 167
      }
    },
    {
      id: 17498454,
      url:     "https://www.adressa.no/nyheter/innenriks/2018/09/12/L%C3%B8nnsutbetaling-til-    offentlige-ansatte-forsinket-av-IT-tr%C3%B8bbel-17498454.ece",
      title: "Lønnsutbetaling til offentlige ansatte forsinket av IT-    trøbbel",
      content_text: "En feil hos bankenes IT-leverandør gjorde at lønnen til     offentlig ansatte her i landet ikke kom inn på konto før sent onsdag     ettermiddag.",
      date_published: "2018-09-12T22:13:21",
      date_modified: "2018-09-12T22:13:21",
      _polaris_extra: {
        breakingtitle: "",
        kicker: "",
        title_prefix: "",
        paywall: "false",
        section: "innenriks",
        pub_name: "adressa",
        pub_id: 167
      }
    }
];

function itemBoxDiv(items) {
    return `
        <a href="$(items.url)">
            <div class=itemBox>
                <h1>${items.title}</h1>
            </div>
        </a>
        `
};

function adressaFunction() {
    document.getElementById("div-adressa").innerHTML = `
        <h1>Adresseavisen</h1>
        ${.map(function(itemBoxDiv).join('')}
    `

romsdal.js（在这里尝试了两种不同的东西，但我想我可能把事情搞砸了）

    function setup() {
    loadJSON("https://www.rbnett.no/?service=jsonfeed", toArray, 'jsonp');
}

function toArray() {
var romsdalItems = [];
for (var key in json) {
    if (json.hasOwnProperty(key)) {
        var item = json[key];
        romsdalItems.push({
            url: item.url,
            title: item.title,
            content_text: item.content_text
        });            
    }
}
};

function itemBoxDiv(items) {
    return `
        <a href="$(items.url)">
            <div class=itemBox>
                <h1>${items.title}</h1>
            </div>
        </a>
        `
};

function romsdalFunction(){
    document.getElementById("div-romsdal").innerHTML = `
        <h1>Romsdals Budstikke</h1>
        ${romsdalItems.map(function(itemBoxDiv).join('')}
    `
}

sunnmoer.js（在这里我试图通过编写自己的数据使其尽可能简单，但也无法让它工作，所以我最终只是试图将一些东西放入 html 文件中，但这并没有工作要么）

const petsData = [
{
    name: "Tim",
    dyr: "Katt",
    alder: "2 år"
},
{
    name: "Ponnikloppen",
    dyr: "Hest",
    alder: "6 år"
},
{
    name: "Ola",
    dyr: "Hund",
    alder: "3 år"
}
];

function sunnmoerFunction() {
    document.getElementById("div-sunnmoer").innerHTML = <h1>Hello</h1>
}

编辑：复制一个文件两次。解决它

标签： javascripthtmljson

解决方案

试试这个，如果您有任何错误，请告诉我

    <script type="text/javascript" src="adressa.js"></script>
                 <script type="text/javascript" >
let div-romsdal = document.getElementById("div-romsdal");
                    function load() {
                         var mydata = JSON.parse(items);
                         alert(mydata.length);

                         var div = document.getElementById('data');

                         for(var i = 0;i < mydata.length; i++)
                         {
                            div-romsdal.innerHTML = div-romsdal.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].id +"</p>" + "<br>";
                         }
                     }
            </script>

或者你也可以使用 Promises

推荐阅读