Concern with Json Data Structure

How can I display data in the following layout:

the datas that published
today:
data1,
data2,
the datas that published
yesterday:
data1,
data2

If I receive the data in JSON format, what should the JSON structure look like to achieve this format?

The HTML structure is:

    <div class="list dark">

        <div class="item item-divider">
          today
        </div>

          <a class="item item-avatar-left" href="#">
          <img src="image">
          <h2>Tyrant</h2>
          <p>desc</p>
          </a>

          <a class="item item-avatar-left" href="#">
          <img src="image">
          <h2>Tyrant</h2>
          <p>desc</p>
          </a>
        <div class="item item-divider">
          yesterday
        </div>
          <a class="item item-avatar-left" href="#">
          <img src="image">
          <h2>data</h2>
          <p>desc</p>
          </a>
    </div>
javascriptjsondata-structures

Answer №1

One of the reasons why JSON is so versatile is because you have the freedom to structure it in a way that perfectly aligns with your specific requirements. (Unless, of course, you're working with an API that is beyond your control).

Are you planning on showcasing only the data from yesterday and today? If that's the case, you may consider the following structure:

{
    "today" : {
        "image" : "url",
        "data" : "your information",
        "desc" : "description"
    },
    "yesterday" : {
        "image" : "url",
        "data" : "your information",
        "desc" : "description"
    }
}

However, if you anticipate the need to display information from multiple dates, you might opt for a structure like this:

{
    "dates": [
        {
            "date" : "2015-06-18",
            "image" : "url",
            "data" : "your information",
            "desc" : "description"
        },
        {
            "date" : "2015-06-17",
            "image" : "url",
            "data" : "your information",
            "desc" : "description"
        }
    ]
}

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

You can interact with our dropdown menu using the tab key, even when it is

We are looking to make our dropdown tabbable when expanded and non-tabbable when collapsed. We attempted using tabindex="-1" on the content inside the expandable div, but this resulted in it being non-tabbable even when expanded. Any suggestions on how t ...

javascripthtmlcssfrontend

What is the method to retrieve just plain text (String) from an Ajax URL response?

I'm still learning how to use Ajax. My current project involves populating a dropdown based on the selected value from another dropdown in HTML. The issue I'm facing is that, while I am able to get the desired output, it includes unwanted HTML fo ...

javascriptajaxjsp

After upgrading to version 4.0.0 of typescript-eslint/parser, why is eslint having trouble recognizing JSX or certain react @types as undefined?"

In a large project built with ReactJs, the eslint rules are based on this specific eslint configuration: const DONT_WARN_CI = process.env.NODE_ENV === 'production' ? 0 : 1 module.exports = { ... After upgrading the library "@typescript-es ...

javascriptreactjstypescripteslintrules

The subscription for the second Observable in RxJS concatMap is triggered individually

I am currently developing an Angular 6 application. I want the app to display a loading animation whenever there is a change in the route or if there are any pending HTTP requests. To achieve this, I have set up two Observables as follows: For httpPendingR ...

javascriptangulartypescriptrxjs

Ways to invoke a function within a React Material-UI component

Currently, I am in the process of setting up a chat system that allows users to add emojis. To achieve this feature, I have devised a function that produces a component containing both text and an image. Here is the function I have implemented: test: fu ...

javascriptreactjsmaterial-ui

A guide on storing multiple values in a JSON format using Java

Currently, I am working on fetching a list of values from the JDBC database with multiple columns. To tackle this issue, I decided to create a JSON object structured like the example below: { "Results 1": { "IP": "192.1 ...

javajsonlistspring-boot

Expo is having trouble locating the module "color-convert" - such a frustrating problem

Having an issue! I ran the command npm start in my terminal and received the following error: Starting project at /home/pc/Documents/Projects/Mobile/weather_app Developer tools running on http://localhost:19002 Cannot find module 'color-convert' ...

javascriptnode.jsreact-nativenpmexpo

What is the process for updating the h1 header with text entered into an input field?

I'm working on an assignment that requires me to change the h1 heading to reflect whatever is entered into the input field. To accomplish this, I need to create a function using getElementByID. Here's what I've done so far: <!DOCTYPE htm ...

javascripthtmlinputgetelementbyid

Guide on Wrapping a File and Piping it to a New File within the Same Directory using Gulp

I'm in the process of developing a Gulp build system that has the following requirements: Extract HTML files from each directory Enclose the HTML files with additional HTML markup Generate a new file named wrapped.html Place the new file back into t ...

javascriptnode.jsnpmgulp

What could be causing the decrease in profits from this particular Javascript function?

In my Bootstrap4 project, I have implemented a multi-select feature alongside a separate div that displays the currently selected options as a series of badges. This is particularly useful on mobile devices where the select element may not provide a clear ...

javascripthtmlbootstrap-4

Converting JSON data into Dart format

As a newcomer to Flutter, I am seeking guidance on how to display the values of productA and 220 in the console. Below is a JSON file along with a Dart file. { "status": true, "message": "Data returned successfull", &quo ...

jsonflutterdart

Using AJAX to load a PHP file in CodeIgniter is a great way to

I'm a beginner in the world of web development and I need help with loading my PHP file containing HTML content to update the span element. My framework of choice is CodeIgniter. Every time I try, I encounter an error. Below is my JavaScript code: ...

javascriptphpjqueryajaxcodeigniter

Transferring attributes from parents to children

For some time now, I have been attempting to develop a Vue.js-based "customizable form template". The approach I envisioned involves: Developing a "custom-form" component that accepts a vueForm prop and displays a form. The vueForm prop is structured as ...

javascriptvue.jsvue-component

What is the correct way to implement fetch in a React/Redux/TS application?

Currently, I am developing an application using React, Redux, and TypeScript. I have encountered an issue with Promises and TypeScript. Can you assist me in type-defining functions/Promises? An API call returns a list of post IDs like [1, 2, ..., 1000]. I ...

javascriptreactjstypescript

Working with Javascript objects and arrays

Need assistance with manipulating/updating a JavaScript array. Hoping for some help. The initial array looks like this: array('saved_designs'=array()); In Javascript JSON format: {"saved_design":{}} I plan on adding a label and its associa ...

javascriptarraysjavascript-objects

The process of enabling NPM packages for use with ES6 and ECMAScript

Currently, I am working on developing an NPM package using TypeScript. My main concern is how to ensure that this package can be made available for both ES and Node modules. To achieve this, I have configured Rollup along with a few settings: rollup.conf ...

javascriptnode.jsnpmpackage.json

Every time a button is clicked on the interface, a new element or button will appear. This functionality is made possible through

Currently diving into a new React.js project as a beginner. I have a little challenge in the code snippet below - looking to add a button that displays "Hello World" every time it's clicked using setState. Can anyone guide me on enhancing the DisplayM ...

javascriptreactjs

Generate a sequence of years without relying on the range function

Is there a different approach to generating this array without relying on the range function? Below is an illustration of what I want, but without utilizing the range method. const years = myCustomArrayGeneration(1990, getYear(new Date()) + 1, 1); ...

javascriptarraysreactjs

What is the process of editing a webpage to affect the display on a different webpage?

I am currently working on creating two webpages. One will serve as a customization page where users can upload images and input text, which will then be displayed on another page. I am wondering if it is possible to achieve this functionality using CSS and ...

javascripthtmlcss

Converting a CSV file to JSON in a Keyed Format: A Step-by-Step Guide

Presently, I am generating a JSON file using the following code snippet: import pandas as pd my_csv = pd.DataFrame(pd.read_csv("output.csv", sep = ",", header = 0, index_col = False, encoding='utf-8-sig')) json_file = my_csv.t ...

pythonjsoncsvkey