› ›

How do I display this data as text?

wcfcarolina13wcfcarolina13
edited July 2018 in p5.js Programming Questions

This is a ground-zero type of question but I'm stumped. I am experimenting with how to use data while using p5.js. I chose a random JSON file containing different fictional religions and am attempting to display that in a window. So far I've only got errors, blank screens, and individual bits of information to show. I've tried to create an array with this data but it hasn't worked out. I'm very new, excuse my inability to speak in programmer language here. Thanks so much for looking it over.

Here's the code:

var data;

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

function setup() {
  noCanvas();

  var flower = data.religion;


     for( i = 0; i < flower.length; i++) {
        createElement('h1', flower[i].religion)
}


}

My JSON file (flower.json) looks like this (I'm only giving a sample because it's huge, 255+ entries):

{
  "religion": [
{ 
    "Arceusism": "worshippers of Arceus, the creator of all Pokémon. See also Giratinism",
    "The Babarambaba Cult": "worshippers of Mother Nature, personified in a head of lettuce named Ralph — \"Rerun Sees the Light\" episode of What's Happening!!",
    "Bajoran religion": "Star Trek: Deep Space Nine",
    "Bandosianism": "RuneScape's war religion",
    "Banjoism": "Elan's religion in The Order of the Stick",
    "Beism": "Giles Goat-Boy, John Barth",
    "Beliar": "Gothic (video game), god of darkness, death and chaos and lord of lightning and earth.",
    "Bene Gesserit": "Dune series"
} ]
}
Tagged:

Best Answer

Answers

  • wcfcarolina13wcfcarolina13

    Oh dear, what happened to my formatting? Apologies.

  • koogskoogs
    edited May 2017 Answer ✓

    Edit post, highlight text, hit ctrl-o.

    Can do the same for the data too

  • wcfcarolina13wcfcarolina13

    My gosh, that answered one question but not the entire thing! Yeah, I'm new.

  • GoToLoopGoToLoop

    http://Bl.ocks.org/GoSubRoutine/9aa9cd00000e331612c8e557b5dd28f0

    /**
 * JSON Religions (v1.0)
 * GoToLoop (2017-May-05)
 *
 * https://forum.Processing.org/two/discussion/22401/
 * how-do-i-display-this-data-as-text#Item_4
 *
 * http://Bl.ocks.org/GoSubRoutine/9aa9cd00000e331612c8e557b5dd28f0
 */

"use strict";

const FILENAME = 'flower.json';
let religions;

function preload() {
  loadJSON(FILENAME, ({religion: [obj]}) => religions = obj);
}

function setup() {
  noCanvas(), noLoop();
  console.table(religions);

  for (const key in religions) {
    const religion = `<u>${key}</u>: `.bold().big(),
          description = religions[key].italics();

    createP(religion + description);
  }
}
  • GoToLoopGoToLoop
    edited May 2017
    • The functioning sketch I've posted above is my own attempt. :\">
    • For yours, my guess is that var flower = data.religion; is lacking something. :-?
    • The data.religion assigned to variable flower is still of datatype Array. :-B
    • And it's got 1 element in it: an Object w/ all the content you wanna get. $-)
    • My proposal then: const flower = data.religion[0]; L-)
    • Now flower is of datatype Object instead of Array. *-:)
    • And in order to extract all of its "key: value" pairs, take a look at my own code on how I've iterated over religions{} via a for ( in ) {} loop. :-bd

    https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

  • wcfcarolina13wcfcarolina13

    I did get it to work on my own (first successful dive into Google to fix a program!) but I'm going to unpack your solution as well for confirmation. Thanks so much!

    What worked for me:

     var data;
 var names = [];

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

function setup() {
  noCanvas();
  for (x in data) {
  names.push(data[x]);
  createP(x + " : " + data[x]);
  }
  createP("Total: " + names.length)
}

    For the JSON file, I simply took out the "religion": [ { } ] part and left only the original text.

  • wcfcarolina13wcfcarolina13

    @GoToLoop: I tried using your exact code and nothing appears in the window. I'm using p5.js for this. Could it have to do with not important the correct library?

  • GoToLoopGoToLoop
    edited May 2017

    Visiting the online sketch at:
    http://Bl.ocks.org/GoSubRoutine/9aa9cd00000e331612c8e557b5dd28f0

    We can see the "index.html" used for kickstarting "sketch.js" there:

    <!DOCTYPE html>
<meta charset=UTF-8>
<script async src=http://CDN.JSDelivr.net/g/p5.js(p5.min.js+addons/p5.dom.js)></script>
<script defer src=sketch.js></script>

    In order to use createP(), we also need to import "p5.dom.js" after "p5.js": L-)
    https://p5js.org/reference/#/p5/createP

Sign In or Register to comment.