Wie kann ich mit JavaScript / jQuery Formulardaten abrufen?

Gibt es eine einfache, einzeilige Möglichkeit, die Daten eines Formulars so abzurufen, wie es wäre, wenn es nur auf klassische HTML-Weise übermittelt würde?

Zum Beispiel:

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

Ausgabe:

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

So etwas ist zu einfach, da es keine (korrekten) Textbereiche, Auswahlmöglichkeiten, Optionsfelder und Kontrollkästchen enthält:

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

Demo

Verwenden Sie $('form').serializeArray(), um ein Array zurückzugeben :

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

Eine andere Option ist $('form').serialize(), die eine Zeichenfolge zurückgibt :

"foo=1&bar=xxx&this=hi"

Schauen Sie sich diese jsfiddle-Demo an

Aktualisierte Antwort für 2014: HTML5 FormData erledigt dies

var formData = new FormData(document.querySelector('form'))

Sie können formData dann genau so veröffentlichen, wie es ist - es enthält alle Namen und Werte, die im Formular verwendet werden.

Gibt basierend auf jQuery.serializeArraySchlüssel-Wert-Paare zurück.

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

Dies ist eine pingelige Antwort, aber lassen Sie mich erklären, warum dies eine bessere Lösung ist:

• Wir behandeln ein Formular ordnungsgemäß und nicht per Knopfdruck. Einige Leute drücken gerne die Eingabetaste auf Felder. Einige Leute verwenden alternative Eingabegeräte wie Spracheingabegeräte oder andere Eingabehilfen. Wenn Sie das Formular abschicken, lösen Sie es für alle richtig.

• Wir untersuchen die Formulardaten für das tatsächlich übermittelte Formular. Wenn Sie Ihre Formularauswahl später ändern, müssen Sie die Auswahl nicht für alle Felder ändern. Darüber hinaus haben Sie möglicherweise mehrere Formulare mit denselben Eingabenamen. Keine Notwendigkeit, mit übermäßigen IDs zu disambiguieren und was nicht, verfolgen Sie einfach die Eingaben basierend auf dem eingereichten Formular. Auf diese Weise können Sie auch einen einzelnen Ereignishandler für mehrere Formulare verwenden, wenn dies für Ihre Situation angemessen ist.

• Die FormData-Oberfläche ist ziemlich neu, wird aber von Browsern gut unterstützt. Es ist eine großartige Möglichkeit, diese Datenerfassung zu erstellen, um die tatsächlichen Werte des Formulars zu ermitteln. Ohne sie müssen Sie alle Elemente (z. B. mit form.elements) durchlaufen und herausfinden, was überprüft wurde, was nicht, welche Werte usw. sind. Völlig möglich, wenn Sie alte Browserunterstützung benötigen, aber die FormData Schnittstelle ist einfacher.

• Ich verwende hier ES6 ... keineswegs erforderlich. Ändern Sie es daher wieder in ES5-kompatibel, wenn Sie Unterstützung für alte Browser benötigen.

Verwenden Sie .serializeArray (), um die Daten im Array-Format abzurufen und anschließend in ein Objekt zu konvertieren:

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

Hier ist eine wirklich einfache und kurze Lösung, für die Jquery nicht einmal erforderlich ist.

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;

Es ist 2019 und es gibt einen besseren Weg, dies zu tun:

const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

oder wenn Sie stattdessen ein einfaches Objekt möchten

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

Beachten Sie jedoch, dass dies nicht mit doppelten Schlüsseln funktioniert, wie Sie sie von Mehrfachauswahl- und doppelten Kontrollkästchen mit demselben Namen erhalten.

$('#myform').serialize();

Ich benutze das:

jQuery Plugin

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

HTML-Formular

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

Holen Sie sich die Daten

var myData = $("#myForm").getFormData();

$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

Ansonsten möchten Sie sich vielleicht serialize () ansehen .

Hier ist eine funktionierende JavaScript-Implementierung, die Kontrollkästchen, Optionsfelder und Schieberegler korrekt verarbeitet (wahrscheinlich auch andere Eingabetypen, aber ich habe nur diese getestet).

function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case 'submit':
                break;
            case 'radio':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case 'checkbox':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

Arbeitsbeispiel:

    function setOrPush(target, val) {
      var result = val;
      if (target) {
        result = [target];
        result.push(val);
      }
      return result;
    }

    function getFormResults(formElement) {
      var formElements = formElement.elements;
      var formParams = {};
      var i = 0;
      var elem = null;
      for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
          case 'submit':
            break;
          case 'radio':
            if (elem.checked) {
              formParams[elem.name] = elem.value;
            }
            break;
          case 'checkbox':
            if (elem.checked) {
              formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
            }
            break;
          default:
            formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
      }
      return formParams;
    }

    //
    // Boilerplate for running the snippet/form
    //

    function ok() {
      var params = getFormResults(document.getElementById('main_form'));
      document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' ');
    }

    (function() {
      var main_form = document.getElementById('main_form');
      main_form.addEventListener('submit', function(event) {
        event.preventDefault();
        ok();
      }, false);
    })();

<form id="main_form">
  <div id="questions_wrapper">
    <p>what is a?</p>
    <div>
      <input type="radio" required="" name="q_0" value="a" id="a_0">
      <label for="a_0">a</label>
      <input type="radio" required="" name="q_0" value="b" id="a_1">
      <label for="a_1">b</label>
      <input type="radio" required="" name="q_0" value="c" id="a_2">
      <label for="a_2">c</label>
      <input type="radio" required="" name="q_0" value="d" id="a_3">
      <label for="a_3">d</label>
    </div>
    <div class="question range">
      <label for="a_13">A?</label>
      <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
      <datalist id="q_3_dl">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
        <option value="10"></option>
      </datalist>
    </div>
    <p>A and/or B?</p>
    <div>
      <input type="checkbox" name="q_4" value="A" id="a_14">
      <label for="a_14">A</label>
      <input type="checkbox" name="q_4" value="B" id="a_15">
      <label for="a_15">B</label>
    </div>
  </div>
  <button id="btn" type="submit">OK</button>
</form>
<div id="results_wrapper"></div>

bearbeiten:

Wenn Sie nach einer vollständigeren Implementierung suchen, schauen Sie sich diesen Abschnitt des Projekts an, für das ich dies gemacht habe . Ich werde diese Frage irgendwann mit der vollständigen Lösung aktualisieren, die ich mir ausgedacht habe, aber vielleicht ist dies für jemanden hilfreich.

Wenn Sie jQuery verwenden, finden Sie hier eine kleine Funktion, die genau das tut, wonach Sie suchen.

Fügen Sie Ihrem Formular zunächst eine ID hinzu (es sei denn, es ist das einzige Formular auf der Seite, dann können Sie einfach 'Formular' als Dom-Abfrage verwenden).

<form id="some-form">
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
</script>

Die Ausgabe würde folgendermaßen aussehen:

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

Sie können auch die FormData- Objekte verwenden. Mit dem FormData-Objekt können Sie eine Reihe von Schlüssel / Wert-Paaren kompilieren, die mit XMLHttpRequest gesendet werden sollen. Es ist in erster Linie für das Senden von Formulardaten vorgesehen, kann jedoch unabhängig von Formularen verwendet werden, um verschlüsselte Daten zu übertragen.

        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);

Dadurch werden alle Formularfelder an das JavaScript-Objekt "res" angehängt:

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

Ich habe die Antwort beigefügt, um auch das gewünschte Objekt zurückzugeben.

function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n['name']] = n['value'];
});

return model;
}

Basierend auf der Antwort von Neuront habe ich eine einfache JQuery-Methode erstellt, die die Formulardaten in Schlüssel-Wert-Paaren abruft, aber für Mehrfachauswahl und für Array-Eingaben mit name = 'example []' funktioniert.

So wird es verwendet:

var form_data = $("#form").getFormObject();

Nachfolgend finden Sie ein Beispiel für die Definition und Funktionsweise.

// Function start
$.fn.getFormObject = function() {
    var object = $(this).serializeArray().reduce(function(obj, item) {
        var name = item.name.replace("[]", "");
        if ( typeof obj[name] !== "undefined" ) {
            if ( !Array.isArray(obj[name]) ) {
                obj[name] = [ obj[name], item.value ];
            } else {
               obj[name].push(item.value);
            }
        } else {
            obj[name] = item.value;
        }
        return obj;
    }, {});
    return object;
}
// Function ends

// This is how it's used
$("#getObject").click( function() {
  var form_data = $("#form").getFormObject();
  console.log(form_data);
});

/* Only to make view better ;) */
#getObject {
  padding: 10px;
  cursor:pointer;
  background:#0098EE;
  color:white;
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="form">
  <input type="text" name="text" value="Hola amigo" /> 
  
  <input type="text" name="text_array[]" value="Array 1" /> 
  <input type="text" name="text_array[]" value="Array 2" /> 
  <input type="text" name="text_array[]" value="Array 3" /> 
  
  <select name="multiselect" multiple>
    <option name="option1" selected> option 1 </option>
    <option name="option2" selected> option 2 </option>
  </select>
  
  <input type="checkbox" name="checkbox" value="checkbox1" checked/>
  <input type="checkbox" name="checkbox" value="checkbox2" checked/>
  
  <input type="radio" name="radio" value="radio1" checked/>
  <input type="radio" name="radio" value="radio2"/>

</form>

<div id="getObject"> Get object (check the console!) </div>

var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});

function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        if(indexed_array[n['name']] == undefined){
            indexed_array[n['name']] = [n['value']];
        }else{
            indexed_array[n['name']].push(n['value']);
        }
    });

    return indexed_array;
}

Mit dieser Funktion können Sie ein Objekt oder einen JSON aus dem Formular haben.

zur Verwendung:

var object = formService.getObjectFormFields("#idform");

 function  getObjectFormFields(formSelector)
        {
            /// <summary>Função que retorna objeto com base nas propriedades name dos elementos do formulário.</summary>
            /// <param name="formSelector" type="String">Seletor do formulário</param>

            var form = $(formSelector);

            var result = {};
            var arrayAuxiliar = [];
            form.find(":input:text").each(function (index, element)
            {
                var name = $(element).attr('name');

                var value = $(element).val();
                result[name] = value;
            });

            form.find(":input[type=hidden]").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });


            form.find(":input:checked").each(function (index, element)
            {
                var name;
                var value;
                if ($(this).attr("type") == "radio")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    result[name] = value;
                }
                else if ($(this).attr("type") == "checkbox")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    if (result[name])
                    {
                        if (Array.isArray(result[name]))
                        {
                            result[name].push(value);
                        } else
                        {
                            var aux = result[name];
                            result[name] = [];
                            result[name].push(aux);
                            result[name].push(value);
                        }

                    } else
                    {
                        result[name] = [];
                        result[name].push(value);
                    }
                }

            });

            form.find("select option:selected").each(function (index, element)
            {
                var name = $(element).parent().attr('name');
                var value = $(element).val();
                result[name] = value;

            });

            arrayAuxiliar = [];
            form.find("checkbox:checked").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = arrayAuxiliar.push(value);
            });

            form.find("textarea").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });

            return result;
        }

Ich habe eine Bibliothek geschrieben, um genau dieses Problem zu lösen: JSONForms . Es nimmt eine Form an, geht jede Eingabe durch und erstellt ein JSON-Objekt, das Sie leicht lesen können.

Angenommen, Sie haben das folgende Formular:

<form enctype='application/json'>
  <input name='places[0][city]' value='New York City'>
  <input type='number' name='places[0][population]' value='8175133'>
  <input name='places[1][city]' value='Los Angeles'>
  <input type='number' name='places[1][population]' value='3792621'>
  <input name='places[2][city]' value='Chicago'>
  <input type='number' name='places[2][population]' value='2695598'>
</form>

Wenn Sie das Formular an die Codierungsmethode von JSONForms übergeben, erhalten Sie das folgende Objekt zurück:

{
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}

Hier ist eine Demo mit Ihrem Formular.

$( "form" ).bind( "submit", function(e) {
    e.preventDefault();
    
    console.log(  $(this).serializeObject() );    

    //console.log(  $(this).serialize() );
    //console.log(  $(this).serializeArray() );

});


$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();

    $.each( a, function() {
        if ( o[this.name] !== undefined) 
        {
            if ( ! o[this.name].push ) 
            {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        }
        else 
        {
            o[this.name] = this.value || '';
        }
    });

    return o;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<form>

    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />

    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
    </select>

    <input type="submit" value="Submit" />

</form>

Codepen

Für diejenigen unter Ihnen, die eine Objectim Gegensatz zu einer serialisierten Zeichenfolge bevorzugen (wie die von zurückgegebene $(form).serialize()und eine leichte Verbesserung $(form).serializeArray()), können Sie den folgenden Code verwenden:

var Form = {
    _form: null,
    _validate: function(){
        if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
        if(!this._form.elements.length) return false;
    }, _loopFields: function(callback){
        var elements = this._form.elements;
        for(var i = 0; i < elements.length; i++){
            var element = form.elements[i];
            if(name !== ""){
                callback(this._valueOfField(element));
            }
        }
    }, _valueOfField: function(element){
        var type = element.type;
        var name = element.name.trim();
        var nodeName = element.nodeName.toLowerCase();
        switch(nodeName){
            case "input":
                if(type === "radio" || type === "checkbox"){
                    if(element.checked){
                        return element.value;
                    }
                }
                return element.value;
                break;
            case "select":
                if(type === "select-multiple"){
                    for(var i = 0; i < element.options.length; i++){
                        if(options[i].selected){
                            return element.value;
                        }
                    }
                }
                return element.value;
                break;
            case "button":
                switch(type){
                    case "reset": 
                    case "submit": 
                    case "button":
                        return element.value;
                        break;
                }
                break;
        } 
    }, serialize: function(form){
        var data = {};
        this._form = form;

        if(this._validate()){
            this._loopFields(function(value){
                if(value !== null) data[name] = value;
            });
        }
        return data;
    }
};

Um es auszuführen, verwenden Sie einfach Form.serialize(form)und die Funktion gibt eine Objectähnliche zurück:

<!-- { username: "username", password: "password" } !-->
<input type="text" value="username">
<input type="password" value="password">

Als Bonus bedeutet dies, dass Sie nicht das gesamte jQuery-Paket nur für eine Serialisierungsfunktion installieren müssen.

Ich habe eine Funktion geschrieben, die sich um mehrere Kontrollkästchen und mehrere Auswahlen kümmert. In diesen Fällen wird ein Array zurückgegeben.

function getFormData(formId) {
    return $('#' + formId).serializeArray().reduce(function (obj, item) {
        var name = item.name,
            value = item.value;

        if (obj.hasOwnProperty(name)) {
            if (typeof obj[name] == "string") {
                obj[name] = [obj[name]];
                obj[name].push(value);
            } else {
                obj[name].push(value);
            }
        } else {
            obj[name] = value;
        }
        return obj;
    }, {});
}

Anzeigen von Formulareingabeelementfeldern und Eingabedatei zum Senden Ihres Formulars ohne Seitenaktualisierung und Abrufen aller Werte mit darin enthaltener Datei

<form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" >
<input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name">
<input type="number" name='phoneno'  class="form-control" id="phoneno" placeholder="Phone Number">
<textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>
<input type="file" name="file" id="file" >
<input type="submit" id="sub" value="Registration">					   
</form>

$('#imageUploadForm').on('submit',(function(e) 
{
     fname = $('#fname').val();
     lname =  $('#lname').val();
     address =  $('#address').val();
     phoneno =  $('#phoneno').val();
     file =  $('#file').val();
     e.preventDefault();
     var formData = new FormData(this);
     formData.append('file', $('#file')[0]);
     formData.append('fname',$('#fname').val());
     formData.append('lname',$('#lname').val());
     formData.append('phoneno',$('#phoneno').val());
     formData.append('address',$('#address').val());
     $.ajax({
		type:'POST',
                url: "test.php",
                //url: '<?php echo base_url().'edit_profile/edit_profile2';?>',

                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data)
                {
                     alert('Data with file are submitted !');

                }

     });

}))

$(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

Es wird das Problem behoben: Es konnte nicht mit Mehrfachauswahl gearbeitet werden.

Sie sind alle nicht ganz richtig. Sie können nicht schreiben:

formObj[input.name] = input.value;

Denn auf diese Weise werden bei einer Mehrfachauswahlliste die Werte mit der letzten überschrieben, da sie wie folgt übertragen werden: "param1": "value1", "param1": "value2".

Der richtige Ansatz ist also:

if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}

Diese Methode sollte es tun. Es serialisiert die Formulardaten und konvertiert sie dann in ein Objekt. Kümmert sich auch um Gruppen von Kontrollkästchen.

function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}

Hier ist eine nette Vanilla JS-Funktion, die ich geschrieben habe, um Formulardaten als Objekt zu extrahieren. Es bietet auch Optionen zum Einfügen von Ergänzungen in das Objekt und zum Löschen der Formulareingabefelder.

const extractFormData = ({ form, clear, add }) => {
  return [].slice.call(form.children).filter(node => node.nodeName === 'INPUT')
  .reduce((formData, input) => {
    const value = input.value
    if (clear) { input.value = '' }
    return {
      ...formData,
      [input.name]: value
    }
  }, add)
}

Hier ist ein Beispiel für die Verwendung mit einer Post-Anfrage:

submitGrudge(e) {
  e.preventDefault()

  const form = e.target
  const add = { id: Date.now(), forgiven: false }
  const grudge = extractFormData({ form, add, clear: true })

  // grudge = {
  //  "name": "Example name",
  //  "offense": "Example string",
  //  "date": "2017-02-16",
  //  "id": 1487877281983,
  //  "forgiven": false
  // }

  fetch('http://localhost:3001/api/grudge', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(grudge)
  })
    .then(response => response.json())
    .then(grudges => this.setState({ grudges }))
    .catch(err => console.log('error: ', err))
}