Wie man ein JSON-Gerüst erstellt und es später ausfüllt

Question

Ich versuche, ein JSON zu erstellen, um Informationen über Benutzer zu speichern. Zum Beispiel soll es am Ende so aussehen:

{
"people": [
    {
        "name": "foo",
        "company": "bar",
        "email": "foo@bar.com"
    },
    {
        "name": "bar",
        "company": "foo",
        "email": "bar@foo.com"
    }
]
}

Dies wird über ein Formular ausgefüllt, also möchte ich in der Lage sein, ein leeres JSON zu deklarieren und es zu ergänzen, wenn Benutzer das Formular absenden. Gibt es eine Möglichkeit, ein leeres JSON mit der Struktur (Name, Unternehmen, E-Mail) zu deklarieren? Wie füge ich einen weiteren Eintrag hinzu? Gibt es so etwas wie .append("name": "bar", "company": "foo", "email": "bar@foo.com") ? Ich möchte reinen JavaScript verwenden, aber zur Not könnte auch jQuery verwendet werden.

Answer 1

Mit Javascript muss in einem JSON-Objekt nichts vordefiniert werden.

Dies ist ein perfekt gültiger Code:

var o = {}; // ein neues Objekt erstellen

o.name = "Bob";
console.log(o.name); // gibt Bob aus

o.scores = new Array();
o.scores[o.scores.length] = 1;
o.scores[o.scores.length] = 2;
o.scores[o.scores.length] = 3;
console.log(o.scores); // gibt [1, 2, 3] aus

o.info = {};

o.info.isSet = true;
console.log(o.info.isSet); // gibt true aus

console.log(o.info.isNotSet); // gibt undefined aus

So können Sie dynamisch jedes JSON erstellen, das Sie von Ihrem Formular benötigen.

Wenn Sie das JSON dann als Zeichenfolge rendern möchten, können Sie JSON.stringify(o) verwenden, und es wird gedruckt:

{"name":"Bob","scores":[1,2,3],"info":{"isSet":true}}

Answer 2

Verwenden Sie Array.Push

var personInfo = {}; // Erstellen Sie das Objekt und speichern Sie es wahrscheinlich in localStorage oder Cookie usw. oder was auch immer Sie bevorzugen. Sie können es auch im `data`-Cache (Ihres HTML-DOM-Elements) speichern.

var peopleObj=[];
personInfo["people"] = peopleObj; // Speichern Sie das Array im Objekt unter dem Schlüssel/Eigenschaft "Person"

// Fügen Sie die Daten nach Bedarf hinzu.
peopleObj.push({"name":"was_auch_immer",
                 "company":"foo",
                 "email":"bar@foo.com"
               });

peopleObj.push({"name":"was_auch_immer2",
                "company":"foo",
                 "email":"bar@foo.com"});

console.log(personInfo);

Demo

Hier ist eine Beispiel-Demo, was Sie wahrscheinlich versuchen zu erreichen: Verwendung von localStorage, um das Grundgerüst zu speichern und bei Klick auf einen Button Daten hinzuzufügen.

Demo2

 var personInfo = {
      "people": []
  };

  window.localStorage.setItem('person',JSON.stringify(personInfo));
  var i = 0;
  $('input').click(function () {

      var obj = JSON.parse(window.localStorage.getItem('person'));
      obj["people"].push({
          "name": "was_auch_immer" + i++,
          "company": "foo",
          "email": "bar@foo.com"
      });
       window.localStorage.setItem('person',JSON.stringify(obj));
      console.log(obj);
  });

Answer 3

Ich würde vorschlagen, eine Funktion zum Hinzufügen zu erstellen. Dadurch vermeiden Sie, den gesamten Hinzufügungscode duplizieren zu müssen, wenn Sie eine Person zur Liste hinzufügen.

// Definieren Sie Ihr Objekt irgendwo
var someObject = {
    "people": []
};

// Definieren Sie eine Funktion zum Hinzufügen zu Ihrem Hauptobjekt
function addPerson(name, company, email) {
    someObject.people.push({
        "name": name,
        "company": company,
        "email": email
    });
}

Dann, wenn Sie einen weiteren Eintrag hinzufügen möchten, rufen Sie einfach die Funktion auf:

addPerson("Ein Name", "Ein Unternehmen", "person@website.com");

Für so etwas, würde ich sagen, ist es wahrscheinlich am besten, es einfach zu halten.

Answer 4

Ich würde wahrscheinlich etwas Ähnliches tun:

var Person = function (name, company, email)
{
    this.name = name;
    this.company = company;
    this.email = email;
}

var People = function ()
{
    this.people = [];

    this.add = function (person)
    {
        this.people.push(person);
    }
}

var people = new People();

people.add(new Person("john", "smith", "blah@blah.com"));

alert(JSON.stringify(people));