Ask coding questions

← Back to all posts
List some values with JS, HTML from a lowdb json database
h
Retrospicer (10)

I want to have a lowdb Json database and in it I want to be able to get all the "urls" and list only the 'slug', the 'url', and the 'stats' for each and every single one like this (with JS,HTML)->

(Below is how it should be listed)

Slug: Example
Url: https://example.com
Stats: 37

Slug: Example1234
Url: https://example.net
Stats: 15

Slug: Exampleio
Url: https://example.io
Stats: 20
And this is how the database would look:
{
  "urls": [
    {
      "slug": "example",
      "url": "https://example.com",
      "token": "amazingdev1",
      "stats": 37
    },
    {
      "slug": "example1234",
      "url": "https://example.net",
      "token": "adsfrdmgsrf",
      "stats": 15
    },
    {
      "slug": "exampleio",
      "url": "https://example.io",
      "token": "07dfpwxukck57rv5",
      "stats": 20
    }
  ]
}
I am pretty new to all this stuff; how would you do it?

Thanks in advance!

EDIT:

I basically want to list all the items from the database (db.json - which is above) and modify the html document and put it there. My idea was to make cards with html and css and put the slug, url, and stats for each thing in the database. (e.g. So each {slug,url, and stats} would be an item, and it would automatically render each item when the page is loaded (so changes to the database can come into effect) and it would render each item with html and css cards. How would I do that? (No need for css though - i can do that) Thanks so much!

Answered by ch1ck3n (2052) [earned 5 cycles]
View Answer
Comments
hotnewtop
ch1ck3n (2052)

Can you add more context on what you want to do

Retrospicer (10)

@ch1ck3n I basically want to list all the items from the database (db.json - which is above) and modify the html document and put it there. My idea was to make cards with html and css and put the slug, url, and stats for each thing in the database. (e.g. So each {slug,url, and stats} would be an item, and it would automatically render each item when the page is loaded (so changes to the database can come into effect) and it would render each item with html and css cards. How would I do that? (No need for css though - i can do that) Thanks so much!

Retrospicer (10)

@ch1ck3n Oh that's where I am starting off right now so I'm using lowdb but in the future I'm open to other databases.

ch1ck3n (2052)

@TamoghnaK13 lowdb is for noobs try making your own json lib

Retrospicer (10)

@ch1ck3n That is about 70% what I want but in db.json (I can't set it to a variable) - I can't write db = {

Retrospicer (10)

@ch1ck3n After I get this to work maybe yeah I can

Retrospicer (10)

@ch1ck3n and @xxpertHacker Thanks! So to put it in a HTML Document would I use Document.getElementsByClassName() and how would I do that?

-> https://replit.com/@ch1ck3n/OutrageousGruesomeElements#index.js

ch1ck3n (2052)

@TamoghnaK13

const low = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')

const adapter = new FileSync('db.json')
const db = low(adapter)

// egang bababooey
res = ""
db.get('urls').__wrapped__.urls.forEach(function(item){
  res += ("Slug: " + item.slug +"\n");
  res += ("Url: " + item.url+"\n")
  res += ("Stats: " + item.stats+"\n")
  res += ("\n")
});
document.querySelector("body").innerHTML = res

ez

Retrospicer (10)

Thanks @ch1ck3n ! But could you put that all into one repl and put the link so I can mark the answer as correct? (Just for future reference, e.t.c.)

ch1ck3n (2052)

@TamoghnaK13 Sure but (sorry for asking a question when I'm supposed to answer it) can I have the CDN for FIleSync and lowdb?

Retrospicer (10)

@ch1ck3n @xxpertHacker
Isn't there any way I can send the data from index.js to index.html and display it there instead of console.log-ing the data in index.js?
(Maybe res.send, xmlhttpRequest e.t.c.)
(Using express and in node.js)

This is what @ch1ck3n created so far:
-> https://replit.com/@ch1ck3n/OutrageousGruesomeElements#index.js

Thanks so much!

ch1ck3n (2052)

@TamoghnaK13 if you tell people to upvote something they won't

ch1ck3n (2052)

@TamoghnaK13 but il updoot it anyways why not

Retrospicer (10)

@ch1ck3n Thx for the upvote but I have one final question: can I add styles to this (like css cards for each item) and if so, how can I do that?

Thanks!

Retrospicer (10)

@ch1ck3n Thanks again and have a great day!

xxpertHacker (930)

@TamoghnaK13 Yes, using Express callbacks or http callbacks, but I don't use Node.js, so I don't know the API.

Retrospicer (10)

@ch1ck3n I can show you the project that I am making this for when it is done(about 1 month) by replying to this post if you want!

xxpertHacker (930)

You didn't specify where you wanted the output to be, so I'll assume that you want to modify the HTML document, so for that you'll need to use the DOM, which is an abstract document object: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction.

I'll create a list of an HTML structure like the following:

<div>
  <p>Slug: json["slug"]</p>
  <p>URL: json["URL"]</p>
  <p>Stats: json["stats"]</p>
</div>
const { document } = globalThis;

// Helper function
function create_paragraph_with_text(text) {
    const paragraph = document.createElement('p');

    paragraph.textContent = text;

    return paragraph;
}

// Called for each iteration over the JSON "urls" array
function create_div_from_repl_data(
    repl_data,
    _index,
    _repl_array
) {
    const block = document.createElement("div");

    const p0 = create_paragraph_with_text(`Slug: ${repl_data.slug}`);

    const p1 = create_paragraph_with_text(`URL: ${repl_data.url}`);

    const p2 = create_paragraph_with_text(`Stats: ${repl_data.stats}`);

    block.append(p0, p1, p2);

    return block;
}

function write_repl_data_to_element(
    replit_data,
    output_element
) {
    const divs = replit_data.urls.map(
    create_div_from_repl_data
);

    // Finally, attach all <div>s to the {output_element}
 
   output_element.append(...divs);
}

I'd expect that you would call function with (..., document.body), the ... would be the JSON object.

Retrospicer (10)

@xxpertHacker Yes,I wanted to modify the HTML Document but I didn't set it inside a variable.(The file is db.json) How would I do it then? (I also edited the post above)

xxpertHacker (930)

@TamoghnaK13 Are you having a problem getting the response into the JS?

You can use fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API.

I think all you'll need would be the following:

(async () => {
    const response = await fetch("./db.json");

    const json = await response.json();

 
   write_repl_data_to_element(json, document.body);
})();
Retrospicer (10)

@xxpertHacker But I can't set it inside a variable in db.json ( db = { content, e.t.c here}

xxpertHacker (930)

@TamoghnaK13 I don't get what you're saying, can you link the Repl?

Retrospicer (10)

@xxpertHacker Never mind, ch1ck3n showed me how -> https://replit.com/@ch1ck3n/OutrageousGruesomeElements#index.js but I want to put it in a HTML Document so would I use Document.getElementsByClassName() and how would I do that?