将逗号分隔的数据类型转换为json有效源

Question

我有喜欢的数据属性：data-columns = "title,dateaquired,genre,num_discs, etc etc - it can be any number of fields 试图将json转换为此[            { data: "title" },            { data: "dateacquired" },            { data: "genre" },            { data: "num_discs" },            { data: "esrb_rating" },            { data: "publisher" },            { data: "platform" },            { data: "seriesname" },            { data: "delete" }        ]并且还尝试这样做：在上面的数据中是static值，在底部，尝试使用column它。data: {                title: $("#title").val(),                dateacquired: $("#dateacquired").val(),                genre: $("#genre").val(),                num_discs: $("#num_discs").val(),                esrb_rating: $("#esrb_rating").val(),                publisher: $("#publisher").val(),                platform: $("#platform").val(),                seriesname: $("#seriesname").val()            }

Answer 1

我假设你想得到这个输出

data: {

            title: $("#title").val(),

            dateacquired: $("#dateacquired").val(),

            genre: $("#genre").val(),

            num_discs: $("#num_discs").val(),

            esrb_rating: $("#esrb_rating").val(),

            publisher: $("#publisher").val(),

            platform: $("#platform").val(),

            seriesname: $("#seriesname").val()

        }

从数据列。假设您有数据列并分配了它

let datacolumns=$(#myid).attr('data-columns')

检查以下代码片段

let datacolumns="title,dateacquired,genre,num_discs,esrb_rating, publisher,platform,seriesname,delete";

 let data={};

 let arr=[];

 datacolumns.split(",").forEach((element)=>{

    //using trim in case there is space

    arr.push({

    data:element.trim()

    })

    data[element]=`$(#).val()`;//for displaying purpose

   //uncomment below line to work

   //data[element]=$(`#${element.trim(0}`).val()`

 })

 console.log(data);

 console.log(arr);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

假设您在数据属性中有以下值。首先，您必须通过 id 获取它，然后添加一个 split 方法以用逗号拆分字符串。然后您可以使用它们来创建对象格式。

<p  id="myid" data-columns = "title,dateaquired,genre,num_discs, etc etc - it can be any number of fields"></p>

let commaSplited = $(#myid).attr('data-columns').split(',');

现在您可以通过这种方式创建所需结构的对象。索引将取决于逗号分隔值的位置。

let obj = [

      data: {

         title: commaSplited [0],

         dateacquired: commaSplited[1] ,

         genre: commaSplited[2],

         num_discs: commaSplited[3],

         esrb_rating: commaSplited[4],

         publisher: commaSplited[5],

         platform: commaSplited[6],

         seriesname: commaSplited[7]

      }

];

Answer 3

使用 Data-* 属性

1. 在属性字符串上拆分

2. 遍历属性并查找 HTML 元素的值

3. 为对象赋值

在这种情况下，步骤 2 和 3 通过以下reduce函数处理：

let data = target.dataset.columns.split(',').reduce((obj, key)=>{

  let el = document.querySelector('#'+key)

  obj.data[key] = el && el.value  || ''

  return obj;

}, { data: {} });

console.log(data)

<div id="target" data-columns="title,dateacquired,genre,num_discs"></div>

<input type="hidden" id="title" value="Top Gun" />

<input type="hidden" id="dateacquired" value="1989" />

<input type="hidden" id="genre" value="Homoerotic Dramatic Comedy" />

<input type="hidden" id="num_discs" value="1" />

或者

let arr = target.dataset.columns.split(',').map(key=>({ data: key }));

console.log(arr)

<div id="target" data-columns="title,dateacquired,genre,num_discs"></div>