Vue项目获取后端传递的json数据并在前端给json数组添加自定义数据

版权声明：欢迎转载，注明作者和出处就好！如果不喜欢或文章存在明显的谬误，请留言说明原因再踩哦，谢谢，我也可以知道原因，不断进步！https://blog.csdn.net/csonst1017/article/details/85710904

因为项目前后端分离，前端需要获取后端传过来的json数据，并显示到页面上，但因为页面的内容是在data()函数里动态生成，有些内容是后端的json没有的，所以在把json数组的数据添加进data()函数里的数组的时候动态的添加一些数据。

1.首先获取后端的json数据：

var jsonObj = JSON.parse(JSON.stringify(successResponse.data.data));

successResponse是服务器响应内容，其中包含json数据。这里涉及到一个json格式转化问题，因为响应内容successResponse是个对象，所以我们需要先用stringify函数把json转成字符串形式。但因为后面要获取json里面指定的key对应的value，并且自定义添加一些数据，所以我们还需要用parse函数转成Json对象形式（也叫json序列化）。有的朋友就会问了，为什么不直接使用successResponse.data.data？还要转来转去？因为原本不是json对象。是HttpServletResponse对象。

2.遍历json数组对象，添加自定义数据

for (var i = 0; i < jsonObj.length; i++) {
	jsonObj[i].index='table'+jsonObj[i].menuId;
}

给json数组对象的每个位置添加自定义内容index:‘table’。
这里数组对象里原来是没有index这个key的，但是会自己添加进去。

3.将改造后的json数组对象传给data()里声明的数组。

this.items[1].subs=jsonObj;

4.运行vue项目并请求后端：
增加内容前的json数组（console.log输入到console查看）：

增加后:

可以看到数组每个下标内容都添加上了index+id。

最后贴上组件的完整代码：

<template>
	<div class="sidebar">
		<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
		 text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
			<!-- <el-button @click="getMenu()">lianjie</el-button> -->
			<template v-for="item in items">
				<template v-if="item.subs">
					<el-submenu :index="item.index" :key="item.index">
						<template slot="title">
							<i :class="item.icon"></i><span slot="title">{{ item.menuName }}</span>
						</template>
						<template v-for="subItem in item.subs">
							<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
								<template slot="title">{{ subItem.menuName }}</template>
								<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
									{{ threeItem.menuName }}
								</el-menu-item>
							</el-submenu>
							<el-menu-item v-else :index="subItem.index" :key="subItem.index">
								{{ subItem.menuName }}
							</el-menu-item>
						</template>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index" :key="item.index">
						<i :class="item.icon"></i><span slot="title">{{ item.menuName }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
	import bus from '../common/bus';
	export default {
		data() {
			return {
				responseResultData: [],
				// menuName: '',
				collapse: false,
				items: [{
						icon: 'el-icon-lx-home',
						index: 'dashboard',
						menuName: '系统首页'
					},
					{
						icon: 'el-icon-lx-cascades',
						index: '1',
						menuName: '基础表格',
						subs: []
					},
					{
						icon: 'el-icon-lx-copy',
						index: 'tabs',
						menuName: 'tab选项卡'
					},
					{
						icon: 'el-icon-lx-calendar',
						index: '3',
						menuName: '表单相关',
						subs: [{
								index: 'form',
								menuName: '基本表单'
							},
							{
								index: '3-2',
								menuName: '三级菜单',
								subs: [{
										index: 'editor',
										menuName: '富文本编辑器'
									},
									{
										index: 'markdown',
										menuName: 'markdown编辑器'
									},
								]
							},
							{
								index: 'upload',
								menuName: '文件上传'
							}
						]
					},
					{
						icon: 'el-icon-lx-emoji',
						index: 'icon',
						menuName: '自定义图标'
					},
					{
						icon: 'el-icon-lx-favor',
						index: 'charts',
						menuName: 'schart图表'
					},
					{
						icon: 'el-icon-rank',
						index: '6',
						menuName: '拖拽组件',
						subs: [{
								index: 'drag',
								menuName: '拖拽列表',
							},
							{
								index: 'dialog',
								menuName: '拖拽弹框',
							}
						]
					},
					{
						icon: 'el-icon-lx-warn',
						index: '7',
						menuName: '错误处理',
						subs: [{
								index: 'permission',
								menuName: '权限测试'
							},
							{
								index: '404',
								menuName: '404页面'
							}
						]
					}
				]
			}
		},
		computed: {
			onRoutes() {
				return this.$route.path.replace('/', '');
			}
		},
		created() {
			// 通过 Event Bus 进行组件间通信，来折叠侧边栏
			bus.$on('collapse', msg => {
				this.collapse = msg;
			});
			this.getMenu();
		},
		methods: {
			getMenu() {
				this.$axios
					.get('/api/admin/system/menu/list')
					.then(successResponse => {
						//获取json中的data部分
						if (successResponse.data.code === 200) {
							var jsonObj = JSON.parse(JSON.stringify(successResponse.data.data));
							console.log("增加内容前："+JSON.stringify(jsonObj));
							for (var i = 0; i < jsonObj.length; i++) {
								jsonObj[i].index='table'+jsonObj[i].menuId;
							}
							this.items[1].subs=jsonObj;
							console.log("增加内容后："+JSON.stringify(this.items[1].subs));
						}
					})
					.catch(failResponse => {}).catch(error => {
						console.log(error.response.data.code)
					})
			},
		}
	}
</script>

<style scoped>
	.sidebar {
		display: block;
		position: absolute;
		left: 0;
		top: 70px;
		bottom: 0;
		overflow-y: scroll;
	}

	.sidebar::-webkit-scrollbar {
		width: 0;
	}

	.sidebar-el-menu:not(.el-menu--collapse) {
		width: 250px;
	}

	.sidebar>ul {
		height: 100%;
	}
</style>