Jquery 从本地存储中获取数据并作为li附加到html？

我不确定下一步该做什么，但现在我让我的外部json文件执行get请求，然后将其放入div。如何使每个对象成为列表项？而不是在网页上看起来像这样

谢谢

$(function () {
  getStarterMenuData();
});

function getStarterMenuData() { //AJAX http get request
  $.get(
    'data/startersMenu.json',
    function (data) {
      window.localStorage.setItem('starterMenu', JSON.stringify(data)); //Calls local storage API, stores key/value into local storage
    },
    'json'
    );
}

  var data;
  data = JSON.parse(window.localStorage.getItem('startersMenu')); //Gets the data from local storage
  document.getElementById("starters").innerHTML = localStorage.getItem("starterMenu");

外部json文件如下所示

[

{
 "name": "Jumbo Lump Crab Cake",
 "description": "Creole lobster sauce."
},

{
  "name": "Bacon Wrapped Sea Scallops",
  "description": "Chardonnay lemon sauce, Mango salsa."
},
{
  "name": "Chilled Maine Lobster Cocktail",
  "description": "Atomic cocktail sauce and lemon butter."
},
{
  "name": "Coconut Shrimp",
  "description": "three jumbo tiger shrimp, vanilla orange beurre blanc."
},
{
  "name": "Crispy Point Judith Calamari",
  "description": "Italian peppers and Bleu cheese Stuffed olives, Atomic cocktail sauce."
},
{
  "name": "Oysters on the Half Shell",
  "description": "shucked to order, mignonette and Atomic cocktail sauces."
}

]

---

迭代您的数据并创建

li

，如下所示

var data = JSON.parse(window.localStorage.getItem('startersMenu'));

data.forEach(function(item) {
    var $ul = $("#starters");        
    $ul.append('<li>'+ item.name + '</li>');
})

var data=JSON.parse（window.localStorage.getItem（'startersMenu'）；
data.forEach（功能（项）{
var$ul=$（“#启动器”）；
$ul.append（“
”+item.name+”
）；
})

对数据执行循环（或循环）。因此，请这样做：

document.getElementById("starters").html(JSON.parse(localStorage.getItem("starterMenu")).map(function(data) {
    var $list = $('<li>');
    $list.append($('<h1>', { text: data.name }));
    $list.append($('<div>', { text: data.description }));
    return $list;
}));

document.getElementById（“启动器”）.html（JSON.parse（localStorage.getItem（“启动器菜单”））.map（函数（数据）{
var$list=$（“
”）；
$list.append（$（''，{text:data.name}））；
$list.append（$（''，{text:data.description}））；
返回$list；
}));

---

注意：为了防止XSS，将文本添加为实际文本而不是HTML是值得的。

您只需循环返回的数据，创建HTML，然后将其呈现到页面上即可

const数据=[
{
“名称”：“巨蟹块蛋糕”，
“描述”：“克里奥尔龙虾酱。”
},
{
“名称”：“咸肉裹海贝”，
“描述”：“霞多丽柠檬酱、芒果沙司。”
},
{
“名称”：“缅因州冷冻龙虾鸡尾酒”，
“描述”：“原子鸡尾酒酱和柠檬黄油。”
},
{
“名称”：“椰子虾”，
“描述”：“三只巨型虎虾，香草橙白啤酒。”
},
{
“名称”：“脆点朱迪思卡拉马里”，
“描述”：“意大利辣椒和蓝奶酪填充橄榄，原子鸡尾酒酱。”
},
{
“名称”：“半壳牡蛎”，
“描述”：“按顺序剥皮，米格诺奈特和原子鸡尾酒酱汁。”
}
]
常量myHtml=[]；
//循环浏览构建html的数据
data.forEach（value=>myHtml.push（`li>${value.name}
${value.description}
`）；
//现在呈现html
$（'#myData'）.append（myHtml.join（''）

您只需循环返回的数据，创建html，然后将其呈现到页面嗨，我尝试放置您在中所述的内容，但它表示缺少一个）after参数列表？这是屏幕截图@BeckyT抱歉，我在“”之后漏掉了一个逗号。现在修好了，谢谢@winhowes，最后一个问题，你知道为什么它作为对象出现而不是数据中的实际文本吗？@BeckyT我修复了我注意到的一个bug。这能解决你的问题吗？我在做一个

.innerHTML=

并给它一个jQuery对象数组，而不是使用jQuery的

.html（）

函数，该函数将获取一个jQuery对象数组并将其转换为html。