Stuck mit JSON Update

Ich bin ein bisschen fest mit meinem Javascript/JSON. Ich habe ein Skript gemacht, wie JSON lädt und es in HTML setzt. Jetzt meine Frage, wie kann ich Daten aktualisieren. Ich möchte das Skript so machen, dass, wenn Sie versuchen, den Knopf zu drücken, das Skript den lebenden Ort von der Person aktualisiert.Stuck mit JSON Update

Plaats = Ort Postleitzahl = zipcode

<!DOCTYPE html> 
<html lang="en"> 
<body> 
<p id="demo"></p> 
<script> 
var text = '{ "gebruikers" : [' + 
'{"naam":"Johan de vries", "Plaats":"Otterlokade 56", "postcode":"6743FG", "Plaats":"Dinxperloo", "telefoon":"0495-1234567"},' + 
'{"naam":"Jan de hoop", "Plaats":"Maaswijk 23", "postcode":"1234AK", "Plaats":"Hindelopen", "telefoon":"0345-1245677"},' + 
'{"naam":"Marlies de hoop", "Plaats":"Maaswijk 23", "postcode":"1234AK", "Plaats":"Hindelopen", "telefoon":"0345-1245677"} ]}'; 
// Load JSON 
obj = JSON.parse(text); 


var longtext = ""; 
for (i = 0; i < obj.gebruikers.length; i++) { 
// add json to longtext 
    longtext += "<ul><li>" + obj.gebruikers[i].naam + "</li><li> " + obj.gebruikers[i].Plaats + "</li>" + obj.gebruikers[i].postcode + "</li><li>" + obj.gebruikers[i].Plaats + "</li><li>" + obj.gebruikers[i].telefoon + "</li></ul>" ; 
} 

function myChange() { 
// load names 
var selector = document.getElementById('namen'); 
var value = selector[selector.selectedIndex].value; 
// Load places 
var plaatsen = document.getElementById('plaatsen'); 
var plaatsen = plaatsen[plaatsen.selectedIndex].value; 


    for (var i=0; i<text.length; i++) { 
    if (longtext[i].naam == value) { 
     longtext[i].Plaats = plaatsen; 
     break; 
    } 
    } 
} 

document.getElementById("demo").innerHTML = longtext; 


</script> 

<select name="plaatsen"> 
    <option value="Amersfoort">Amersfoort</option> 
    <option value="Utrecht">Utrecht</option> 
    <option value="Amsterdam">Amsterdam</option> 
</select> 
<select name="namen"> 
    <option value="Johan de vries">Johan de vries</option> 
    <option value="Jan de hoop">Jan de hoop</option> 
    <option value="Marlies de hoop">Marlies de hoop</option> 
</select> 

<input type="submit" onclick="myChange()"> 

</body> 
</html>

Quelle

2017-03-10 Anonymous

Update, um die 'Standort' im Textobjekt, und gib einfach den HTML-Code um. – Shilly

Sie müssen die obj ändern und zeigt die Liste wieder

var text = '{ "gebruikers" : [' + 
 
    '{"naam":"Johan de vries", "Plaats":"Otterlokade 56", "postcode":"6743FG", "Plaats":"Dinxperloo", "telefoon":"0495-1234567"},' + 
 
    '{"naam":"Jan de hoop", "Plaats":"Maaswijk 23", "postcode":"1234AK", "Plaats":"Hindelopen", "telefoon":"0345-1245677"},' + 
 
    '{"naam":"Marlies de hoop", "Plaats":"Maaswijk 23", "postcode":"1234AK", "Plaats":"Hindelopen", "telefoon":"0345-1245677"} ]}'; 
 
var obj = JSON.parse(text); 
 

 
var demo = document.getElementById("demo"); 
 
var places = document.getElementById("plaatsen"); 
 
var names = document.getElementById("namen"); 
 

 
display(); 
 

 
function display() { 
 
    var longtext = ""; 
 
    for (i = 0; i < obj.gebruikers.length; i++) { 
 
    longtext += "<ul><li>" + obj.gebruikers[i].naam + "</li>" + 
 
     "<li> " + obj.gebruikers[i].Plaats + "</li>" + 
 
     "<li>" + obj.gebruikers[i].postcode + "</li>" + 
 
     "<li>" + obj.gebruikers[i].telefoon + "</li></ul>"; 
 
    } 
 
    demo.innerHTML = longtext; 
 
} 
 

 

 
function myChange() { 
 
    let plaats = places.value; 
 
    let name = names.value; 
 

 
    var toChange = obj.gebruikers.find(o => o.naam === name); 
 
    toChange.Plaats = plaats; 
 
    
 
    display(); 
 
}

<body> 
 
    <p id="demo"></p> 
 

 
    <select name="plaatsen" id="plaatsen"> 
 
    <option value="Amersfoort">Amersfoort</option> 
 
    <option value="Utrecht">Utrecht</option> 
 
    <option value="Amsterdam">Amsterdam</option> 
 
</select> 
 
    <select name="namen" id="namen"> 
 
    <option value="Johan de vries">Johan de vries</option> 
 
    <option value="Jan de hoop">Jan de hoop</option> 
 
    <option value="Marlies de hoop">Marlies de hoop</option> 
 
</select> 
 

 
    <input type="submit" onclick="myChange()"> 
 

 
</body>

Quelle

2017-03-10 12:30:05 Weedoze

Stuck mit JSON Update

Antwort

Verwandte Themen