时间戳

首页 > 技术文章 > vue+webAPI中json相互转换的点滴记录，用于实现按分值的调查问卷功能

vue+webAPI中json相互转换的点滴记录，用于实现按分值的调查问卷功能

wjbych 2020-06-01 11:25 原文

在vue和webapi中，免不了在json字符串和json对像间相互转换，把常用的转换记录一下，下面是前端中用到的数组例子

    this.title.push({
         name:'输入标题',
         list:[{
             name:'选项一',
             fen:0
            },
            {
              name:'选项二',
              fen:0
             },
             {
               name:'选项三',
               fen:0
             },
            ]
            })

 

一、Vue中把一个数组转换成json字符串

1、在scrpit中定义数组  title:[]，数组里可以放你任何喜欢的内容

2、在自定义函数中进行转换 let str=JSON.stringify(this.title);

那么str就是一个可以在C# webapi中识别的json字符串了，怎么识别看第三个

 

二、webapi中把对像转换成json字符串

如把查询到的DataTable对像转换成json字符串，返给前端的vue解析使用

public static string DataTableToJSON(DataTable Dt)
{
     var res = JsonConvert.SerializeObject(Dt);
     return res;
}

如果想把任意对像转换成json字符串，也可以使用 JsonConvert.SerializeObject来进行转换

三、vue发送的json数组字符串转换成jarray数组对像

如果vue前端把一个数组转换成了json字符串，并post给了webapi，那么在后端怎么识别解析它了？

我们可以把它先转换成jarray数组对像，然后再转换成json对像，就能读取了。

JArray ja = JArray.Parse(mes);   //mes为前端返回的json字符串

ja为一个数组，那么每一个ja都可以转换成JObject对像，然后进行读取

JArray ja = JArray.Parse(mes);  //转换成数组对像
for (int i = 0; i < ja.Count; i++)
{
   JObject jo = JObject.Parse(ja[i].ToString());
   string name= jo["name"].ToString();  
｝

如果jo中还有数组怎么办，那就继续转换吧

JArray js = JArray.Parse(jo["list"].ToString()); //转换jo中的list

然后再用for就行了

四、webapi查询结果转成json字符串数组（字符串数组拼接）

类似于第二种，但是这种更像是表中表查询，最后出来的结果如前端用到的title格式。

s1 = KS.DataTableToJSON(KS.GetTable(sql));
JArray j_tm = JArray.Parse(s1);
JArray ja = new JArray();

如上，先查询一个表，并转换成json字符串，然后再转换成JArray数组，并定义一个新的数组，用于在后面存放拼接过的json字符串

 for (int i = 0; i < j_tm.Count; i++)
      {
          JObject jo = JObject.Parse(j_tm[i].ToString());
          string wjid = jo["id"].ToString();
          sql = "select "; //写自己的查询内容
          string info=""; //此处为例子，改成自己查询出的内容
          jo.Add("list", info);
          ja.Add(jo);
      ｝

主要在于如何给JObject增加一个节点，然后把jo对像增加到ja数组中。此处实现的是前面 list节点中的内容

ja数组如何转换成字符串了，非常简单，直接tostring就可以了

mes =ja.ToString();
mes = mes.Replace("\\", "").Replace("\"[", "[").Replace("]\"","]");

但是会发现返回给前端的json字符串数组前端并不能很好的识别，经过对比发现里面多了斜杠和双引号，那么替换掉就没有问题了。

 

 

最后在前端实现的效果如下：

 

 而在后端，标题和选项是分开在两个表中存储的。

存放标题的表

 

 存放选项的表

 

推荐阅读