Jak pobrać plik .json

Odpowiedz Nowy wątek
2018-04-23 10:40
0

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ć?

Pozostało 580 znaków

2018-04-23 13:07
0

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.


Pozostało 580 znaków

2018-04-23 13:35
Złoty Programista
0
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 (

{item[index]} {item[index]}{item[index]}{item[index]}{item[index]}{item[index]}
);

}
}
`

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/[email protected]/react-table.css">
  <script src="https://unpkg.com/[email protected]/react-table.js"></script>
  <script src="https://unpkg.com/[email protected]/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.

Pozostało 580 znaków

2018-04-23 13:40
0

A na dodatek wygląda na to, że z rozpędu wleciałem na post Złotego Programisty i go nadpisałem, przepraszam

edytowany 1x, ostatnio: Kiszuriwalilibori, 2018-04-23 13:41

Pozostało 580 znaków

2018-04-23 13:43
0

Moce to pomoze:
http://4dev.tech/2017/12/how-to-load-a-json-file-in-reactjs/


Pozostało 580 znaków

2018-04-23 14:03
0

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/[email protected]/react-table.css">
  <script src="https://unpkg.com/[email protected]/react-table.js"></script>
  <script src="https://unpkg.com/[email protected]/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

Pozostało 580 znaków

2018-04-23 14:06
0

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[...]Web/API/Fetch_API/Using_Fetch


edytowany 2x, ostatnio: Patryk27, 2018-04-23 14:07

Pozostało 580 znaków

2018-04-23 14:10
0

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

Moze wcale reacta nie potrzebujesz, przy takim zalozeniu? - shagrin 2018-04-23 14:12

Pozostało 580 znaków

2018-04-23 14:13
1

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 :-)


edytowany 1x, ostatnio: Patryk27, 2018-04-23 14:13

Pozostało 580 znaków

2018-04-23 14:14
0

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

Pozostało 580 znaków

2018-04-23 14:15
0

To na pewno ogólnie to dla mnie trudny temat, ale chciałbym go jakoś przejść

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0