Question

我不确定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;

我做的事情很傻，我敢肯定，但我必须让它发挥作用。

Answer 1

由于你用jQuery标记它，为什么不做这样的事情（假设你想要表示为radiobuttons的项目）：

使用$.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

Answer 2

我认为问题在于＆amp; quot;在你的JSON字符串中，这会使它无效。

如果您使用jsonString.replace(/"/g,'"');替换所有"的真实引号。

有关示例，请参阅此js fiddle。

Answer 3

我会这样做：

进行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

Json列表到javascript对象构建表单

3 个答案:

Fiddle