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

最新推荐文章于 2024-05-23 10:47:32 发布

pandaHe_Status

最新推荐文章于 2024-05-23 10:47:32 发布

阅读量4k

点赞数

分类专栏：前端文章标签： javascript vue js json

本文链接：https://blog.csdn.net/weixin_43321726/article/details/109999016

版权

前端专栏收录该内容

101 篇文章 1 订阅

订阅专栏

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>

在这里插入图片描述

pandaHe_Status

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript数组格式的数据转换为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></h
复制链接

扫一扫