json字符串传到前台input的方法

将JSON字符串传到前台input可以通过JavaScript的方式实现。主要分为两个步骤：

1. 将JSON字符串赋值给JavaScript变量或对象
2. 将变量或对象中的值赋值给input

下面分别详细说明这两个步骤。

将JSON字符串赋值给JavaScript变量或对象

首先，我们需要将JSON字符串转换为JavaScript对象。这可以通过JSON.parse()方法实现。

var jsonStr = '{"name":"John","age":30,"city":"New York"}';
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj);

上述代码中，我们定义了一个JSON字符串jsonStr，然后使用JSON.parse()方法将它转换为JavaScript对象jsonObj。最后，我们在控制台中输出jsonObj的值。

将对象中的值赋值给input

在这个步骤中，我们需要使用document.getElementById()方法获取input元素的引用，然后将对象中的值赋值给input的value属性。

<input type="text" id="name-input">
<input type="text" id="age-input">
<input type="text" id="city-input">
<button onclick="loadJson()">Load JSON</button>

上述代码中我们定义了三个input元素以及一个按钮。我们给按钮添加了onclick事件，当点击按钮时会触发一个名为“loadJson”的函数。

function loadJson() {
  var jsonStr = '{"name":"John","age":30,"city":"New York"}';
  var jsonObj = JSON.parse(jsonStr);
  document.getElementById('name-input').value = jsonObj.name;
  document.getElementById('age-input').value = jsonObj.age;
  document.getElementById('city-input').value = jsonObj.city;
}

上述代码中，当按钮被点击时，loadJson()事件处理程序会执行。它首先通过JSON.parse()方法将JSON字符串转换为JavaScript对象，然后使用document.getElementById()方法获取三个input元素的引用，并将对象中的name、age和city属性的值赋值给相应的input元素。

另一个例子中，假设我们有一个JSON数组。我们可以使用for循环遍历数组中的每个对象，并将它们的值赋值给input。

var jsonArr = '[{"name":"John","age":30,"city":"New York"},' +
              '{"name":"Jane","age":25,"city":"Chicago"}]';
var jsonObjArr = JSON.parse(jsonArr);
for (var i = 0; i < jsonObjArr.length; i++) {
  var jsonObj = jsonObjArr[i];
  document.getElementById('name-input-' + i).value = jsonObj.name;
  document.getElementById('age-input-' + i).value = jsonObj.age;
  document.getElementById('city-input-' + i).value = jsonObj.city;
}

上述代码中，我们定义了一个JSON数组jsonArr，然后使用JSON.parse()方法将其转换为JavaScript数组jsonObjArr。我们使用for循环遍历数组中的每个对象，然后将它们的值赋值给id带有i后缀的input元素。例如，第一个对象的值将赋值给id为“name-input-0”的input元素。