'JavaScript adding an element to a div based on JSON

For context, currently working on an electron app that will help me learn Japanese.

I am wanting to add courses to a div based on a list of JSON objects but what I have tried so far isn't working. How would I achieve my goal?

My Code:

index.html

<!DOCTYPE html>
<html >
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" href="./master.css">
        <title>Nippon Ren</title>
    </head>
    <body>
        <div class="content">
            <h1 id="app-title">Nippon Ren</h1>

            <div class="section">
                <h2 class="section-title">Continue</h2>
                
                <div class="section-content" id="c" onload="loadCurrentCourses()">
                    <a href="./courses/add.html"><div id="courses-add">
                        
                    </div></a>
                </div>
            </div>

            <div class="section">
                <h2 class="section-title">Revision</h2>

                <div class="section-content revision-current">
                </div>
            </div>
        </div>

        <!-- Page JS -->
        <script src="./renderer.js"></script>
    </body>
</html>

renderer.js

const fs = require('fs/promises')

const COURSES_CURRENT = document.getElementById("courses-current")


let coursesCurrent
const getCurrentCourses = async () => {
    try {
        await fs.access("./data/current_courses.json")
    } catch {
        coursesCurrent = { courses: [] }
    }

    if (!coursesCurrent) {
        coursesCurrent = JSON.parse(await fs.readFile("./data/current_courses.json", "utf8"))
    }
}

const loadCurrentCourses = async () => {
    getCurrentCourses()
    for (i in coursesCurrent["courses"]) {
        let nextCourse = document.createElement("div")
        nextCourse.className = "card"
        document.getElementById("c").innerHTML += nextCourse
    }
}

data/current_courses.json

{
    "courses": [
        {
            "id": "0",
            "title": "Getting Started with Hirigana",
            "desc": "Intro"
        }
    ]
}

The other method for adding the courses is:

...
const loadCurrentCourses = async () => {
    getCurrentCourses()
    for (i in coursesCurrent["courses"]) {
        let nextCourse = document.createElement("div")
        nextCourse.className = "card"
        document.getElementById("c").appendChild(nextCourse)
    }
}
...
javascripthtmljsonaurora-evmrainbow-bridge


Solution 1:[1]

You are running JavaScript directly in the browser, but using require() is only possible when running the code using NodeJS. If you want to use require(), but run the code in a browser, try using Webpack.

Also, I don't see any element with id courses-current in your HTML.

Solution 2:[2]

You can use map function, something like this

const course = {
    "courses": [
        {
            "id": "0",
            "title": "Getting Started with Hirigana",
            "desc": "Intro"
        },
        {
            "id": "1",
            "title": "Getting Started with Hirigana",
            "desc": "Intro"
        }
    ]
}
course.courses.map((currentElement) => {
    console.log(currentElement); //append child here using the currentElement value
})

Solution 3:[3]

The problem is that the for loop didn't work and that I was using the createElement and appendChild wrong.

I have still not yet figured out how to loop through the array but creating the elements work now

Solution 4:[4]

Currently, only NEP-141 tokens can be sent from NEAR to Aurora and back so what you mentioned would be possible with wNEAR.

General asynchronous communication between NEAR and Aurora is being developed. Discussions are underway about adding native NEAR support inside of Aurora: https://github.com/aurora-is-near/rainbow-bridge/discussions/642.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vlad Mashkautsan
Solution 2 Uzzam Altaf
Solution 3
Solution 4 Masha

Related Questions