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

在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字符串数组前端并不能很好的识别,经过对比发现里面多了斜杠和双引号,那么替换掉就没有问题了。


 

 

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

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

 

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

存放标题的表

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

 

 存放选项的表

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

 

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

上一篇:win10快速访问的文件夹无法删除的解决方法


下一篇:Win20H1使用Ubuntu and Docker for wsl2