时间戳

首页 > 解决方案 > 如何使用按钮和js循环遍历json

javascript - 如何使用按钮和js循环遍历json

问题描述

我写js代码失败，点击按钮后在html页面上一个接一个地显示json数组的元素。

我从本地服务器上的数据库以 json 格式接收单词。这是我的 http 请求，它返回 json 并尝试计算这个 json 有多少项目（为了让按钮理解，在点击超过 json 中的实际项目数之后，js 代码必须从头开始显示单词）：

var ajax = new XMLHttpRequest();
var method = 'GET';
var url = 'data.php';
var asynchronous = true;

ajax.open(method, url, asynchronous);
ajax.send();
ajax.onreadystatechange = function()
{
    if (this.readyState ==  4 && this.status == 200)
    { 
        var words = JSON.parse(this.responseText)
      //  alert(this.responseText);
        console.log(words);
    //  console.log(words[0].word_item);
         var i, j
     for ( i  in words){
         console.log(words[i].word_item);   
     }
     var arrayLenth = words.length;
     console.log(arrayLenth);    
     return arrayLenth;

        }
    }

这是我收到的 json 数组：

    0
    :
    {id: "1", word_item: "house"}
    1
    :
    {id: "26", word_item: "architecto"}
    2
    :
    {id: "27", word_item: "tenetur"}
    3
    :
    {id: "28", word_item: "Adipisci"}
    4
    :
    {id: "29", word_item: "provident"}
    5
    :
    {id: "30", word_item: "tenetur"}

这是我的 js 按钮计数器。

var clicks = 0;
    function clickCount(){
        do   { 
            clicks ++;
            console.log(clicks);
            document.getElementById('place').innerHTML=clicks;
                if (clicks >=6) {
                    clicks=0;
                };      
            }
        while (clicks>=7);
                            }

在“if (clicks >=6)”行中，我希望看到的不是“6”，而是包含我的 json 长度的变量，但所有尝试都是徒劳的。

这是html页面：

<body>
 <button onClick='clickCount()'>Жми</button>
<div id = 'place'></div>

我能做些什么来解决这个问题？

预期结果如下：

谢谢

标签： javascriptjsonhttp

解决方案

如果我理解正确，解决方案是这样的：

const jsonArr = [
  { id: 0, field: "value" },
  { id: 1, field: "value2" },
  { id: 2, field: "value3" }
];

initializeButton(jsonArr);

function initializeButton(arr) {
  let counter = 0;
  btn.addEventListener("click", () => {
    let element = arr[counter];
    output.textContent = JSON.stringify(element);
    counter = (counter + 1) % arr.length;
  });
}
<button id="btn">Click here</button>
<output id="output"></output>

在您的代码中，您应该输入如下内容：

ajax.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var words = JSON.parse(this.responseText);
    initializeButton(words);
  }
};

推荐阅读