Javascript没有'；t右Div中的输出_Javascript_Html_Json

Javascript没有'；t右Div中的输出

javascript html json

Javascript没有'；t右Div中的输出,javascript,html,json,Javascript,Html,Json,我有三个单独的JS脚本从三个不同的JSON文件中提取数据我在页面顶部声明div并执行脚本。每一个都使用document.getElementById函数指向不同的div 它不起作用，我很难理解为什么。3个JSON解析正确，但输出在我在顶部声明的div之后堆叠在一起 <body onload="op();"> <h2>1</h2> <div id="myData2"></div> <h2>2<

我有三个单独的JS脚本从三个不同的JSON文件中提取数据

我在页面顶部声明div并执行脚本。每一个都使用document.getElementById函数指向不同的div

它不起作用，我很难理解为什么。3个JSON解析正确，但输出在我在顶部声明的div之后堆叠在一起

<body onload="op();">

    <h2>1</h2>
    <div id="myData2"></div>
    <h2>2</h2>
    <div id="myData"></div>
    <h2>3</h2>
    <div id="myData3"></div>

    <div class="container">
        <div class="columns">
            <div class="column is-half">
                                <script>
                        fetch('top.json')
                            .then(function (response) {
                                return response.json();
                            })
                            .then(function (data) {
                                appendData(data);
                            })
                            .catch(function (err) {
                                console.log('error: ' + err);
                            });
                        function appendData(data) {
                            var mainContainer1 = document.getElementById("myData");
                            for (var i = 0; i < data.data.children.length; i++) {
                                var div = document.createElement("div");
                                div.innerHTML = data.data.children[i].data.title;
                                mainContainer1.appendChild(div);
                            }
                        }
                    </script>
                </div>
        </div>
    </div>

    <div class="container">
        <div class="columns">
            <div class="column is-half">

                    <script>
                            fetch('top.json')
                                .then(function (response) {
                                    return response.json();
                                })
                                .then(function (data2) {
                                    appendData(data2);
                                })
                                .catch(function (err) {
                                    console.log('error: ' + err);
                                });
                            function appendData(data2) {
                                var mainContainer2 = document.getElementById("myData2");
                                for (var i = 0; i < data2.data.children.length; i++) {
                                    var div = document.createElement("div");
                                    div.innerHTML = data2.data.children[i].data.title;
                                    mainContainer2.appendChild(div);
                                }

                            }

                    </script>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="columns">
            <div class="column is-half">
                    <script>
                            fetch('local3.json')
                                .then(function (response) {
                                    return response.json();
                                })
                                .then(function (data2) {
                                    appendData(data2);
                                })
                                .catch(function (err) {
                                    console.log('error: ' + err);
                                });
                            function appendData(data2) {
                                var mainContainer3 = document.getElementById("myData3");
                                for (var i = 0; i < data2.data.children.length; i++) {
                                    var div = document.createElement("div");
                                    div.innerHTML = data2.data.children[i].data.title;
                                    mainContainer3.appendChild(div);
                                }
                            }
                    </script>

            </div>
        </div>
    </div>


1.
2.
3.
fetch（'top.json'）
.然后（功能（响应）{
返回response.json（）；
})
.then（功能（数据）{
附加数据（数据）；
})
.catch（函数（err）{
log（'error:'+err）；
});
函数追加数据（数据）{
var mainContainer1=document.getElementById（“myData”）；
对于（var i=0；i

这里的问题在于这一行：

.then（函数（数据）{
附加数据（数据）；
})

由于所有函数都具有相同的名称，
追加数据（data）
将始终调用相同的
函数
，即以下函数：

函数追加数据（数据）{
var mainContainer1=document.getElementById（“myData”）；
对于（var i=0；i


然后你的数据会像往常一样粘在同一个地方
因此，为了解决这个问题，您不必每次都使用不同的函数，然后在中调用它们。然后，您只需在中执行函数操作就可以让它变得更简单。然后，就像这样：
.then（函数（数据）{
var mainContainer1=document.getElementById（“myData”）；
对于（var i=0；i
因为您多次覆盖函数appendData
这不需要任何命名函数，您可以直接将代码放入。然后（function（data2）{…}）
中。谢谢@smakss这现在非常有意义。我觉得我在html中出错了，完全忽略了json函数。。。谢谢