How do I assign my elements to a specific div

anolles

Hi,

Thanks for helping. Here is my code:

var data;

function preload() {
 data = loadJSON("json.json");  
}

function setup() {
  noCanvas();
  // var overdenking = data.Articles[1].Title;

  var overdenking = data.Articles;

  for (var i = 0; i < overdenking.length; i++){
    createElement('h1', overdenking[i].Title);
    createElement('p', overdenking[i].Date);
  }

 }

Right now, it just loads on the page, I assume on the body tag. I would like it to load in a div, the p5Container div, if possible. Do I do this with data.parent('p5Container');? If so, where should it be placed because I tried everywhere.

Thanks

GoToLoop

1. https://Forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

2. http://Bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e

3. https://Forum.Processing.org/two/discussion/22414/trouble-loading-json-data-from-a-url#Item_6

anolles

Thanks. I have read the articles but I haven't found the answer I am looking for, I am new to P5. Would you mind explaining?

anolles

Ah I got it.

createElement('h1', overdenking[i].Title).parent(p5Container);
createElement('p', overdenking[i].Date).parent(p5Container);

It works, but a little too well. My navigationbar dissapeared. Any ideas on how to get it back?

Thanks

GoToLoop

Some notes: L-)

1. You can replace createElement('p', '') w/ just createP(''): https://p5js.org/reference/#/p5/createP
2. B/c you're using noCanvas(), I don't think you've got any HTMLElement container to pass to parent().
3. You may create 1 w/ createDiv(): https://p5js.org/reference/#/p5/createDiv
4. Just like I did on "JSON Open-Notify ISS (v2.0)" from:
   https://Forum.Processing.org/two/discussion/22414/trouble-loading-json-data-from-a-url#Item_6

createDiv(''.fontcolor(COLOR).bold().big());
elem = select('font');
for (const crew of issCrewNames) createP(crew).parent(elem);

anolles

Thanks, I'll look into that. Just created a new post because this one said answered. Sorry.

GoToLoop

A more simplified mock example: O:-)

const div = createDiv('');
for (const crew of issCrewNames)  createP(crew).parent(div);

GoToLoop

Avoid creating new posts for the very same thing. :(|)
It diverts attention and splits answers everywhere! :-&
And btW, choose a more appropriate category for a question posting. (:|

anolles

But I do need the H1 and p tag within the div. I don't see how this fixes that.

anolles

Actually, what I need is this: < ul> < a href>< li>Title - Date< /li>< /a> < a href>< li>Title - Date< /li>< /a> < /ul>

Sorry, I couldn't get that into code mode. Basically a ul list with list items that contain the title and the date. My current list only makes h1 title tags and paragraph tags. Can you help me? This is my current code:

var data;

function preload() {
 data = loadJSON("http://www.dagelijkseoverdenkingen.nl/json/");  
}

function setup() {
  noCanvas();

  var overdenking = data.Articles;

  for (var i = 0; i < overdenking.length; i++){
    createElement('h1', overdenking[i].Title).parent(p5Container);
    createElement('p', overdenking[i].Date).parent(p5Container);
  }

}

GoToLoop

• That's just a general rule. Use your best judgement for each case! B-)
• Unfortunately, I'm still not very good w/ webpages. X_X
• Therefore, I dunno how to deal w/ long lists within a container. ~:>
• Nonetheless, you should host your sketch online so others can try it out more easily. :)>-
• OpenProcessing is a very good 1 btW: https://OpenProcessing.org/sketch/create :bz

anolles

Great idea, here is the sketch: https://openprocessing.org/sketch/442004

GoToLoop

You need to activate the slider for p5.dom library for your sketch there! 8-X

anolles

I did

GoToLoop

• Another glitch: B/c site http://DagelijkseOverdenkingen.nl/json/ doesn't have an https:// secure option, you can't use https://OpenProcessing.org to grab its JSON file! :o3
• You may instead try out https://Gist.GitHub.com.
• Then use https://Bl.ocks.org/-/about in order to run your sketch hosted from Gist.
• B/c it can alternatively use http:// in place of https:// to run our gists there! \m/

anolles

bl.ocks.org can't find the file, so that's not gonna work either https://gist.github.com/christiannolles/54ec11efd9ed891b8f3332ea410276e6 https://bl.ocks.org/christiannolles/54ec11efd9ed891b8f3332ea410276e6

GoToLoop

Of course, you're gonna need to provide an "index.html" there which loads both p5 & p5.dom, plus the "sketch.js" files. L-)

Use mine from: http://Bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e ;;)

<script defer src=http://CDN.JSDelivr.net/npm/p5></script>
<script defer src=http://CDN.JSDelivr.net/npm/p5/lib/addons/p5.dom.min.js></script>
<script defer src=sketch.js></script>

anolles

Thanks that worked. Stupid of me. Here it is: http://bl.ocks.org/christiannolles/6073d450ec899cb12dd7776162dea1bd and my index file is here: https://gist.github.com/christiannolles/6073d450ec899cb12dd7776162dea1bd

GoToLoop

• All files have to go into the same gist! #-o
• Both the "index.html" & "sketch.js". :-\"
• You may also need a ".block" file there as well.
• Give a look at my own gist: https://Gist.GitHub.com/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e
• For more details, head to: https://Bl.ocks.org/-/about

anolles

Sorry guys, have never done this before. Here is a new link: https://gist.github.com/christiannolles/4ec87aac4303e2c5fefed51b362529d3

and : http://bl.ocks.org/christiannolles/4ec87aac4303e2c5fefed51b362529d3

Strange thing is, I only see one title.

GoToLoop

If you hit F12 to open browser's console at your Bl.ocks.org gist, you're gonna see there: 3:-O
"Uncaught (in promise) ReferenceError: p5Container is not defined"

anolles

That is fixed now. I left .block blank because I didn't know what to put in. Does anyone know how to get me from this place to what I need? What I need is seen here: https://gist.github.com/christiannolles/f5a6c7a213ff3e2f0a4960cb0d643767

GoToLoop

As you may have noticed, my own Gist example uses elements <ol> & <li>:
http://Bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e

anolles

I don't get your example at all or how I should apply this to my code. I am new to this. Could you maybe make some direct suggestions as to how I should improve on what I have so far?

anolles

By the way, GoToLoop, I can't get the link working so I can't use it as an example... Do you know what's wrong?

http://bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e

GoToLoop

It works perfectly for me. Dunno why it wouldn't for ya: :-/

GoToLoop

• Weirdly, your sketch worked even when passing an undeclared variable to method parent(): 8-}
  createElement('h1', overdenking[i].Title).parent(p5Container);
• I can't spot where variable p5Container may've been declared anywhere within your sketch! @-)
• Well, it turns out it's a well hidden browser feature, in which each HTMLElement w/ an id (and sometimes name too) attribute, its id becomes an implicit global variable too: :ar!
  https://www.TJVantoll.com/2012/07/19/dom-element-references-as-global-variables/

anolles

I ran the code of GoToLoop on my own server and I get this error:

SyntaxError: invalid for/in left-hand side
for (const crew of issCrewNames)  createElement('li', crew).paren

The result is a blank page. Any ideas?

GoToLoop

For such error, you're probably using some old (about 1 year) Firefox-based browser.
Download a more updated 1 right way! :!!

anolles

Using chrome, it works.

GoToLoop

Still, you should update your Firefox browser. O:-)

GoToLoop

Just forked your gist sketch, re-modeling it after my "JSON Open-Notify" sketch: :D
http://Bl.ocks.org/GoSubRoutine/bef70ffdae5e1a052ade9c6b15f737cc

index.html:

<!DOCTYPE html>
<meta charset=UTF-8>
<script defer src=http://CDN.JSDelivr.net/npm/p5></script>
<script defer src=http://CDN.JSDelivr.net/npm/p5/lib/addons/p5.dom.min.js></script>
<script defer src=sketch.js></script>

sketch.js:

/**
 * JSON Religious Articles (v1.0.2)
 * Christian Nolles (2017-Jul-28)
 * GoToLoop (2017-Jul-30)
 *
 * https://Forum.Processing.org/two/discussion/23622/
 * how-do-i-assign-my-elements-to-a-specific-div#Item_31
 *
 * http://Bl.ocks.org/GoSubRoutine/bef70ffdae5e1a052ade9c6b15f737cc
 */

"use strict";

const HTTP = 'http' + '://',
      SITE = 'DagelijkseOverdenkingen.nl/json/',
      FILE = 'articles.json',
      REMOTE = true,
      PATH = REMOTE && HTTP + SITE || FILE,
      T_COL = 'blue', D_COL = 'darkmagenta', T_SIZE = 6,
      LIST = 'ul', ITEM = 'li', SPC = ' ';

let articles;

function preload() {
  loadJSON(PATH, jsonObj => console.table(articles = jsonObj.Articles));
}

function setup() {
  noCanvas();

  const list = createElement(LIST);

  for (const art of articles) {
    const title = art.Title.bold().fontsize(T_SIZE).fontcolor(T_COL),
          date = art.Date.italics().big().fontcolor(D_COL),
          td = title + SPC + date + SPC;

    createElement(ITEM, td).child(createImg(art.Image)).parent(list);
  }
}

GoToLoop

New version 2! Now w/ clickable thumbs which open their corresponding devotional article's link: \m/
http://Bl.ocks.org/GoSubRoutine/bef70ffdae5e1a052ade9c6b15f737cc

index.html:

<!DOCTYPE html>
<meta charset=UTF-8>
<script defer src=http://CDN.JSDelivr.net/npm/p5></script>
<script defer src=http://CDN.JSDelivr.net/npm/p5/lib/addons/p5.dom.min.js></script>
<script defer src=sketch.js></script>

sketch.js:

/**
 * JSON Religious Articles (v2.0.2)
 * Christian Nolles (2017-Jul-28)
 * GoToLoop (2017-Jul-30)
 *
 * https://Forum.Processing.org/two/discussion/23622/
 * how-do-i-assign-my-elements-to-a-specific-div#Item_32
 *
 * http://Bl.ocks.org/GoSubRoutine/bef70ffdae5e1a052ade9c6b15f737cc
 */

"use strict";

const HTTP = 'http' + '://',
      SITE = HTTP + 'DagelijkseOverdenkingen.nl/',
      JSON = 'json/',
      FILE = 'articles.json',
      REMOTE = true,
      PATH = REMOTE && SITE + JSON || FILE,
      T_COL = 'blue', D_COL = 'darkmagenta', T_SIZE = 6,
      LIST = 'ul', ITEM = 'li',
      SPC = ' ', BLANK = '_blank';

let articles;

function preload() {
  loadJSON(PATH, jsonObj => console.table(articles = jsonObj.Articles));
}

function setup() {
  noCanvas();

  const list = createElement(LIST);

  for (const art of articles) {
    const title = art.Title.bold().fontsize(T_SIZE).fontcolor(T_COL),
          date = art.Date.italics().big().fontcolor(D_COL),
          td = title + SPC + date + SPC,
          link = createA(SITE + art.Link, null, BLANK);

    createImg(art.Image).parent(link);
    createElement(ITEM, td).child(link).parent(list);
  }
}