converting JSON data into a multi-header table

Having trouble figuring out how to accomplish this task,

I have a JSON file containing a restaurant menu card, and I want to display this data in a table. However, the menu card has multiple headers (like 'starters', 'main course', 'whisky', ...) with only the name and price of each item listed.

Parsing the JSON is not an issue, but structuring it into a table is proving challenging.

This is a snippet from my JSON:

{
    "Drinks": [
        {
            "Beers vessel": [
                {
                    "Name": "Jupiler / 33cl / 50cl",
                    "Price": "2.00 / 2.60 / 4.00"
                },
                ...
            ],
            ...
        ],
        ...
    }
}

I am open to suggestions both in JavaScript and PHP.

Thank you!

javascriptjson

Answer №1

If you're looking for a simple solution, you might want to consider the following approach:

<?php
$json = file_get_contents('data.json');
$data = json_decode($json, true);
?>

<table cellspacing="0" cellpadding="10" style="border:1px solid #DDD" width="50%">
    <?php foreach($data as $cat_name => $category): ?>
    <tr style="background:#DDD"><td colspan="2"><?php echo $cat_name ?></td></tr>
        <?php foreach($category as $sub_category): ?>
            <?php foreach($sub_category as $entry_name => $entry): ?>
                <tr style="background:#EEE"><td style="padding-left:25px" colspan="2"><?php echo $entry_name ?></td></tr>
                <?php foreach($entry as $e): ?>
                    <tr>
                        <td style="padding-left:35px"><?php echo isset($e['Name']) ? $e['Name'] : '' ?></td>
                        <td style="padding-left:35px"><?php echo isset($e['Price']) ? $e['Price'] : '' ?></td>
                    </tr>
                <?php endforeach; ?>
            <?php endforeach; ?>
        <?php endforeach; ?>
    <?php endforeach; ?>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concatenating JavaScript Redirects

I am facing an issue with a page www.junk.com where users input an ID and hit submit. Upon submission, the following JavaScript code is triggered: var host = ""; var Go = { onReady: function() { $(document).on("click", ".event-submit", function(ev ...

javascriptphpjquery

What is the best way to run a RAW SQL query in ASP.NET MVC 5 (using EF 6) and then convert the results to JSON

I am trying to run a raw SQL query and convert the result into a JSON object. Here is the SQL query: select material, method, count(*) from treatment group by material, method To execute the raw query in Entity Framework 6, I am using Database.SQLQuery ...

sqljsonasp.net-mvcentity-framework-6

There seems to be an issue with Affix functionality in Bootstrap 4 (alpha version)

As detailed in the Bootstrap 3 documentation, I have included the following attributes in a navbar: <nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" > ... </nav> Unfortunately, when scrolling down the page with Boots ...

javascriptcsstwitter-bootstrapaffixbootstrap-4

Display popup when hovering over an li element, but only after one second of hovering over it

My goal is to display an inner div when hovering over an li element. I have implemented a fadeIn and fadeOut effect, but the issue is that if I quickly hover over all li elements, the fadeIn effect triggers for all of them. Ideally, the inner div should on ...

javascriptjqueryhtmlhover

Click and release file upload

I am working on creating a drag and drop upload feature where the user can drop files onto a div, and then click an upload button to send them to the server. I'm facing an issue with JavaScript not recognizing the variable fd. How can I pass that vari ...

javascriptjqueryajaxdrag-and-drop

JavaScript code that loads a copied mesh object using three.js

Currently using three.js version r59, encountering difficulties when attempting to duplicate a loaded model. The goal is to create multiple models through looping, with the plan to apply textures at a later stage. for (var i=0; i<5-1; i++){ va ...

javascriptthree.js

Counting the uploaded files with Multer

Currently, I am working on managing the file upload count using Multer. Below is a snippet of my function: export const upload = multer({ storage: storage, fileFilter: (req, file, callback) => Table.findOne({'user': req.user._id}) ...

javascriptnode.jsexpressmulter

Utilizing JSON data in Angular 4 to showcase its content on an HTML page

Below is a JSON object that I am working with: { "CandidateSchemaRows": [ { "Description": "sadasd", "Experience": 1, "type": "selectbox" }, { "Description": "erwerw", "Experience": 2, "type": "selectbox" ...

jsonangularangular5

Verify whether the headers in the CSV file correspond; if they do, proceed with parsing, otherwise halt

I am currently working on implementing validation for a specific .CSV format before proceeding with parsing using PapaParse. My plan is to first check the headers and verify if they match the following: Extension, company, name If the headers match, the ...

javascriptjquerycsvpapaparse

Implementing click events for each row in a table representing data (using JQuery)

Recently, I began my journey with javascript and decided to develop a new application that involves using a dynamic data table. The data for this table is generated dynamically through a set of information referred to as dataSet. However, I encountered an ...

javascriptjquerydatatables

generate a listing based on an HTTP query

Here is the code snippet from my controller : @RequestMapping("/allU") public List<Utilisateur> AllU() { return UtilisateurRepo.findAll(); } When I try to access this data in my AngularJS code like this : $scope.list=$http.ge ...

jsonangularjslist

Retrieving a boolean value from a function that includes an asynchronous AJAX request

In my calendar application, I am working with an array of dates: <div v-for="date in dates">{{ date }}</div> I want to apply a conditional class based on the outcome of an isWeekend() method that involves making an API call: <div v-for="d ...

javascriptvue.js

Is it necessary to exclude the 'scripts' folder from your Aurelia project's .gitignore file?

Should I exclude the 'scripts' directory that Aurelia is building to in my CLI project from Git by adding it to .gitignore, or is there a specific purpose for tracking changes to this directory? ...

javascriptgitaurelia

Dealing with substantial JSON data in Scala

I am facing a challenge with multiple files that contain arrays which need to be concatenated. The issue is that these files are numerous and quite large, with each one being around 5mb in size, leading to a total of over 100mb. My attempt using Pla ...

jsonscalaplayframeworkstack-overflow

Running multiple JavaScript servers simultaneously can be achieved by utilizing specific tools and

Currently, I am working on developing a Discord bot and have encountered some issues along the way that all required the same solution. The fix involved running separate batch files instead of running everything in my main file (index.js). I opted to use n ...

javascriptnode.jsbatch-filenpmnodemon

Which programming language should I utilize to create a webpage that dynamically updates its content from a database?

Seeking advice on a complex task I'm facing. I'm currently managing a vast spreadsheet (266 rows with 70 columns, and growing) which serves as a database. I want to transfer this data from Excel to an intranet page. Currently, I'm using a mi ...

javascriptasp.netsql

jQuery - Issue encountered when attempting to hide dropdown during change event

Hey there, I am trying to create a new dropdown menu that changes according to the selected values in another dropdown. Currently, I am able to display the dropdown menus based on selection, but I cannot figure out how to hide the other dropdowns when a di ...

javascriptjquery

How can recursion be implemented when the items are interdependent?

I am looking to create a function that can generate a list of individuals upon whom a specific person relies. The complexity here lies in the fact that these individuals may, in turn, rely on the original person. To illustrate: const people = { ' ...

javascriptnode.jsarraysrecursionreduce

The combination of HTML tables and div elements

I'm facing an issue where I have a table with fixed dimensions that needs to be centered on the page. To the right of the table, I want a div element that stretches from the table's right edge to the browser's left edge, but with the image i ...

javascripthtml-table

Session data in ExpressJS is not being stored in the cookie

There are plenty of questions on this topic, but unfortunately, I haven't found any answers that solve my issue. I'm using Chrome with ExpressJS and VueJs 3 to build a simple application where users can "login" and access another page. All I wan ...

javascriptnode.jsvue.jsexpress