使用JavaScript将JSON数据显示到HTML页面

第一次接触JSON，所以请解释一下，就像我5岁了，没有行话一样。 我得到了一个类似这样的JSON文件，需要在HTML列表中显示这些项目。 很多示例都将JSON对象分配给了一个变量——这不是分配给变量的，所以我不确定如何引用它。 如何访问和显示产品列表中的所有内容。 在我的html中，我链接了一个script.js文件和这个json文件

HTML

我的购物车
购物车项目

JSON

“篮子”：{
“产品列表”：[{
“产品”：{
“id”：“111”，
“名称”：“狗”，
“简短描述”：“男人最好的朋友”
，
},
“类别”：“犬科”，
“可用性”：“库存中”，
“variationType”：{
“名称”：“品种”，
“价值”：“牧羊犬”
}
},
“数量”：1，
“价格”：“$53.00”
}, {
“产品”：{
“id”：“112”，
“名称”：“狗”，
“简短描述”：“不是那么好的朋友”
，
“类别”：“猫科动物”，
“可用性”：“库存不足”，
“variationType”：{
“名称”：“品种”，
“价值”：“缅因州库恩”
}
},
“数量”：1，
“价格”：“$49.00”
}, {
“产品”：{
“id”：“113”，
“名称”：“兔子”，
“简短描述”：“喜欢胡萝卜”，
“类别”：“楔状体”，
“可用性”：“库存中”
},
“数量”：1，
“价格”：“$66.00”
}]
}

JavaScript

    var products = document.getElementById("cartItemsList");
    cartItemsList.innerHTML = "<li>" + product + "</li>";

var products=document.getElementById（“cartItemsList”）；
cartItemsList.innerHTML=“
”+产品+”
”；

首先，必须将

json

从长字符串转换为尖锐的js对象。 您可以通过命令执行此操作。像这样：

let jsObj = JSON.parse( youreJsonString);

通过它们，您可以在产品列表中循环抛出您的产品，并构建html代码，如下所示：

var products = document.getElementById("cartItemsList");

jsObj.basket.productList.forEach( function(product ) {
        cartItemsList.innerHTML = "<li>" + product.name + " : " + product.price+ " </li>";
});

var products=document.getElementById（“cartItemsList”）；
jsObj.basket.productList.forEach（函数（产品）{
cartItemsList.innerHTML=“
”+product.name+”：“+product.price+”
”；
});

除非使用Ajax调用或类似于加载外部JSON的方法，否则需要将提供的JSON转换为可作为变量引用的对象。此外，您的JSON无效。我尝试在这里更正它，并将JSON作为一个对象引用，您可以通过名为obj的变量引用它。下面是一个工作代码片段

var obj={
“篮子”：{
“产品列表”：[{
“产品”：{
“id”：“111”，
“名称”：“狗”，
“简短描述”：“男人最好的朋友”
，
“类别”：“犬科”，
“可用性”：“库存中”，
“variationType”：{
“名称”：“品种”，
“价值”：“牧羊犬”
}
},
“数量”：1，
“价格”：“$53.00”
}, {
“产品”：{
“id”：“112”，
“名称”：“狗”，
“简短描述”：“不是那么好的朋友”
，
“类别”：“猫科动物”，
“可用性”：“库存不足”，
“variationType”：{
“名称”：“品种”，
“价值”：“缅因州库恩”
}
},
“数量”：1，
“价格”：“$49.00”
}, {
“产品”：{
“id”：“113”，
“名称”：“兔子”，
“简短描述”：“喜欢胡萝卜”，
“类别”：“楔状体”，
“可用性”：“库存中”
},
“数量”：1，
“价格”：“$66.00”
}]
}
}
var cartItemsList=document.getElementById（“cartItemsList”）；
obj.basket.productList.forEach（函数（元素）{
cartItemsList.insertAdjacentHTML（'beforeend'，“
”+element.product.name+”：“+element.price+”
”；
});
我的购物车
购物车项目


如果从外部文件加载此文件，则需要Ajax或类似类型的调用。要使用Ajax，您必须在项目的HTML文件中添加一个名为jQuery的库。然后可以调用JSON，而无需将其作为javascript变量引用，如下面的工作代码段所示


/*我将您的JSON放入一个外部文件，从github加载*/
变量url=”https://raw.githubusercontent.com/mspanish/playground/master/jessica.json";
/*这会告诉页面等待jQuery加载，以便您可以使用Ajax调用*/
$（文档）.ready（函数（）{
$.ajax({
url:url，
数据类型：“json”，
错误：函数（）{
log（“数据的JSON失败”）；
},
成功：功能（结果）{
/*结果是您的json，您可以在这里使用它直接引用元素，而无需创建任何其他变量*/
var cartItemsList=document.getElementById（“cartItemsList”）；
results.basket.productList.forEach（函数（元素）{
cartItemsList.insertAdjacentHTML（'beforeend'，“
”+element.product.name+”：“+element.price+”
”；
})；//forEach的结尾
}//成功的终点fn
})//Ajax调用结束
})//结束$（document）.ready（）函数

我的手推车
购物车项目


如果要分析对象：

function logTheObj(obj) {
    var ret = "";
    for (var o in obj) {
        var data = obj[o];
        if (typeof data !== 'object') {
            ret += "<li>" + o + " : " + data + "</li>";
        } else {
            ret += "<li>" + o + " : " + logTheObj(data) + "</li>";
        }
    }
    return "<ul>" + ret + "</ul>";
}

使用Stacey Reiman先前回答中的外部json文件的Javascript Ajax版本


const products=document.getElementById（“cartItemsList”）；
/*从JSON获取篮子项目*/
班级篮{
异步cartItems（）{
试一试{
让结果=等待获取（'https://raw.githubusercontent.com/mspanish/playground/master/jessica.json')
让data=wait result.json（）
//返回数据
/*解构数据*/
让basketItems=data.basket.productList
var products = document.getElementById("cartItemsList");

jsObj.basket.productList.forEach( function(product ) {
        cartItemsList.innerHTML = "<li>" + product.name + " : " + product.price+ " </li>";
});

function logTheObj(obj) {
    var ret = "";
    for (var o in obj) {
        var data = obj[o];
        if (typeof data !== 'object') {
            ret += "<li>" + o + " : " + data + "</li>";
        } else {
            ret += "<li>" + o + " : " + logTheObj(data) + "</li>";
        }
    }
    return "<ul>" + ret + "</ul>";
}

logTheObj(JSON.parse(jsonString));