时间戳

首页 > 解决方案 > 从类属性值字符串解析 json

javascript - 从类属性值字符串解析 json

问题描述

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

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>

js

<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>

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

标签： javascriptjqueryhtml

解决方案

需要进行以下更改：

  1. div 标签未关闭 - 缺失>
  2. 将全年人口代码保留在 window.onload 内，否则，您必须在 window.onload 函数外声明 yearDropdown
  3. 当您执行 JSON.parse() 时，您已经解析了数据，您无需使用它调用 API 来再次获取数据。

  4. 修改了附加年份选项的代码。

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

    $.each(data, function (key, entry) { yearDropdown.append($('<option>', { value: entry.year, text: entry.year })); });

请参考来自github的完整运行代码

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

推荐阅读