Display JSON information in a table within a dropdown menu

Question

Display JSON information in a table within a dropdown menu

I have a JSON dataset where each key is represented as a column in a table. I am looking to populate each column with data from the JSON as select boxes. For example, I want to display all "country" values from the JSON as select options in the COUNTRY column.

Sample JSON data

"book": [
  {
    "author": "Chinua Achebe",
    "country": "Nigeria",
    "imageLink": "images/things-fall-apart.jpg",
    "language": "English",
    "link": "https://en.wikipedia.org/wiki/Things_Fall_Apart\n",
    "pages": 209,
    "title": "Things Fall Apart",
    "year": 1958
  },
  {
    "author": "Hans Christian Andersen",
    "country": "Denmark",
    "imageLink": "images/fairy-tales.jpg",
    "language": "Danish",
    "link": "https://en.wikipedia.org/wiki/Fairy_Tales_Told_for_Children._First_Collection.\n",
    "pages": 784,
    "title": "Fairy tales",
    "year": 1836
  },

Javascript Code

let table2 = document.getElementById("tr2")

var books = fetch("book.json")
.then(res=> res.json())
.then(data => {for(let key in data ) {
    for(value of data[key]) {

        select.innerHTML+= `
         <td><option value="${value.author}">${value.author}</option></td>
          <td><option value="${value.country}">${value.country}</option></td>
        `
    }
}})

How can I make modifications to this setup?

javascript json html-table drop-down-menu

Answer 1

Answer №1

Is this what you had in mind? First, looping through the keys and then through each item for every key. Finally, aggregating into an array and creating a <select> element using a simple utility function.

var obj = {"book":[{"author":"Chinua Achebe","country":"Nigeria","imageLink":"images\/things-fall-apart.jpg","language":"English","link":"https:\/\/en.wikipedia.org\/wiki\/Things_Fall_Apart\n","pages":209,"title":"Things Fall Apart","year":1958},{"author":"Hans Christian Andersen","country":"Denmark","imageLink":"images\/fairy-tales.jpg","language":"Danish","link":"https:\/\/en.wikipedia.org\/wiki\/Fairy_Tales_Told_for_Children._First_Collection.\n","pages":784,"title":"Fairy tales","year":1836}]}


function createSelect(select, options, name) {
  select.innerHTML = '<option>Choose ' + name + '</options>';
  options.forEach(function(value) {
    var option = document.createElement("option");
    option.setAttribute("value", value);
    option.innerText = value;
    select.appendChild(option)
  })
}

createBookSelects(obj)

function createBookSelects(obj) {

  var books = obj.book;
  var keys = Object.keys(obj.book[0]);
  var result = {}
  keys.forEach(function(key) {
    obj.book.forEach(function(item) {
      result[key] = result[key] || []
      result[key].push(item[key])
    })

    var selectCategory = document.createElement("SELECT");
    selectCategory.setAttribute("id", "category");
    document.body.appendChild(selectCategory);
    createSelect(selectCategory, result[key], key)
  })
}

Answer 2

Is this what you had in mind? First, looping through the keys and then through each item for every key. Finally, aggregating into an array and creating a <select> element using a simple utility function.

var obj = {"book":[{"author":"Chinua Achebe","country":"Nigeria","imageLink":"images\/things-fall-apart.jpg","language":"English","link":"https:\/\/en.wikipedia.org\/wiki\/Things_Fall_Apart\n","pages":209,"title":"Things Fall Apart","year":1958},{"author":"Hans Christian Andersen","country":"Denmark","imageLink":"images\/fairy-tales.jpg","language":"Danish","link":"https:\/\/en.wikipedia.org\/wiki\/Fairy_Tales_Told_for_Children._First_Collection.\n","pages":784,"title":"Fairy tales","year":1836}]}


function createSelect(select, options, name) {
  select.innerHTML = '<option>Choose ' + name + '</options>';
  options.forEach(function(value) {
    var option = document.createElement("option");
    option.setAttribute("value", value);
    option.innerText = value;
    select.appendChild(option)
  })
}

createBookSelects(obj)

function createBookSelects(obj) {

  var books = obj.book;
  var keys = Object.keys(obj.book[0]);
  var result = {}
  keys.forEach(function(key) {
    obj.book.forEach(function(item) {
      result[key] = result[key] || []
      result[key].push(item[key])
    })

    var selectCategory = document.createElement("SELECT");
    selectCategory.setAttribute("id", "category");
    document.body.appendChild(selectCategory);
    createSelect(selectCategory, result[key], key)
  })
}

Display JSON information in a table within a dropdown menu

Answer №1

Similar questions

Incorporate href along with ng-click for improved functionality

Guide to saving an http response as a file and automatically retrying on a 503 error

When using Thunderbird Webextensions, calling .messages.getFull() may result in the Exception 0x80004005 being raised, specifically indicating

Oops! Looks like Handlebars.js is telling us that a Helper is missing

Converting an array of objects into an array of Objects containing both individual objects and arrays

Using ReactJS to create different behavior for checkboxes and rows in tables with Material-UI

Struct object not found within nested array during JSON unmarshaling

What steps can be taken to design a unique CSS pop-up that triggers upon page load, limited to one appearance per visitor every week

Looking for a JSON file in bash?

Retrieve information from a MongoDB document based on the specific month

AngularJS fails to display JSON data

Pressing the switch will not alter its state the initial time, except if it is already selected

Ensuring User Information Persistence in React Upon Successful Login

In the context of Express, how are "static" and "non-static" defined?

Can data sent to php via ajax be manipulated?

The issue with VueEditor in Nuxt.js is that it's throwing an error

Utilizing window.prototype methods in JavaScript for Angular development

Capturing screenshots with Selenium in Node.js is proving to be quite sluggish

Accessing component variables within an event in Angular 2 (dealing with scope problems)

I am encountering an issue with my curl HTTP POST request where it is fetching a PDF file, but the