js拼接html遇到的一点小问题

一、问题描述

最近做项目利用ajax进行一个局部刷新，需要拼接一个html，我利用json模仿调取后台数据。很简单的思路，循环遍历json，然后依次拼接，但是遇到一点问题，最后呈现的内容只显示了json中最后一组数据，先看一下有问题的代码和最终显示的结果

	getHttp({
		url: "/data/main/createProductNew.json"
	}).then((res) => {
		data = res;
		console.log(data)
		
		for(var i=0; i<data.length; i++){		
			var contentHtml="";
			contentHtml+='<div class="questionItem">\n'+
								'<p>'+data[i].question+'</p>\n'+
								'<div class="radio">\n'+
									'<input type="radio" name="radio'+i+'"  id="y'+i+'" />\n'+
									'<label for="y'+i+'" >'+data[i].responseY+'</label>\n'+
									'<input type="radio" name="radio'+i+'"  id="n'+i+'" />\n'+
									'<label for="n'+i+'" >'+data[i].resopnseN+'</label>\n'+
								'</div>\n'+
							'</div>\n';
		}
		console.log(contentHtml)
		let questionList = $('.questionList');
		questionList.html(contentHtml);	
	}).catch(res => {
 		console.log("catch");
 	})

如上图，最后只拼接了最后一组，这不是我想要的结果，经过一番调试，最终发现问题所在，仔细看上面的代码，我把var contentHtml="";定义在了for循环里面，所以就导致，每次拼接的时候，这个初始的contentHtml就变为空，所以就之拼接了最后一次的内容。

二、解决办法

只需要把var contentHtml="";放在for循环之外就行了。看一下正确的代码和结果

getHttp({
		url: "/data/main/createProductNew.json"
	}).then((res) => {
		data = res;
		console.log(data)
		var contentHtml="";
		for(var i=0; i<data.length; i++){				
			contentHtml+='<div class="questionItem">\n'+
								'<p>'+data[i].question+'</p>\n'+
								'<div class="radio">\n'+
									'<input type="radio" name="radio'+i+'"  id="y'+i+'" />\n'+
									'<label for="y'+i+'" >'+data[i].responseY+'</label>\n'+
									'<input type="radio" name="radio'+i+'"  id="n'+i+'" />\n'+
									'<label for="n'+i+'" >'+data[i].resopnseN+'</label>\n'+
								'</div>\n'+
							'</div>\n';
		}
		console.log(contentHtml)
		let questionList = $('.questionList');
		questionList.html(contentHtml);	
	}).catch(res => {
 		console.log("catch");
 	})