怎样将本地JSON文件中数据对应显示在HTML的元素中？主要是mui.getJSON的回调函数的这块，不知道数据怎样动态对应。

Question

代码如下：

<div class="mui-content">
            <div class="mui-content mui-content-padded">
                
                <p style="font-size: 16px; color:black;">
                    <span id="num"></span>
                    <span id="tm"></span>
                </p>
                <div class="mui-input-row mui-radio ">
                    <label>A
                        <span>：</span>
                        <span id="a"></span>        
                    </label>
                    <input name="radio" type="radio">
                </div>
                <div class="mui-input-row mui-radio ">
                    <label>B
                        <span>：</span>
                    <span id="b"></span>
                    </label>
                    <input name="radio" type="radio">
                </div>
                <div class="mui-input-row mui-radio ">
                    <label>C
                        <span>：</span>
                    <span id="c"></span>
                    </label>
                    <input name="radio" type="radio">
                </div>
                <div class="mui-input-row mui-radio " id="dShow">
                    <label>D
                        <span>：</span>
                    <span id="d"></span>
                    </label>
                    <input name="radio" type="radio">
                </div>
                <button id="btn1" type="button" class="mui-btn mui-btn-blue mui-btn-outlined mui-btn-block">提示框</button>
            </div>
        </div>

        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item" id="pre">
                <span class="mui-tab-label">上一题</span>
            </a>
            <a class="mui-tab-item" id="next">
                <span class="mui-tab-label">下一题</span>
            </a>
        </nav>

        <script type="text/javascript">
            var a = document.getElementById('a'),
                b = document.getElementById('b'),
                c = document.getElementById('c'),
                d = document.getElementById('d'),
                tm = document.getElementById('tm'),
                da = document.getElementById('da'),
                num=document.getElementById('num'),
                pre=document.getElementById('pre'),
                next=document.getElementById('next');
            

            //读取本地JSON数据库数据
            mui.getJSON('data.json', null, function(data) {
            
            });
        </script>

    </body>

———————————————————————————————————————本地JSON文件如下：
{
"danxuan": {

"dx1": {
  "a": "劳动防护用品",
  "b": "工作票",
  "c": "安全工器具",
  "d": "",
  "da": "A",
  "tm": "作业现场的生产条件和安全设施等应符合有关标准规范的要求，工作人员的（    ）应合格、齐备。"
},
"dx2": {
  "a": "参加",
  "b": "接受",
  "c": "学习",
  "d": "",
  "da": "B",
  "tm": "各类作业人员应（    ）相应的安全生产教育和岗位技能培训，经考试合格上岗。"
},
"dx3": {
  "a": "学习培训",
  "b": "安全知识教育",
  "c": "考试合格",
  "d": "",
  "da": "B",
  "tm": "新参加电气工作的人员、实习人员和临时参加劳动的人员(管理人员、非全日制用工等)，应经过（    ）后，方可下现场参加指定的工作，并且不得单独工作。"
}

}
}

Answer 1

//读取本地JSON数据库数据
mui.getJSON('data.json', null, function(data) {
    var json = JSON.parse(data).danxuan;
    var arr = [];
    for(var key in json){
        if(json.hasOwnProperty(key){
            arr.push(json[key]);
        }
    }
    var index = 0;
    num.innerHTML = index;
    a.innerHTML = arr[index].a;
    // ...
    
    function prevItem(){
        var idx = num.innerHTML - 1;
        if(idx < 0)return;
        num.innerHTML = idx;
        a.innerHTML = arr[idx].a;
        // ...
    }
    function nextItem(){
        //...
    }
    
    pre.onclick = function(){
        prevItem();
    }
    next.onclick = function(){
        nextItem();
    }
    
});