Javascript 如何从这个Json文件中获取值

我试图从加载php和JQueryAjax的json文件中获取音乐类型列表

这是我的json格式

JQuery

PHP

我的HTML文件

类型：

显示

---

我只得到“原始”json输出，我想从数组中获取流派值？

修复从服务器返回json的方式：

public function index(){
        $file = file_get_contents(APPPATH . "third_party/genres-master/genres.json");
        header('Content-Type: application/json');
        echo $file;
}

您需要创建要附加的html元素

// Get genres
$("#showgenres").click(function(){

    var genres = $("#genrelist");

    $.ajax({
        url: base_url + "genres/index",
        method : "GET",
        success: function(data){
           var html = "<ul>"
           for(var i = 0; i < data.length; i++) {
              html += ("<li>"+data[i]+"</li>");
           }
           html += "</ul>";
           genres.append(html);
        }
    });

    return false;

});

//获取流派
$（“#showgenres”）。单击（函数（）{
变量类型=$（“#类型列表”）；
$.ajax({
url:base_url+“流派/索引”，
方法：“获取”，
成功：功能（数据）{
var html=“
”
对于（变量i=0；i”+数据[i]+“”）；
}
html+=“
”；
追加（html）；
}
});
返回false；
});

替换Ajax调用（我在这里托管了json）：

//获取流派
$（“#showgenres”）。单击（函数（）{
变量类型=$（“#类型列表”）；
$.ajax({
url:“https://api.myjson.com/bins/hs8kd",
方法：“获取”，
成功：功能（数据）{
var html=“
”
对于（变量i=0；i”+数据[i]+“”）；
}
html+=“
”；
追加（html）；
}
});
返回false；
});

体裁：

显示
您可以使用以下命令

$.ajax({
    dataType: "json",
    url: base_url + "genres/index",
    method : "GET",
    success: function(data){
        genres.append(data);
    }
});

var htmlData=”“；
$.ajax({
url:base_url+“流派/索引”，
方法：“获取”，
成功：功能（数据）{
data=JSON.parse（数据）；
$。每个（数据、功能（i、v）{
htmlData+=v+“
”；
}
追加（htmlData）；
}
});

这将显示以下数据：

12小节蓝调

双音

二级车库

四拍

50秒级数

无伴奏合唱

手风琴

酸分解

酸房子

酸爵士乐

酸性岩石

酸性技术

酸恍惚

无声音乐

声学的

未捕获类型错误：无法使用'in'运算符搜索'length'，这只给了我每行的第一个字母是字符串形式的json吗？请尝试
data=json.parse（data）；
在
for
loopYes之前是的，我尝试过，但得到错误“未捕获的语法错误：json中的意外数字位于26905位置”你能在pastebin上分享吗？我已经更新了我的答案。试着改变从服务器返回json的方式。
<h3>Genres:</h3>
<hr>

<div id="genrelist"></div>

<button id="showgenres">Show</button>

public function index(){
        $file = file_get_contents(APPPATH . "third_party/genres-master/genres.json");
        header('Content-Type: application/json');
        echo $file;
}

// Get genres
$("#showgenres").click(function(){

    var genres = $("#genrelist");

    $.ajax({
        url: base_url + "genres/index",
        method : "GET",
        success: function(data){
           var html = "<ul>"
           for(var i = 0; i < data.length; i++) {
              html += ("<li>"+data[i]+"</li>");
           }
           html += "</ul>";
           genres.append(html);
        }
    });

    return false;

});

$.ajax({
    dataType: "json",
    url: base_url + "genres/index",
    method : "GET",
    success: function(data){
        genres.append(data);
    }
});

    var htmlData = "";
    $.ajax({
    url: base_url + "genres/index",
    method : "GET",
    success: function(data){
     data=JSON.parse(data);
     $.each(data,function(i,v) {
      htmlData+=v+"<br/>";
      }
       genres.append(htmlData);
    }
});