Cześć, na wstępie napisze, że jestem bardzo początkujący.
Chcę do pliku .js wciągnąć zawartość z pliku data.json tak aby przemapować to sobie później na zwykła tablicę i obrabiać. Oba pliki są w tym samym katalogu.
Próbowałem różnych rzeczy z fetch, ale nic z tego nie wyszło.
Czy ktoś mógłby mi to napisać?
Uzywasz jakiegos frameworka, bibliotek?
Za Ciebie raczej nikt kodu pisac nie bedzie, ale pomoc na pewno ktos pomoze.
Wygooglaj sobie FetchAPI i przyklady jak tego uzyc, a jak bedziesz mial problemy, wstaw kod jaki masz i opisz problem, ktory napotkales.
shagrin napisał(a):
Uzywasz jakiegos frameworka, bibliotek?
Za Ciebie raczej nikt kodu pisac nie bedzie, ale pomoc na pewno ktos pomoze.Wygooglaj sobie FetchAPI i przyklady jak tego uzyc, a jak bedziesz mial problemy, wstaw kod jaki masz i opisz problem, ktory napotkales.
Widzisz, wyguglowałem sobie nawet i próbowałem użyć ale efekt jest taki sobie
``
var tablica= [];
var mydata = [];
fetch("data.json")
.then(response => response.json())
.then(json=> {
mydata = json;
tablica = mydata.map(mydata=> Object.values(mydata));
});
//const tablicaTablica = mydata.map(mydata => Object.values(mydata));
console.log (tablica);
console.log (mydata);
//var ReactTable = window.ReactTable.default;
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentWillMount() {
console.log('this is called before render!');
}
render() {
return (
W tej postaci console log pokazuje dwa puste elementy
W tej postaci ( różni się tym, że blok rozpoczęty przez this.state = { obejmuje praktycznie cały kod) widzę prawidłowe wartości ale z kolei komponent Mycomponent jest niewidoczny dla pliku HTML gdzie jest użyty (plik html na dole)
``
var tablica= [];
var mydata = [];
fetch("data.json")
.then(response => response.json())
.then(json=> {
mydata = json;
tablica = mydata.map(mydata=> Object.values(mydata));
//const tablicaTablica = mydata.map(mydata => Object.values(mydata));
//var ReactTable = window.ReactTable.default;
console.log (tablica);
console.log (mydata);
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
render() {
return (
<table>
<tbody>
{this.props.data.map((item, index) => {
return <tr key = {'tr'+item [index]}><td key={item[index]}>{item[index]} </td><td key={item[index]}>{item[index]}</td><td key={item[index]}>{item[index]}</td><td key={item[index]}>{item[index]}</td><td key={item}>{item[index]}</td><td key={item[index]}>{item[index]}</td></tr>;
})}
</tbody></table>
);
}
}
});`
plik html, tam są różne śmieci i pozostałości innych podejść, w powyższych też.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Pierwszy komponent w React.js</title>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone/babel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">
<script src="https://unpkg.com/react-table@latest/react-table.js"></script>
<script src="https://unpkg.com/react-table@latest/react-table.min.js"></script>
<!--<script type='text/babel' src='lista.js'></script>-->
<script type='text/babel' src='react.js'></script>
<!-- <script type='text/babel' src='tablica.js'></script>-->
</head>
<body>
<div id="app"></div>
<div id="apka"></div>
<div id='modal'></div>
<div id='apps'></div>
<div id='domowa' style= 'top: 20%';></div>
<script type="text/babel">
ReactDOM.render(<MyComponent data = {tablica} />, document.getElementById("apps"));
</script>
</body>
</html>
Wiesz, ja naprawdę nielubię obarczać ludzi moją robotą ( dla ścisłości - to nie jest robota, nie pisze tego dla pieniedzy). Ale ja naprawdę dopiero 1 stycznia wziąłem sie do IT, a zacząłem od HTML i CSS. I wiem, że powinieniem umieć obsługiwaś asynchro, ale jeszcze nie przerobiłem wszystkich zagadnień związanych z DOM (acz prawie wszystkie). Teraz na dokładkę zacząłem Reacta i oto gdzie jestem - pod ścianą w którą tłucze głową. Myślałem że zassanie pliku to coś banalnego, okazuje sie że nie, a teraz taka naprawdę dorabiam filtry do tabelki i naprawdę nie mogę się całkowicie poświęcić asynchro.
A na dodatek wygląda na to, że z rozpędu wleciałem na post Złotego Programisty i go nadpisałem, przepraszam
Moce to pomoze:
http://4dev.tech/2017/12/how-to-load-a-json-file-in-reactjs/
Dzieki, czyżby to było aż tak proste?
Wywaliłem prawi3e wszystko, żeby podejrzeć sam import
js po liftingu
/*jshint esversion: 6*/
import data from './data.json';
var tablica= [];
console.log (tablica);
console.log (data);
HTML po liftingu
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Pierwszy komponent w React.js</title>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone/babel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">
<script src="https://unpkg.com/react-table@latest/react-table.js"></script>
<script src="https://unpkg.com/react-table@latest/react-table.min.js"></script>
<!--<script type='text/babel' src='lista.js'></script>-->
<script type='text/babel' src='react.js'></script>
<!-- <script type='text/babel' src='tablica.js'></script>-->
</head>
<body>
<div id="app"></div>
<div id="apka"></div>
<div id='modal'></div>
<div id='apps'></div>
<script type="text/babel">
</script>
</body>
</html>
Wywala błąd :(
ReferenceError: require is not defined
Nope, nope, nope - nie baw się w Babela i Reacta, skoro dopiero zaczynasz swoją przygodę z JSem (zwłaszcza, że w tym przypadku nie ma w ogóle potrzeby dołączania tych bibliotek).
Przeczytaj to: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Ja właśnie zacząłem od fetch, patrz wyżej. Tyle, że nie widze sposobu, żeby dane były widoczne poza jego blokiem.
A jeżeli blok obejmuje cąły skrypt, wtedy na zewnątrz nie widze komponentu Reacta w pliku html. A musi być, to jest dość prosty komponent, takie jest założenie, że reacta minimalnie wykorzystam
Poczytaj zatem o tym, czym różni się w JSie kod synchroniczny od asynchronicznego, poczytaj o callbackach oraz promise'ach i porób parę przykładów - to pozwoli Ci zrozumieć, jak należy podejść do tego problemu :-)
Ja właśnie zacżąłem of fetch. Problem taki, że nie znalazłem sposobu aby cokolwiek co pochodzi z data.json było widoczne poza blokiem gdzie jest fetch. A jeżeli blokiem obejmę cały skrypt, to dokument html nie widzi komponentu Reacta. Musi być ten komponent, takie założenie.
Co do biblitek racja- nadodawałem trochena wyrost, część i tak już wyczysciłem
To na pewno ogólnie to dla mnie trudny temat, ale chciałbym go jakoś przejść
Kiszuriwalilibori napisał(a):
Ja właśnie zacząłem od fetch, patrz wyżej. Tyle, że nie widze sposobu, żeby dane były widoczne poza jego blokiem.
A jeżeli blok obejmuje cąły skrypt, wtedy na zewnątrz nie widze komponentu Reacta w pliku html. A musi być, to jest dość prosty komponent, takie jest założenie, że reacta minimalnie wykorzystam
Niestety musze go wykorzystać, choc staram sie jak najmniej, filtrowanie zawartości pewnie też zrobię na bazie display: hidden z CSS bo inaczej nie ogarnę
Kiszuriwalilibori napisał(a):
To na pewno ogólnie to dla mnie trudny temat, ale chciałbym go jakoś przejść
Dasz rade, to tylko na poczatku wyglada na skomplikowany temat. @Patryk27 ma racje, powinienes sobie zrobic male przyklady z uzyciem FetchAPI, zeby zrozumiec jak to dziala (Latwiej ogarnac najpierw jeden problem (fetch), pozniej kolejny (fetch i react).
Zrob sobie np prosta aplikacje JS, gdzie pobierzesz dane z pliku data.json i wyswietlisz liste
Akurat Reacta może nie, mam użyć dowolnego frameworka do renderowania tabelki. O Reakcie zacząłem czytać bez hmmm przymusu, jest prostszy niż Angular (chyba) Vue jeszcze niezbyt popularny, to zacząłem reacta. W sumie to co widzicie to kawałeczek, ogólnie jest to temat dot przetwarzania tabeli. Przypuszczam, ze bez Reacta a z czystym JS męczyłbym się dużo dłużej (przy renderowaniu tabelki) JQuery nie znam, też mam to w planie, ale jest jak jest
A czy to React bruździ w jakis szczególny sposób?
(chyba) Vue jeszcze niezbyt popularny
(chyba) sobie sam to wymyśliłeś ;-) https://trends.google.com/trends/explore?q=vue,react,angular
Edit: chociaż w zasadzie po wpisaniu vue js, react js, angular js wyniki są nieco inne, więc obstawiam, że samo vue jako słowo kluczowe łapie nieco za dużo wyszukiwań. Tak czy siak - Vue jest całkiem popularne i ma się dobrze.
A czy to React bruździ w jakis szczególny sposób?
Nie, po prostu Ty nie wiesz jak działa programowanie asynchroniczne w JSie.
Naprawdę - poczytaj, porób przykłady, a dopiero potem zabierz się za łączenie tego z Reactem.
O ile w ogóle potrzebujesz jakąkolwiek bibliotekę do frontendu - tabelkę możesz wyrenderować przecież ręcznie (document.createElement).
Może to Ci pomoże ruszyć, w każdym razie jak nie nauczysz się jak działa asynchroniczność to będziesz co chwila miał WTFy:
// Fetching example JSON data - you have to assing result to a variable to use it later:
const data = fetch('//jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
const myCustomFunctionOrComponentOrWhatever = () => {
// you can use your data (which is a Promise!) with `.then()` method, for example:
data
.then(data => {
// do what you want
console.log(data)
})
}
myCustomFunctionOrComponentOrWhatever()
CodePen: https://codepen.io/anon/pen/qYbrWL?editors=0012
PS
Tu możesz zacząć ogarnianie:
Tu masz przykład dla Reactowego komponentu (nie jest to do końca zgodne ze sztuką bo miesza pobieranie danych i ich prezentację, ale container vs presentational component jeszcze daleko przed tobą):
Minęło trochę czasu od opublikowania tego tematu. Dopiero dzisiaj (co bynajmniej nie znaczy, że cały czas nad tym siedziałem, wręcz przeciwnie) udało mi się to dobrze zrobić.
Na razie nie za pomocą fetch, ale przez import, co poprzednio też nie wychodziło ( komunikat require not defined).
Temat puścił po przeniesieniu projektu z katalogów Visual Studio Code do my-app w katalogu obsługiwanym przez Node.js i odpaleniu jako npm start (przedtem korzystałem z live serwera dost. przez VSC a biblioteki pobierałem z sieci. Najprawdopodobniej wersje sieciowe nie udostępniały require a wersja z npm udostępnia. I to niestety co najmniej drugi przypadek (dla mnie) kiedy z sieci na biegu zawodzi.
Ale przede wszystkim chciałbym podziękować za pomoc, materiał, które zaproponowaliście do przejrzenia są bardziej niż interesujące.
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.