从多个元素的值创建JSON对象的动态数组

时间：2018-06-16 21:11:29

标签： javascript jquery json

我需要一些帮助，根据不同元素的值创建一个JSON对象的动态数组。示例是以下元素。我有其他元素来创建JSON所需的值。我不想发布3个相同的代码。所以belwo x3 

 <tr>
      <td style="width: 5%"><label>Title:</label></td>
      <td><input type="text" class="leds" name="title" style="width:150px"value=""></td><tr>
      <td style="width: 5%"><label>Message:</label></td>
      <td><input type="text" class="leds" name="message" style="width: 150px" value=""></td><tr>
      <td style="width: 5%"><label>IP address:</label></td>
      <td><input type="text" class="leds" name="ip_address" style="width:150px" value=""></td>

     <td style="width: 5%"><label>Message Colour:</label></td>
     <td><select type="text" class="leds" name="led_colour" style="width:150px">
           <option value=""></option>
           <option value="255,0,0,0">Red</option>
           <option value="0,255,0,0">Green</option>
           <option value="0,0,255,0">Blue</option>
           <option value="255,165,0,0">Orange</option>
           <option value="255,255,0,0">Yellow</option>
           <option value="255,255,255,0">White</option>
           <option value="128,0,128,0">Purple</option>
           <option value="255,0,255,0">Fuchsia</option>
           <option value="192,192,192,0">Silver</option>
     </td>
   </tr>

我可以使用以下

获取值 
 $.each($('.leds'), function(index, obj) { 
console.log(index + ':' + obj.value); 

});

我想做的是创建如下的JSON：

 [{
"title": "Test1",
"message": "Test1 message",
"ip_address": "1.1.1.1",
"led_colour" : "255,0,0,0"},
{
"title": "Test2",
"message": "Test2 message",
"ip_address": "2.2.2.2",
"led_colour" : "255,0,0,0"},
{
"title": "Test3",
"message": "Test3 message",
"ip_address": "3.3.3.3",
"led_colour" : "255,0,0,0"
 }]

2 个答案:

答案 0 :(得分：0)

我认为这是解决方案，但更需要修改你的html结构

1）在你的情况下： 

function getJson(keys) {

    let result = [];

    $('.leds').each(function(i) {

        let keyIndex = i % keys.length,
            key = keys[keyIndex];

        if (!keyIndex) {
            result.push({});
        }

        let index = result.length - 1;
        result[index][key] = this.value;
    })

    return result;
}

const jsonData = getJson(['title', 'message', 'ip_address', 'led_colour']);

console.log('jsonData:', jsonData);

2）尝试对tbody

小组使用tr

DEMO in Codepen.io

＆＃13;
＆＃13; 
function getJson() {

    let result = [];

    $('tbody').each(function() {
        let item = {}
        $('.leds', this).each(function() {
            let $this = $(this);
            item[$this.prop('name')] = $this.val();
        })
        result.push(item);
    })
  
    console.log('result:', result)

    return result;
}

$(() => {

    getJson();

    $('button').click(() => {
        console.clear();
        const jsonData = getJson();
        alert(JSON.stringify(jsonData));
    })
})
＆＃13; 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Get Json Data</button>
<table>
    <tbody>
        <tr>
            <td style="width: 5%">
                <label>Title:</label>
            </td>
            <td>
                <input type="text" name="title" style="width:150px" value="title1" class="leds"/>
            </td>
        </tr>
        <tr>
            <td style="width: 5%">
                <label>Message:</label>
            </td>
            <td>
                <input type="text" name="message" style="width: 150px" value="mess1" class="leds"/>
            </td>
        </tr>
        <tr>
            <td style="width: 5%">
                <label>IP address:</label>
            </td>
            <td>
                <input type="text" name="ip_address" style="width:150px" value="192.168.1.1" class="leds"/>
            </td>
            <td style="width: 5%">
                <label>Message Colour:</label>
            </td>
            <td>
                <select type="text" name="led_colour" style="width:150px" class="leds">
                    <option value=""></option>
                    <option value="255,0,0,0" selected="selected">Red</option>
                    <option value="0,255,0,0">Green</option>
                    <option value="0,0,255,0">Blue</option>
                    <option value="255,165,0,0">Orange</option>
                    <option value="255,255,0,0">Yellow</option>
                    <option value="255,255,255,0">White</option>
                    <option value="128,0,128,0">Purple</option>
                    <option value="255,0,255,0">Fuchsia</option>
                    <option value="192,192,192,0">Silver</option>
                </select>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td style="width: 5%">
                <label>Title:</label>
            </td>
            <td>
                <input type="text" name="title" style="width:150px" value="title2" class="leds"/>
            </td>
        </tr>
        <tr>
            <td style="width: 5%">
                <label>Message:</label>
            </td>
            <td>
                <input type="text" name="message" style="width: 150px" value="mess2" class="leds"/>
            </td>
        </tr>
        <tr>
            <td style="width: 5%">
                <label>IP address:</label>
            </td>
            <td>
                <input type="text" name="ip_address" style="width:150px" value="192.168.1.2" class="leds"/>
            </td>
            <td style="width: 5%">
                <label>Message Colour:</label>
            </td>
            <td>
                <select type="text" name="led_colour" style="width:150px" class="leds">
                    <option value=""></option>
                    <option value="255,0,0,0" selected="selected">Red</option>
                    <option value="0,255,0,0">Green</option>
                    <option value="0,0,255,0">Blue</option>
                    <option value="255,165,0,0">Orange</option>
                    <option value="255,255,0,0">Yellow</option>
                    <option value="255,255,255,0">White</option>
                    <option value="128,0,128,0">Purple</option>
                    <option value="255,0,255,0">Fuchsia</option>
                    <option value="192,192,192,0">Silver</option>
                </select>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td style="width: 5%">
                <label>Title:</label>
            </td>
            <td>
                <input type="text" name="title" style="width:150px" value="title3" class="leds"/>
            </td>
        </tr>
        <tr>
            <td style="width: 5%">
                <label>Message:</label>
            </td>
            <td>
                <input type="text" name="message" style="width: 150px" value="mess3" class="leds"/>
            </td>
        </tr>
        <tr>
            <td style="width: 5%">
                <label>IP address:</label>
            </td>
            <td>
                <input type="text" name="ip_address" style="width:150px" value="192.168.1.3" class="leds"/>
            </td>
            <td style="width: 5%">
                <label>Message Colour:</label>
            </td>
            <td>
                <select type="text" name="led_colour" style="width:150px" class="leds">
                    <option value=""></option>
                    <option value="255,0,0,0" selected="selected">Red</option>
                    <option value="0,255,0,0">Green</option>
                    <option value="0,0,255,0">Blue</option>
                    <option value="255,165,0,0">Orange</option>
                    <option value="255,255,0,0">Yellow</option>
                    <option value="255,255,255,0">White</option>
                    <option value="128,0,128,0">Purple</option>
                    <option value="255,0,255,0">Fuchsia</option>
                    <option value="192,192,192,0">Silver</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

一种简单的方法是循环每个tr并获取所有.leds输入，获取输入的名称，并将其值作为构建对象，然后将其放入数组。请参阅下面的代码。

var itemsArray = [];
$.each($('tr'), function() { 
   var item = {};
   $(this).find('.leds').each(function(index, obj) {
       item[$(obj).attr("name")]=$(obj).val();

    });
    itemsArray.push(item);
});
相关问题
最新问题