Json列表到javascript对象来构建一个表单

Json list to javascript object to build a form

本文关键字：一个 表单 构建 列表 javascript 对象 Json      更新时间：2023-09-26

我不确定JSON的列表在解析为javascript对象时是如何工作的。但是，我更不习惯javascript，所以我的问题和提出的解决方案可能包含愚蠢的错误。我有一个JSON文件，我必须从中构建一个表单，所以我使用jQuery.parseJSON对其进行解析，以获得一个javascript对象。json文件如下：

{"Form": [{"Name":"Conan",
           "Description":"Adventure", 
       "Value":"Children Movie"}, 
      {"Name":"Sandocan",
       "Description":"Adventure",
       "Value":"Children Movie"},
      {"Name":"Terminator",
       "Description":"Sci-Fi",
       "Value":"Action Movie"},
      {"Name":"Iron Man",
       "Description":"Adventure",
       "Value":"Children Movie"}]}

从语法的角度来看，它应该是正确的。

处理它的代码在网页中，JSON代码通过模板标记｛｛line｝｝打印在页面中。我试着把它分配给一个变量，但我仍然不确定代码是否真的处理了它。然而，页面的代码如下：

<html><script src="../jquery.js">
</script>
<body><p> Data previously inserted: {{line}}</p>
<form action="/myform/" method="post">Choose the movie you prefer:<br />
<script language=javascript>
var lin={{line}}
var obj=jQuery.parseJSON(lin);
function str_to_obj(o){ 
        document.write("Hello world");
        for(item in o.Form) {
                document.write(item.Name);
        };
}
str_to_obj(obj);
</script>
<input type="radio" name="title"><br />
<input type="text" name="description"><br />
<input type="submit" value="Submit">
</form></body></html>

Firebug报告：

SyntaxError: invalid property id
var obj=jQuery.parseJSON({&quot;Form&quot;: [{&quot;Name&quot;:&quot;Conan&quot;

我肯定我在做一些傻事，但我必须让它发挥作用。

既然你用jQuery标记了它，为什么不这样做呢（假设你想把项目表示为单选按钮）：

使用$.ajax:获取json文件

$.ajax({
    url: 'file.json',
    dataType: 'json',
    success: function(data){
        //manipulate the parsed json here ('data')
    }
});

没有ajax调用的"硬编码"示例：

var objectFromJson = $.parseJSON('{"Form": 
    [{"Name":"Conan","Description":"Adventure", "Value":"Children Movie"},
     {"Name":"Sandocan","Description":"Adventure","Value":"Children Movie"},
     {"Name":"Terminator","Description":"Sci-Fi", "Value":"Action Movie"},
     {"Name":"Iron Man","Description":"Adventure","Value":"Children Movie"}]}');
$(function(){
    $.each(objectFromJson.Form, function(k, v){
        var $radio = $('<input/>')
                        .prop({ type: 'radio', id: v.Name, name: 'form' })
                        .val(v.Value),
            $label = $('<label />')
                        .prop({ 'for': v.Name })
                        .text(v.Name)
                        .prepend($radio);
        $('form[action="/myform/"]').append($label);
    });
});

Fiddle

我认为问题出在&quot；在您的JSON字符串中，这将使其无效。

如果您执行jsonString.replace(/&quot;/g,'"');以将所有&quot;替换为真正的引号。

请参阅这个js fiddle示例。

我会这样做：

进行ajax调用，用json填充var数据。

var data = '{"Form": 
    [{"Name":"Conan","Description":"Adventure", "Value":"Children Movie"},
     {"Name":"Sandocan","Description":"Adventure","Value":"Children Movie"},
     {"Name":"Terminator","Description":"Sci-Fi", "Value":"Action Movie"},
     {"Name":"Iron Man","Description":"Adventure","Value":"Children Movie"}]}';
var obj = [];
$.each(data.Form, function(key,value) {
   var tmpObj = {};
   $.each(value, function(key2,value2){
       tmpObj[key2] = value2;
   });     
   obj.push(tmpObj);
});

这样你就可以在需要的时候使用obj：

obj[0].Name // Conan
obj[0].Value // Children Movie
obj[1].Description // Adventure
相关文章：