logo标签列表

使用JS解析JSON并使用HTML列表显示每个元素

javascriptjqueryhtmljson
5

我正在尝试用JavaScript解析JSON。我的问题是，我希望输出的结果看起来像这样：

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

然而它并没有起作用，我不知道如何实现。这是从JSON响应反序列化的对象：

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

这是我的 .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>

我需要帮助，因为我似乎完全不理解这个。非常感谢您的帮助！

1
请在问题中放置JSON的副本，而不是可能稍后不存在的链接。您需要纯JavaScript答案和jQuery答案吗？ - Mark Schultheiss
@MarkSchultheiss 已经这样做了！JavaScript 是首选，但 jQuery 的答案也可能既有帮助又有趣。 - Leon Mlaiel
5个回答
2

首先需要注意的是，你只能将li元素作为<ul>或<ol>的子元素，所以需要更改p元素。

AppName属性是data对象中的一部分，因此您需要遍历它们：

最初的回答已经解释了如何正确使用li元素和p元素。要访问AppName属性，请遍历data对象并找到相应的值。

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

或者通过索引单独访问它们：

最初的回答

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


var myObj = {
  "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",
    "AppSize": "2.1"
  }, {
    "AppId": 2,
    "AppName": "Cute Cut Pro",
    "AppSlug": "cute-cut-pro",
    "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 = '<li>' + myObj.data[0].AppName + '</li>';
<ul id="test"><li>

你能再详细解释一下循环吗？我真的不太明白循环如何与对象配合工作！非常感谢你的回答，到目前为止它已经帮了我很多忙！ - Leon Mlaiel
这是一个 forEach() 循环。它遍历数组中的每个元素，在每个元素上执行您提供的函数。在该函数内，提供的参数是迭代中的当前元素。在上面的示例中，它是 o 变量。 - Rory McCrossan
1
使用 forEach 循环和 append。虽然能够实现，但是将 li 插入到 p 标签 内部并不是一个好主意。将 p 转换为 ul/ol。 

var data = {
  "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",
    "AppSize": "2.1"
  }, {
    "AppId": 2,
    "AppName": "Cute Cut Pro",
    "AppSlug": "cute-cut-pro",
    "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('<li>' + e.AppName + '</li>' + "<br>"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="test"></ul>

1
很少有情况下使用document.write是一个好主意。实际上，更多的时候它是非常糟糕的做法 - 就像在这种情况下一样。不要在这里使用它。最重要的是，因为你只是把li元素倒在DOM的中间，而不是在任何特定的容器中。 - Rory McCrossan
1
如果您只想要一个 AppName 属性列表，您可以使用 jQuery 进行以下操作。有关详细信息，请参见代码中的注释: 

// Below is the JSON string from the OP's link
let 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","AppSize":"2.1"},{"AppId":2,"AppName":"Cute Cut Pro","AppSlug":"cute-cut-pro","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":""}]}';

// Parse the JSON string into a JS object
json = JSON.parse(json);
let html = "";

// Loop over the object and append a list item for each AppName property.
$.each(json.data, function (index, item) {
    html += "<li>" + item.AppName + "</li>";
});

// Append the list to the div.
$("#container").append(html);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<div id="container"></div>

0

由于myObj内部有一个数组，因此您可以使用map()。您想要做的是返回一个带有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();
嗯，对我来说似乎不起作用。返回以下错误：null不是一个对象（评估“ul.appendChild”）。 - Leon Mlaiel
0

你已经有了对象，并且它已被解析，现在让我们集中精力对该对象进行操作：

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

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

var myObj = {
  "data": [{
    "AppId": 1,
    "AppName": "AppName1",
    "AppSize": "2.1"
  }, {
    "AppId": 2,
    "AppName": "AppName2",
    "AppSize": ""
  }]
};
// Here I create a Bootstrap tab and contents
// call to create a new element on the DOM
function additem(item) {
  let lt = $('#list-tab');
  let ltc = $('#debug-tabContent');
  let thing = item.name;
  let thingId = "list-" + thing;
  let thingTabId = thingId + "-list";
  let ttab = $('<a />')
    .addClass('list-group-item list-group-item-action')
    .data('toggle', "list")
    .prop("id", thingTabId)
    .attr('role', 'tab')
    .prop('href', '#' + thingId)
    .html(item.name);
  ttab.appendTo(lt);
  let lc = $('<div />')
    .addClass('tab-pane fade')
    .prop("id", thingId)
    .attr('role', 'tabpanel')
    .text(JSON.stringify(item.obj));
  // .text("test");
  lc.appendTo(ltc);
}
// * cheat, put the objects in a bootstrap tab content list
additem({
  name: "myObj",
  obj: myObj
});
additem({
  name: "myObjW",
  obj: window["myObj"]
});
additem({
  name: "data",
  obj: myObj.data
});
additem({
  name: "data0",
  obj: myObj.data[0]
});
additem({
  name: "AppName",
  obj: myObj.data[0].AppName
});

// pure JS walk
// Here I create a LI list as a Bootstrap list group
let len = myObj.data.length;
let myP = document.getElementById("test");
let myReg = document.getElementById("mylist-reg");
let newUl = document.createElement("ul");
newUl.classList.add('list-group');
newUl.classList.add('list-group-primary');
for (var i = 0; i < len; i++) {
  let newLi = document.createElement("li");
  let newContent = document.createTextNode(myObj.data[i].AppName);
  newLi.appendChild(newContent);
  newLi.setAttribute("id", "app-" + myObj.data[i].AppId); //has to be unique
  newLi.setAttribute("class", "list-group-item");
  newUl.appendChild(newLi);
}
// put the list after the paragraph
document.body.insertBefore(newUl, myP);

let myLast = document.getElementById("app-2");
myLast.classList.add("active");
//activate the bootstrap tab clicks
$('#list-tab').on('click', 'a', function(e) {
  e.preventDefault();
  $(this).tab('show');
});

// just do it as strings
let html = "";
for (var i = 0; i < len; i++) {
  let textel = "<li id='app-js-" + myObj.data[i].AppId + "'>" + myObj.data[i].AppName + "</li>";
  html = html + textel;
}
myReg.innerHTML = html;

// jQuery, similar to prior
$.each(myObj.data, function(index, el) {
  let textel = "<li id='app-jq-" + el.AppId + "'>" + index + ":" + el.AppName + "</li>";
  $('#mylist-jq').append(textel);
});

// jQuery, similar to prior
$.each(myObj.data, function(index, el) {
  let elid = 'app-jq2-' + el.AppId;
  $("<li />").prop("id", elid).text(el.AppName)
    .appendTo('#mylist-jq2');
});
.list-group-item {
  border: 1px lime solid
}

.list-item-last {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />

<ul id="mylist-reg"></ul>
<ul id="mylist-jq"></ul>
<ul id="mylist-jq2"></ul>
<p id="test" class="row">put stuff after here</p>
<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="debug-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">Click a tab to see one.</div>

    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接