Caught in the midst of a JSON update conundrum

Question

Caught in the midst of a JSON update conundrum

I need some help with my JavaScript/JSON coding. I have a script that loads JSON data and displays it on an HTML page. Now, I want to know how I can update this data. Specifically, I want the script to update the location of the person when a button is clicked.

Plaats = place postcode = 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>

javascript json

Answer 1

Answer №1

To update the object and show the list again.

var data = '{ "users" : [' +
  '{"name":"John Smith", "Address":"123 Main St", "zipcode":"90210", "City":"Beverly Hills", "phone":"555-1234567"},' +
  '{"name":"Jane Doe", "Address":"456 Elm St", "zipcode":"54321", "City":"Springfield", "phone":"444-9876543"},' +
  '{"name":"Alice Johnson", "Address":"789 Oak St", "zipcode":"67890", "City":"Oakland", "phone":"333-5678912"} ]}';
var object = JSON.parse(data);

var displayBox = document.getElementById("displayBox");
var cities = document.getElementById("cities");
var names = document.getElementById("names");

showInfo();

function showInfo() {
  var output = "";
  for (i = 0; i < object.users.length; i++) {
    output += "<ul><li>" + object.users[i].name + "</li>" +
      "<li> " + object.users[i].Address + "</li>" +
      "<li>" + object.users[i].zipcode + "</li>" +
      "<li>" + object.users[i].phone + "</li></ul>";
  }
  displayBox.innerHTML = output;
}

function makeChanges() {
  let city = cities.value;
  let person = names.value;

  var toUpdate = object.users.find(o => o.name === person);
  toUpdate.City = city;
  
  showInfo();
}

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

  <select name="cities" id="cities">
    <option value="New York City">New York City</option>
    <option value="Los Angeles">Los Angeles</option>
    <option value="Chicago">Chicago</option>
  </select>
  
  <select name="names" id="names">
    <option value="John Smith">John Smith</option>
    <option value="Jane Doe">Jane Doe</option>
    <option value="Alice Johnson">Alice Johnson</option>
  </select>

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

</body>

Answer 2

To update the object and show the list again.

var data = '{ "users" : [' +
  '{"name":"John Smith", "Address":"123 Main St", "zipcode":"90210", "City":"Beverly Hills", "phone":"555-1234567"},' +
  '{"name":"Jane Doe", "Address":"456 Elm St", "zipcode":"54321", "City":"Springfield", "phone":"444-9876543"},' +
  '{"name":"Alice Johnson", "Address":"789 Oak St", "zipcode":"67890", "City":"Oakland", "phone":"333-5678912"} ]}';
var object = JSON.parse(data);

var displayBox = document.getElementById("displayBox");
var cities = document.getElementById("cities");
var names = document.getElementById("names");

showInfo();

function showInfo() {
  var output = "";
  for (i = 0; i < object.users.length; i++) {
    output += "<ul><li>" + object.users[i].name + "</li>" +
      "<li> " + object.users[i].Address + "</li>" +
      "<li>" + object.users[i].zipcode + "</li>" +
      "<li>" + object.users[i].phone + "</li></ul>";
  }
  displayBox.innerHTML = output;
}

function makeChanges() {
  let city = cities.value;
  let person = names.value;

  var toUpdate = object.users.find(o => o.name === person);
  toUpdate.City = city;
  
  showInfo();
}

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

  <select name="cities" id="cities">
    <option value="New York City">New York City</option>
    <option value="Los Angeles">Los Angeles</option>
    <option value="Chicago">Chicago</option>
  </select>
  
  <select name="names" id="names">
    <option value="John Smith">John Smith</option>
    <option value="Jane Doe">Jane Doe</option>
    <option value="Alice Johnson">Alice Johnson</option>
  </select>

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

</body>

Caught in the midst of a JSON update conundrum

Answer №1

Similar questions

Ajax sending numerous requests to the API

Disregarding issues encountered while parsing a particular property with an unresolved type during deserialization

Using XSL variables in JavaScript code

Challenges faced with Vuetify's vertical and non-linear stepper components

Permit the use of backslashes in the API JSON

Modifying the text within the label of a multibarchart in nvd3.js

The URL for the Javascript chunk includes colons at https://example.com/js/chunk-vendors.b3792e11.js:18:16400

React Checkbox malfunctioning: Troubleshooting and solutions

Different ways to modify the color of a chart using am4chart

Guide to Displaying JSON Objects and Arrays in an Android ListView

How can you extract a specific object from a JSON string?

Is it possible to format JSON data so that it can be easily read by a Google spider?

Over-extended Affix in Bootstrap 3.1.0

Updating the $location variable from the $rootScope perspective

Gaining entry to specialized assistance through an occasion

Anticipated the start of an object but instead found a number

What is the best way to correctly render several React components using a single index.js file?

The structure of NodeJS Express API calls revolves around handling asynchronous events

Activation of states in response to item clicks

The listener for @ok is not being activated when using jest-test-utils with b-modal in vue-bootstrap