Question

我正在使用巨大的多维JSON对象，用户将在表单字段中提交值，然后这些值将以JSON格式存储在数据库中，如String

JSON示例：

{
  "Cat": {
    "enabled": false,
    "Color": "#994c4c"
    "height":10,
    "eye": "blue",
  },
  "Dog": {
    "enabled": true,
    "typeOf": {
      "breed": "Affenpinscher"
    }
  },
  "Elephant": {
    "enabled": true,
    "food": {
      "type": {
        "fruits": true,
      }
    }
  }
}
 ........... continues...

用户可以使用新属性创建n个上述JSON字符串，并将其存储在数据库中

因此，当用户从数据库中选择所需的JSON字符串时，我将字符串解析为Jquery中的JSON对象，

但我最大的问题是，我需要遍历这些巨大的JSON对象并从这些对象中检索值，我需要在相应的表单字段中分配它

我的From Fields的例子：

<select id="CatEnabled">
<option value="true">TRUE<option>
<option value="false">FALSE<option>
</select>

<input type="number" id="CatHeigt" min="20"/>

<input type="text" id="DogTypeOfBreed"/>

<select id="ElephantFoodTypeFruits">
<option value="true">TRUE<option>
<option value="false">FALSE<option>
</select>

我的表单字段将如上所示，因为我的表单字段还包含大量超过500多个字段的字段，

我正在检索像这样的JSON对象

            $.each(JSON.parse(cmsg), function (key, value) {
              if(key=="cat")
                 CatHeigt.val(value.height);
        });

上面的每个循环只是一个示例，我将在循环内循环以获取JSON的值，根据我的JSON结构

但是我只需要一个简单的Loop函数来检索所有值，我需要在所有相应的表单字段中分配它，我不需要像这样的CatHeigt.val（value.height）;因为这个过程花了太长时间来分配所有500多个表单字段，而我需要简单的解决方案

Answer 1

您当前正在使用对象路径的 PascalCased 字符串作为元素id。如果你可以使用分隔的字符串会更容易。

完成后，您可以（1）将字符串拆分为基于该分隔符的数组，（2）迭代该数组并检查每个项目是否为json对象的对象属性，（3）如果找到，将该属性分配给对象本身以进行下一次迭代，（4）返回最后一个对象，（5）通过迭代将该对象值分配给表单元素。

注意：在命名元素，变量和属性时必须保持一致。在问题中发布的代码中，没有一致性。对于下面的示例，我已将所有内容转换为小写以对其进行标准化。出于所有实际目的，您将不得不重新审视。

此代码段 会告诉您：

＆＃13;

var jsonString = '{"Cat": {"enabled": false, "Color": "#994c4c", "height":10, "eye": "blue" }, "Dog": { "enabled": true, "typeOf": {"breed": "Affenpinscher"}},"Elephant": {"enabled": true, "food": {"type": {"fruits": true}}}}';

var json = JSON.parse(jsonString.toLowerCase()); /* converted to lowercase */

function getProp(obj, str) {
    var arr = str.toLowerCase().split('-'); // splitting on delimiter 
    arr.forEach(function(item, idx) {       // iterate the split array 
        if (item in obj) obj = obj[item];   // if item is in object, assign this prop
        else return;                        // to the object. otherwise continue
    });                     
    return obj;                             // return the found prop as current obj
}

var $elems = $("input, select");            // jQuery set of all your elements
$elems.each(function() {                    // iterate this set of elements
    var id = this.id, 
        propValue = getProp(json, id);      // get the property by passing json and id
    $(this).val(propValue.toString());      // set the retreived property as val 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Cat-Enabled">
    <option value="true">TRUE</option>
    <option value="false">FALSE</option>
</select>
<br /><br />
<input type="number" id="Cat-Height" min="20"/>
<input type="text" id="Dog-TypeOf-Breed"/>
<br /><br />
<select id="Elephant-Food-Type-Fruits">
    <option value="true">TRUE</option>
    <option value="false">FALSE</option>
</select>

＆＃13;

演示小提琴：http://jsfiddle.net/abhitalks/5ybu7nt3/1/

Jquery：访问多维JSON对象的值并在表单字段中分配

1 个答案: