Fill the API data form



  • Method GET /api/1.0/platform/settingswhich issues a list of platform designs in format JSON:

    [{"param":"TTL","value":"25"},{"param":"path","value":"\/media\/cctv"},{"param":"segment_time_min","value":"60"}]
    

    How do you do? jQuery, evaporate this body and make it a form like this?
    Oh, yeah, there's a second method of api that retains, too, it'd be good to keep, you know, or send me along the right path:

    PUT /api/1.0/platform/settings 
    

    <link rel="stylesheet" href="https://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    

    <form action="" method="post">
    <fieldset>
    <div class="control-group">
    <label class="control-label" for="param1">param1</label>
    <div class="controls">
    <input type="text" id="param1" name="param1" value="value1" required class="form-control input-lg">
    </div>
    </div>
    <div class="control-group">
    <label class="control-label" for="param2">param2</label>
    <div class="controls">
    <input type="text" id="param2" name="param2" value="value2" required class="form-control input-lg">
    </div>
    </div>
    <br>
    <input type="hidden" name="action" value="platform_settings">
    <input class="btn btn-primary" type="submit" value="Сохранить">
    </fieldset>
    </form>

    P.S. Here. SO I've been looking for something like that. Javascript For me as Chinese:

    UPD.

    $.ajax({
    url: '/api/1.0/platform/settings',
    type: "get",
    dataType: "json",
    success: function(data, textStatus, jqXHR) {
    // since we are using jQuery, you don't need to parse response
    drawSettingsModal(data);
    }
    });

    function drawSettingsModal(data) {
    for (var i = 0; i < data.length; i++) {
    drawRow(data[i]);
    }
    }

    function drawRow(rowData) {
    console.log(rowData);
    }

    Functions drawRow We have a mass:

    Arr

    Where do we go?



  • I see you've been through halfway. Now you're cycling to drawRaw with the data parameters, so:

    drawRaw({"param":"TTL","value":"25"});
    drawRaw({"param":"path","value":"\/media\/cctv"});
    drawRaw({"param":"segment_time_min","value":"60"});
    

    Now, inside the function drawRaw, we need to describe the creation of one input'a with all associated elements. About:

    html += '<div class="control-group">' +
        '<label class="control-label" for="'+data.param+'">'+data.param+'</label>' +
        '<div class="controls">' +
            '<input type="text" id="'+data.param+'" name="'+data.param+'" value="'+data.value+'" ' required class="form-control input-lg">' +
        '</div>' +
    '</div>';
    

    The html variable before the first call to drawRaw is expected to contain a description of the beginning of the html form and, the remaining form code will be completed after all operations drawRaw in html.

    The result of the code you have submitted is that:

    $.ajax({
        url: '/api/1.0/platform/settings',
        type: "get",
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
            // since we are using jQuery, you don't need to parse response
            drawSettingsModal(data);
        }
    });
    

    function drawSettingsModal(data) {
    //часть формы до полей, которые генерируем автоматически
    var html = '<link rel="stylesheet" href="https://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">' +
    '<form action="" method="post">' +
    '<fieldset>';

    //генерируем html-код полей с именами и значениями из поступивших данных 
    for (var i = 0; i &lt; data.length; i++) {
        html += drawRow(data[i]);
    }
    
    //часть формы после генерируемых полей
    html += '&lt;input type="hidden" name="action" value="platform_settings"&gt;' +
        '&lt;input class="btn btn-primary" type="submit" value="Сохранить"&gt;' +
        '&lt;/fieldset&gt;' +
    '&lt;/form&gt;';
    

    }

    //код из этой функции можно поместить прямо внутрь цикла, а функцию удалить
    function drawRow(rowData) {
    return '<div class="control-group">' +
    '<label class="control-label" for="'+rowData.param+'">'+rowData.param+'</label>' +
    '<div class="controls">' +
    '<input type="text" id="'+rowData.param+'" name="'+rowData.param+'" value="'+rowData.value+'" ' required class="form-control input-lg">' +
    '</div>' +
    '</div>';
    }




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2