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

What is causing the components to not re-render after a state change in React?

Eliminate the use of backslashes in JSON responses when using the WordPress REST API

Video player on website experiencing issues with playing VAST ads

Having trouble getting my HTML file and CSS styles to render properly in Chrome

What is the best way to halt a JavaScript function originating from embedded iframe content?

Creating a dictionary or JSON object in Python from a string containing duplicate keys

Error: Trying to set a value to an undefined object in the bind() method

To complete Mocha tests, ensure to use the done() method. However, keep in mind that the resolution method is too specific. Choose either to specify a callback or return a Promise, but not both simultaneously

Step-by-step guide on dynamically adding "Input Tags" to the DOM at runtime using Selenium's JavascriptExecutor

Update a DIV when ajax call is successful

Automatic Full-Screen Switching Upon Video Playback in HTML5

Using ui-grid to show cells as drop-down menus

Using React JS to automatically execute an event based on a specific state value

Please refrain from submitting the form until the slow AJAX jQuery process has finished

Executing Firebase Cloud Functions to perform write operations within a database event function

Auth0 Angular - No routes found to match

Changing the 'checked' attribute does not have any impact on how it appears in the browser

Having trouble loading JSON in Python line by line?

Is there a way for me to identify the value within useCallback without any intermediaries?

Encountering an error while setting up the object spread operator Babel plugin for ES201

Caught in the midst of a JSON update conundrum

Answer №1

Similar questions

What is causing the components to not re-render after a state change in React?

Eliminate the use of backslashes in JSON responses when using the WordPress REST API

Video player on website experiencing issues with playing VAST ads

Having trouble getting my HTML file and CSS styles to render properly in Chrome

What is the best way to halt a JavaScript function originating from embedded iframe content?

Creating a dictionary or JSON object in Python from a string containing duplicate keys

Error: Trying to set a value to an undefined object in the bind() method

To complete Mocha tests, ensure to use the done() method. However, keep in mind that the resolution method is too specific. Choose either to specify a callback *or* return a Promise, but not both simultaneously

Step-by-step guide on dynamically adding "Input Tags" to the DOM at runtime using Selenium's JavascriptExecutor

Update a DIV when ajax call is successful

Automatic Full-Screen Switching Upon Video Playback in HTML5

Using ui-grid to show cells as drop-down menus

Using React JS to automatically execute an event based on a specific state value

Please refrain from submitting the form until the slow AJAX jQuery process has finished

Executing Firebase Cloud Functions to perform write operations within a database event function

Auth0 Angular - No routes found to match

Changing the 'checked' attribute does not have any impact on how it appears in the browser

Having trouble loading JSON in Python line by line?

Is there a way for me to identify the value within useCallback without any intermediaries?

Encountering an error while setting up the object spread operator Babel plugin for ES201

To complete Mocha tests, ensure to use the done() method. However, keep in mind that the resolution method is too specific. Choose either to specify a callback or return a Promise, but not both simultaneously