import { StatusBar } from 'expo-status-bar'; import React, {useState, useEffect} from 'react'; import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable} from 'react-native'; import DropDownPicker from 'react-native-dropdown-picker'; import { parse } from 'json2csv'; //import JSON; //import { Dataframe, readJSON } from "danfojs"; //where data will be put var organizedData //where data will be stored var information = "data goes here" //organize data make it pretty //add loading thing while this organizes all the data !!! function organize(){ var stringDiv = JSON.parse(information) var csv = parse(stringDiv) console.log(csv) //var csv is the variable with the thing you just pulled //put function and data cleaning here //just make sure you change the return value in 'getInfo()' //so it returns the actual organized table //or make getInfo() organize the table as well //and return that organized table //i leave this to you } //fix DropDownPicker.setListMode("SCROLLVIEW") //data query variables (global) const queryBase = "https://api.census.gov/data/2020/acs/acs5/profile?get=group" const queryEnd = "&in=state:72" var table = "" var pueblo = "" function updateTable(value){ table = value } function updatePueblo(value){ pueblo = value } //calls data query function loadDoc(query) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { information = this.responseText; organize() } }; xhttp.open("GET", query, true); xhttp.send(); } //"https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72" function fetchData() { console.log("fetching data") var query = queryBase + "(" + table + ")&for=county:" + pueblo + queryEnd if(pueblo && table) {loadDoc(query)} else {Alert.alert("Please fill every parameter before calling!")} } //change this to an external css file later const styles = StyleSheet.create({ buttons: { flexDirection: 'row', justifyContent: 'center', marginTop: 40, marginBottom: 30, margin: 30, borderColor: "grey", borderRadius: 8, padding: (30, 16), backgroundColor: "#008CBA", marginTop: 0 }, buttonContainer: { flexDirection: 'column', backgroundColor: 'black', alignItems: 'center', justifyContent: 'center', paddingTop:100, marginTop: 20, }, container: { flexDirection: 'column', justifyContent: 'center', backgroundColor: 'black', alignItems: 'center', justifyContent: 'center', paddingTop:20, marginTop: 20, }, containerbackground:{ backgroundColor: '#063970' }, intro: { fontWeight: "bold", color:"#beb2c8", fontSize: 30, }, sub: { color:"#beb2c8", fontWeight: "bold", fontSize: 15, paddingBottom:10, }, Navsub: { color:"#beb2c8", fontWeight: "bold", fontSize: 30, paddingBottom:10, }, scrollView:{ marginHorizontal: 20 }, listItem:{ fontSize: 30, color: "white", textDecorationLines: "underline" }, listButtons:{ fontSize: 15, color: "white", textDecorationLines: "underline" }, buttonsVer: { flexDirection: 'column', justifyContent: 'center', marginTop: 40, marginBottom: 30, margin: 30, borderColor: "grey", } }); //default button press const handlePress = () => false //data parsing goes here function getInfo(){ //console.log(information[6]) return information } //data display class DataButton extends React.Component{ state = { click: false } pullData = () => {fetchData(); this.setState({click: true})} render() { return(