【JS】【31】读取json文件-优快云博客

本文介绍如何使用jQuery从JSON文件中读取数据，并根据groupId字段将数据分组显示在不同的HTML元素中。示例代码展示了如何通过switch语句判断groupId的值，将对应的数据插入到预定义的HTML列表中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

1，json文件和js文件我是放在同一个文件夹下的

2，我的需求是根据json文件中的groupId字段分组，把数据放到对应的标签内

正文：

xx.js

//获取json数据
function getJSON(){  
    $.getJSON("js/basedata.json",function(data){  
        $.each(data,function(infoIndex,info){  
            switch(info["groupId"]){
                case "1":
                    $("#countryList").append("<li><a>"+info["value"]+"</a></li>");
                    break;
                case "2":
                    $("#ageList").append("<li><a>"+info["value"]+"</a></li>");
                    break;
                case "3":
                    $("#contactTimeList").append("<li><a>"+info["value"]+"</a></li>");
                    break;
                case "4":
                    $("#hearSourceList").append("<li><a>"+info["value"]+"</a></li>");
                    break;
            } 
        })      
     })  
}

basedata.json

[
    {"groupId":"1", "name":"country", "value":"Kenya"},
    {"groupId":"1", "name":"country", "value":"Nigeria"},
    {"groupId":"1", "name":"country", "value":"Tanzania"},    
    {"groupId":"1", "name":"country", "value":"Uganda"},
    {"groupId":"1", "name":"country", "value":"Zambia"},
    {"groupId":"1", "name":"country", "value":"Ghana"},    
    {"groupId":"2", "name":"age", "value":"18-24 years"},
    {"groupId":"2", "name":"age", "value":"25-34 years"},
    {"groupId":"2", "name":"age", "value":"35-44 years"},    
    {"groupId":"2", "name":"age", "value":"45-54 years"},
    {"groupId":"2", "name":"age", "value":"55 years"},
    {"groupId":"3", "name":"contactTime", "value":"Eight to Ten"},
    {"groupId":"3", "name":"contactTime", "value":"Ten to Twelve"},
    {"groupId":"3", "name":"contactTime", "value":"Twelve to Two"},    
    {"groupId":"3", "name":"contactTime", "value":"Two to Five"},
    {"groupId":"3", "name":"contactTime", "value":"Five to Eight"},
    {"groupId":"3", "name":"contactTime", "value":"Eight to Ten"},    
    {"groupId":"3", "name":"contactTime", "value":"Anytime"},
    {"groupId":"3", "name":"contactTime", "value":"Weekend"},
    {"groupId":"4", "name":"hearSource", "value":"Referral"},    
    {"groupId":"4", "name":"hearSource", "value":"Advertisement"},
    {"groupId":"4", "name":"hearSource", "value":"Event/Meeting"},    
    {"groupId":"4", "name":"hearSource", "value":"Online Search"},
    {"groupId":"4", "name":"hearSource", "value":"Other"}
]

参考博客：

jQuery中读取json文件 - 雨里去 - 优快云博客
https://blog.youkuaiyun.com/abeetle/article/details/8910189

转载于:https://www.cnblogs.com/huashengweilong/p/11119780.html