Question

我的javascript / json有点困惑。我已经制作了一个脚本，如何加载json并将其放入html中。现在我的问题是，如何更新数据。我想编写脚本，当你试图按下按钮时，脚本会更新该人的居住地点。

Plaats =地方邮政编码=邮政编码

<!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>

Answer 1

您必须更改obj并再次显示列表

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>

坚持使用json更新

1 个答案: