Updating JSON object

[JimKueneman]

I am learning JS and have found (with enough searching) decent examples for everything else I have done. I am stuck on updating a JSON object with multiple objects. I generated it from Google Sheet and successfully read it in and found these:

  fetch('./carshows.json')        // Returns a Promise so call the Promise's function "then"
    .then((response) => {         // response is the object returned from fetch, so pass it into our anonymous function for the succeded callback (Then parameter) as an input parameter
        return response.json();   // passed in the repsonse as a parameter so use it to Convert it to JSON and return the Promise object it created
    })
    .then((data) => {             // data is the return from the previous "then" anonymous function which resolves into a JavaScript Object
 
    console.log(data)
    console.log(Object.keys(data))
    console.log(Object.values(data))
    console.log(Object.entries(data))

Which gives me this.....

So if I want to update Latitude and Longitude say under Flagstaff how would I do that? I have

results[i].geometry.location

from Google GeoCoder so location is a LatLng object.

Thanks
Jim

Thanks

 

[VBService]

So if I want to update Latitude and Longitude ... how would I do that? I have

After analyzing this sample code, it should be easy for you to come up with code which can do it.

[ on-line ]

<select>
  <option value="" selected>Select from list ...</option>
</select>
<div class="output"></div>

<style>
  select + .output {
    margin-top: 1rem;
    font: 400 .95rem/1.1 system-ui, monospace;
  }
  .output span:first-child {
    display: inline-block;
    font-weight: bold;
    width: 5.5rem;
    text-align: right;
    margin-right: .5rem;
  }
</style>

<script>
  // JSON data simulation
  const demoJSON = [
    {
      "Flagstaff, City Hall": {
        "Year": 2023,
        "Month": "August",
        "Date Start": 19,
        "Date End": 19,
        "Website": null,
        "Latitude": null,
        "Longitude": null
      }
    },
    {
      "Graham County Fairgrounds": {
        "Year": 2023,
        "Month": "August",
        "Date Start": 5,
        "Date End": 5,
        "Website": null,
        "Latitude": null,
        "Longitude": null
      }
    },
    {
      "Watson Lake, Prescott Az": {
        "Year": 2023,
        "Month": "August",
        "Date Start": 5,
        "Date End": 6,
        "Website": "paacaz.com",
        "Latitude": null,
        "Longitude": null
      }
    },
    {
      "Yavapi County Courthouse, Prescott Az": {
        "Year": 2023,
        "Month": "August",
        "Date Start": 19,
        "Date End": 19,
        "Website": null,
        "Latitude": null,
        "Longitude": null
      }
    }
  ];

  window.onload = () => {
    const select = document.querySelector('select'),
          output = document.querySelector('div.output');

    const options = document.createDocumentFragment();
    for (const index in demoJSON) {
      const option = document.createElement('OPTION');
      option.value = index;
      option.textContent = Object.keys(demoJSON[index]);
      options.appendChild(option);
    }
    select.appendChild(options);

    select.onchange = function() {
      const index = this.options[this.selectedIndex].value;
      output.innerHTML = '';

      if (index) {
        //console.log(demoJSON[index][Object.keys(demoJSON[index])]);       
        const rows = document.createDocumentFragment();
        for (const entrie of Object.entries(demoJSON[index][Object.keys(demoJSON[index])])) {
          const row = document.createElement('DIV');
          row.innerHTML = `<span>${entrie[0]}:</span>${((entrie[1]) ? entrie[1]:'')}`;
          rows.appendChild(row);
        }
        output.appendChild(rows);

        // example - retrieving data by entering the key name
        console.clear();
        console.log('Year', demoJSON[index][Object.keys(demoJSON[index])]['Year']);
        console.log('Month', demoJSON[index][Object.keys(demoJSON[index])]['Month']);
        console.log('Date Start', demoJSON[index][Object.keys(demoJSON[index])]['Date Start']);
        // ...
        console.log('Longitude', demoJSON[index][Object.keys(demoJSON[index])]['Longitude']);
      }   
    }

  }
</script>