Javascript 用JS解析JSON foreach，显示HTML列表

我目前正在尝试用JavaScript解析JSON。我的问题是，我希望输出如下所示：

<li>AppName1</li>
<li>AppName2</li>
<!-- and so on... -->

这是我的.js文件：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("test").innerHTML = myObj.AppName;
  }
};
xmlhttp.open("GET", "json.json", true);
xmlhttp.send();

这在我的HTML文件中

<p id="test"></p>

---

任何帮助都将不胜感激，因为我似乎一点也不明白这一点。非常感谢你

首先请注意，您只能将

li

元素作为

或

的子元素，因此需要更改

p

元素

AppName

属性是

data

中对象的一部分，因此您需要在它们之间循环：

myObj.data.forEach(function(o) {
   document.getElementById("test").innerHTML += '<li>' + o.AppName + '</li>';
}

myObj.data.forEach（函数（o）{
document.getElementById（“test”）.innerHTML+='
'+o.AppName+'
'；
}

或通过索引分别访问它们：

document.getElementById("test").innerHTML = '<li>' + myObj.data[0].AppName + '</li>'; // first item only

document.getElementById（“test”）.innerHTML='
'+myObj.data[0].AppName+'
'；//仅限第一项

var myObj={
“数据”：[{
“AppId”：3，
“AppName”：“AnimojiStudio”，
“AppSlug”：“animojistudio”，
“AppIcon”：“https:\/\/img.lmdinteractive.pro\/icons\/animojistudio.png”，
“AppUrl:“https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/animojistudio.ipa”，
“AppVersion”：“1.2.2”，
“AppSize”：“2.1”
}, {
“AppId”：2，
“AppName”：“Cute Cut Pro”，
“AppSlug”：“可爱的切割专家”，
“AppIcon”：“http:\/\/is2.mzstatic.com\/image\/thumb\/Purple118\/v4\/03\/70\/69\/03706968-2399-a1d8-e7c4-12897394ead9\/source\/512x512bb.jpg”，
“AppUrl:“https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/cutecutpro.ipa”，
“AppVersion”：“，
“AppSize”：”
}]
}
document.getElementById（“test”）.innerHTML='
'+myObj.data[0].AppName+'
'；

---

使用
forEach
循环和
append
。在
p标签中插入
li
不是一个好主意，即使它有效。将
p
转换为
ul/ol


var数据={
“数据”：[{
“AppId”：3，
“AppName”：“AnimojiStudio”，
“AppSlug”：“animojistudio”，
“AppIcon”：“https:\/\/img.lmdinteractive.pro\/icons\/animojistudio.png”，
“AppUrl:“https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/animojistudio.ipa”，
“AppVersion”：“1.2.2”，
“AppSize”：“2.1”
}, {
“AppId”：2，
“AppName”：“Cute Cut Pro”，
“AppSlug”：“可爱的切割专家”，
“AppIcon”：“http:\/\/is2.mzstatic.com\/image\/thumb\/Purple118\/v4\/03\/70\/69\/03706968-2399-a1d8-e7c4-12897394ead9\/source\/512x512bb.jpg”，
“AppUrl:“https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/cutecutpro.ipa”，
“AppVersion”：“，
“AppSize”：”
}]
}
data.data.forEach（e=>$（“#test”）.append（“
”+e.AppName+”
“+”
”）

如果您只想获得
AppName
属性的列表，可以使用jQuery执行以下操作。有关详细信息，请参阅代码中的注释：


//下面是OP链接中的JSON字符串
让json='{“data”：[{“AppId”：3，“AppName”：“AnimojiStudio”，“AppSlug”：“AnimojiStudio”，“AppIcon”：“https:\/\/img.lmdinteractive.pro\/icons\/AnimojiStudio.png”，“AppUrl”：“https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/AnimojiStudio.ipa”，“AppVersion”：“1.2.2”，“AppId”：2，“AppName”：“Cute Cute Cut pro”，“AppSlug”：“Cute Cute Cut-pro”，“app-pro”“http:\/\/is2.mzstatic.com\/image\/thumb\/Purple118\/v4\/03\/70\/69\/03706968-2399-a1d8-e7c4-12897394ead9\/source\/512x512bb.jpg”，“AppUrl:“https:\/\/ipa.lmdinteractive.pro\/ipa\/appstore\/cutecutpro.ipa”，“AppVersion:”“AppSize:”}]；
//将JSON字符串解析为JS对象
json=json.parse（json）；
设html=“”；
//循环对象并为每个AppName属性附加一个列表项。
$.each（json.data，函数（索引，项）{
html+=“
”+item.AppName+”
”；
});
//将列表附加到div。
$（“#容器”）.append（html）；

您可以使用map（），因为myObj中有一个数组。您要做的是返回一个带有AppName值的li

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    var ul = document.getElementById("myUl");
    var li = document.createElement('li');
    var data = myObj.data;
    data.map(app => {
        li.textContent = app.AppName;
        ul.appendChild(li);
    })
  }
};
xmlhttp.open("GET", "json.json", true);
xmlhttp.send();

您拥有您的对象，并且它已被解析，因此让我们集中精力处理该对象：

var myObj = {
  "data": [{
    "AppId": 1,
    "AppName": "AppName1",
    "AppSize": "2.1"
  }, {
    "AppId": 2,
    "AppName": "AppName2",
    "AppSize": ""
  }]
};

现在我们有了它，让我们以不同的方式来使用它。
myObj
在这里包含一个名为
data
的数组。该数组是一个JavaScript对象数组，每个对象都具有“AppId”、“AppName”等属性“等等。我们可以直接访问或通过索引访问。因此，让我们举一些例子说明如何做到这一点。代码中的注释


var myObj={
“数据”：[{
“AppId”：1，
“AppName”：“AppName1”，
“AppSize”：“2.1”
}, {
“AppId”：2，
“AppName”：“AppName2”，
“AppSize”：”
}]
};
//在这里，我创建了一个引导选项卡和内容
//调用在DOM上创建新元素
功能附加项（项目）{
设lt=$（“#列表选项卡”）；
设ltc=$（“#调试选项卡内容”）；
让thing=item.name；
让thingId=“list-”+事物；
让thingTabId=thingId+“-list”；
设ttab=$（''）
.addClass（'list-group-item list-group-item操作'）
.data（“切换”、“列表”）
.prop（“id”，thingTabId）
.attr（'角色'，'选项卡'）
.prop（'href'，'#'+thingId）
.html（项目名称）；
ttab.附录（lt）；
设lc=$（''）
.addClass（'tab-pane-fade'）
.prop（“id”，thingId）
.attr（'role'，'tabpanel'）
.text（JSON.stringify（item.obj））；
//.文本（“测试”）；
立法会附件(长期合约);；
}
//*作弊，将对象放在引导选项卡内容列表中
附加项({
姓名：“myObj”，
对象：myObj
});
附加项({
名称：“myObjW”，
对象：窗口[“myObj”]
});
附加项({
名称：“数据”，
对象：myObj.data
});
附加项({
名称：“数据0”，
对象：myObj.data[0]
});
附加项({
名称：“AppName”，
对象：myObj.data[0]。AppName
});
//纯JS步行
//在这里，我创建一个LI列表作为引导列表组
设len=myObj.data.length；
设myP=document.getElementById（“test”）；
让myReg=document.getElementById（“mylist reg”）；
设newUl=document.createElement（“ul”）；
newUl.classList.add（'list-group'）；
newUl.classList.add（'list-group-primary'）；
对于