JavaScript数组格式的数据转换为json格式数据_数组转json数组格式

作者：你好赵伟 | 2024-04-05 16:48:55

踩

数组转json数组格式

vue + JavaScript

把数组格式的数据转换为json格式数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{ message }}</div>
        <div>
            <ul v-for="(item,index) in testData" v-bind:key="index">
                <li>{{item.id}}<span>:{{item.name}}</span></li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                // 获取到的数据
                testData: []
            },
            created() {
                this.getJsonData()
            },
            methods: {
                getJsonData: function () {
                    var that = this;
                    // 需要放置的数据
                    var jsonData = ['张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力','张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力','张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力','张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力','张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力','张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力','张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力','张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力','张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力', '张三', '里斯', '王五', '效力'];
                    let newArray = [];
                    function fn() {
                        let arrays = [];
                        var data = {};
                        for (i = 0; i < jsonData.length; i++) {
                            var key = jsonData[i];
                            var val = newArray[i];
                            data[key] = val;
                            arrays.push(data[key])
                        }
                        return arrays;
                    }
                    for (var i = 0; i < jsonData.length; i++) {
                        let personOne = {
                            id: i,
                            name: jsonData[i]
                        };
                        // 动态生成的数据
                        newArray.push(personOne)
                    }
                    console.log(fn());
                    that.testData = fn()

                }
            }
        })
    </script>
    <!-- <script  type="text/javascript">
var jsonData = ['张三','里斯','王五','效力','张三','里斯','王五','效力','张三','里斯','王五','效力'];
let newArray = [];
    function fn(){
        let arrays = [];
           var  data = {};
           for(i = 0;i<jsonData.length;i++){
               var  key = jsonData[i];
               var  val = newArray[i];
               data[key] = val;
               arrays.push(data[key])
           }
           return arrays;
       }
    for(var i = 0;i<jsonData.length;i++){
            let personOne = {
                id:i,
                name:jsonData[i]
            };
            // 动态生成的数据
            newArray.push(personOne)
    }
    console.log(fn()) 
    </script> -->
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/366865