从类属性值字符串解析 json答案

【问题标题】：Parsing json from a class attribute value string从类属性值字符串解析 json
【发布时间】：2019-07-23 05:44:11
【问题描述】：

我有一个选择下拉列表来填充 json 数据多年。 json 数据存储在 div 类中，我有变量 var url = JSON.parse(document.getElementById("fitmentData").getAttribute("class")); 从 div 类中获取 json。在控制台中，url 实际上确实抓取了 json 数据，但信息没有填充到 select 下拉列表中。

html

<div id="fitmentData" class='[
    { "brand" : "Honda" , "model" : "SL350" , "year" : "1969" }, 
    { "brand" : "Honda" , "model" : "SL175" , "year" : "1970" }, 
    { "brand" : "Honda" , "model" : "SL350" , "year" : "1970" }, 
    { "brand" : "Honda" , "model" : "SL175" , "year" : "1971" }, 
    { "brand" : "Honda" , "model" : "SL350" , "year" : "1971" }, 
    { "brand" : "Honda" , "model" : "SL175" , "year" : "1972" }, 
    { "brand" : "Honda" , "model" : "SL350" , "year" : "1972" }, 
    { "brand" : "Honda" , "model" : "XL250" , "year" : "1972" }, 
    { "brand" : "Honda" , "model" : "XL175" , "year" : "1973" }, 
    { "brand" : "Honda" , "model" : "SL350" , "year" : "1973" }]'

    <select name="year" id="year"></select>
    <select id="make" name="make"></select>
    <select id="model" name="model"></select>

    // my js functions
</div>

<script>
    window.onload = function () {
        //year
        let yearDropdown = $('#year');
        yearDropdown.append('<option selected="true" disabled>Choose Year</option>')
                    .on('change', function () { })
    }

    var url = JSON.parse(document.getElementById("fitmentData").getAttribute("class"));

    //append json years in dropdown
    $.getJSON(url, function (data) {
        $.each(data, function (key, entry) {
            yearDropdown.append($('<option>. </option>')
                        .attr('value', entry.year).text(entry.year));
        })
        //remove year duplicates
        var map = {}
        $('select option').each(function () {
            if (map[this.value]) {
                $(this).remove()
            }
            map[this.value] = true;
        })
    }
</script>

“选择下拉列表”名称填充并显示“选择年份”，但下拉列表中未填充任何数据。

【问题讨论】：

你应该使用数据元素来存储 JSON .. 不是一个类 -- IE data_json="(your json here)"
然后你可以像$('#fitmentData').data("json")一样检索它
好的，但 url 说它正在从我的控制台中的 json 中获取数据。有没有办法可以将 json 保留在 div 类中并仍然填充我的选择列表？我在想这部分代码可能有问题 $.getJSON(url, function (data) { $.each(data, function (key, entry) { yearDropdown.append($('
@Zak 是正确的，您应该使用custom data attributes。只需确保使用连字符而不是下划线：data-years=""
@sean -- 好收获！

标签： javascript jquery html

【解决方案1】：

需要进行以下更改：

div 标签没有关闭 - 缺少>
将全年人口代码保留在 window.onload 中，否则，你必须在 window.onload 函数之外声明 yearDropdown
当您执行 JSON.parse() 时，您已经解析了数据并且您需要不再使用此调用 API 来获取数据。
修改了附加年份选项的代码。

var data = JSON.parse(document.getElementById("fitmentData").getAttribute("class"));

$.each(data, function (key, entry) { yearDropdown.append($('

请参考完整运行代码from github

是的，请不要使用 class 属性来存储数据，而是使用 data-*（例如 data-year）属性或从后端 API 获取。

【讨论】：