These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Oct 2018
Danny McVey
@dannymcvey
Oct 21 2018 05:07
Hi folks. I’ll be here working on my tribute page so if anybody needs help with HTML/CSS, PM me.
Joseph
@Big-jo
Oct 21 2018 06:05
Hi, I want to create a button that adds input boxes whenever it's clicked, is there a way to do that in angular
P
Rahul Bhatia
@rbhatia46
Oct 21 2018 14:17
Hi everyone! I just published an article about Kubernetes. If you are interested in it, please give it a read. Only 3 mins
Hussein Zaki
@Hussein90
Oct 21 2018 16:06
hi to @all
can anyone help me in react.js
@all please help me
@planigan can you help me

the problem is @Hussein90
I stuck on getting data from local json db i get one group from 2 groups ```
{
"posts": [
{
"title": "CopyRight Automatico",
"tags": "[JS]",
"id": 1,
"userId": 1,
"name": "Shopping",
"dueDate": null,
"priority": "high",
"categoryId": 1
},
{
"title": "HtmlWebpackPlugin Multiples HTML files",
"tags": "[JS, webpack]",
"id": 2,
"userId": 1,
"name": "Cooking",
"dueDate": null,
"priority": "low",
"categoryId": 1
}
],
"categories": [
{
"id": 1,
"name": "Personal"
},
{
"id": 2,
"name": "Work"
}
]
}

this is the json file i can get data from posts only but i want also from categories also 
this is the code of my work until now

componentDidMount(){
let url="http://localhost:3001/categories"

fetch(url)
.then(resp => resp.json())
.then(data =>{
let categories = data.map((category, index) =>{
return(
<div key={index}>
<ul>
<li>
UserName: {category.name}
</li>
<li>
UserID: {category.id}
</li>
</ul>
</div>
)
})

this.setState({categories: categories});

})
}
``` this is the code componentdidmount only accept one
@all can anyone help me

Aditya
@ezioda004
Oct 21 2018 16:09
@Hussein90 Please format your code: press crtl + shift + m for markdown help
Hussein Zaki
@Hussein90
Oct 21 2018 16:10
okay
the json db is
{
  "posts": [
    {
      "title": "CopyRight Automatico",
      "tags": "[JS]",
      "id": 1,
      "userId": 1,
      "name": "Shopping",
      "dueDate": null,
      "priority": "high",
      "categoryId": 1
    },
    {
      "title": "HtmlWebpackPlugin Multiples HTML files",
      "tags": "[JS, webpack]",
      "id": 2,
      "userId": 1,
      "name": "Cooking",
      "dueDate": null,
      "priority": "low",
      "categoryId": 1
    }
  ],
  "categories": [
    {
      "id": 1,
      "name": "Personal"
    },
    {
      "id": 2,
      "name": "Work"
    }
  ]
}
A-J Roos
@Asjas
Oct 21 2018 16:12
@Hussein90 Please stop pinging All. It's a single person you are pinging. You don't have a priviliges to ping everyone.
Hussein Zaki
@Hussein90
Oct 21 2018 16:12
@Asjas sorry
A-J Roos
@Asjas
Oct 21 2018 16:12
Also format your first codeblock as @ezioda004 suggested. It's extremely hard to see what the code does.
Hussein Zaki
@Hussein90
Oct 21 2018 16:14
the code is
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categories:[]

    };
  }
  componentDidMount(){
   let url="http://localhost:3001/categories"

   fetch(url)
   .then(resp => resp.json())
   .then(data =>{
    let categories = data.map((category, index) =>{
            return(
               <div key={index}>
               <ul>
               <li>
               UserName: {category.name}
               </li>
               <li>
               UserID: {category.id}
               </li>
               </ul>
               </div>
)
          })

    this.setState({categories: categories});
  })
 }


  render() {
    return (
      <div className="App" >
       {this.state.categories}

      </div>
    );
  }
}

export default App;

when i try to add

let url="http://localhost:3001/posts"

to get two groups it only accept posts or categories

i am sorry to bother any one here
Aditya
@ezioda004
Oct 21 2018 16:17
@Hussein90 Sorry, I dont get your question. Can you elaborate whats not working?
Hussein Zaki
@Hussein90
Oct 21 2018 16:19
@ezioda004 look i want to get data from the local json db the posts group and also the categories group i get one only but i want to get the both of them or more like if iwant to add groups also to be appear
@ezioda004 look at the json up there is a two groups one is under posts and the other is under a categories
Aita Kane
@aita-kane
Oct 21 2018 16:20
hello who knows a great ajax ACL for codeigniter ?
Hussein Zaki
@Hussein90
Oct 21 2018 16:22
@ezioda004 did you get it or need more explain
please tell me
A-J Roos
@Asjas
Oct 21 2018 16:24
@Hussein90 Someone will help you if and when they can. Be patient.
Hussein Zaki
@Hussein90
Oct 21 2018 16:25
@Asjas i said "please tell me" for if anyone one need more explain
Tom
@moT01
Oct 21 2018 16:26
@Hussein90 add another fetch?
Christopher McCormack
@cmccormack
Oct 21 2018 16:27
@Hussein90 if you're trying to make two separate API calls, nest the second call within the .then of the first so it will be triggered only after the first is done. If you want them at the same time, you can use something like Promise.all
Hussein Zaki
@Hussein90
Oct 21 2018 16:29
how to use promise.alli don't know @cmccormack
@moT01 i tried and failed or maybe i done it wrong i add other url under the componentdidmount
Christopher McCormack
@cmccormack
Oct 21 2018 16:29
@Hussein90 it helps if you share the updated code that shows your attempt at using both url
@Hussein90 MDN Promise.all
Aditya
@ezioda004
Oct 21 2018 16:30
But he has just 1 JSON file?
Hussein Zaki
@Hussein90
Oct 21 2018 16:30
import React, { Component } from 'react';
import './App.css';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categories:[]

    };
  }
  componentDidMount(){
   let url="http://localhost:3001/categories"
   let url="http://localhost:3001/posts"
   fetch(url)
   .then(resp => resp.json())
   .then(data =>{
    let categories = data.map((category, index) =>{
            return(
               <div key={index}>
               <ul>
               <li>
               UserName: {category.name}
               </li>
               <li>
               UserID: {category.id}
               </li>
               </ul>
               </div>
)
          })

    this.setState({categories: categories});
  })
 }


  render() {
    return (
      <div className="App" >
       {this.state.categories}

      </div>
    );
  }
}

export default App;
here it is
Aditya
@ezioda004
Oct 21 2018 16:31
You cant redeclare a let variable again, so you have syntax error currently
Christopher McCormack
@cmccormack
Oct 21 2018 16:31
you need two separate fetch requests to make that work
^
Hussein Zaki
@Hussein90
Oct 21 2018 16:32
you mean 2 componentdidmount i tried and failed
A-J Roos
@Asjas
Oct 21 2018 16:32
@ezioda004 is right. The url is being overwritten before any code executes
So make it url1 and url2
@Hussein90 You can't have 2 componentDidMount in a component
Christopher McCormack
@cmccormack
Oct 21 2018 16:33
  componentDidMount(){
   let url1="http://localhost:3001/categories"
   let url2="http://localhost:3001/posts"
   fetch(url1).then(resp => resp.json()).then(categories => {
      /* At this point url1 fetch is complete, call url2 fetch */
      fetch(url2).then(resp => resp.json()).then(posts => {
          /* 
            do the work here after both have resolved
         */
      })
   })
 }
Aditya
@ezioda004
Oct 21 2018 16:33
Its not even overwritten, should throw syntax error:
let x = 1;
let x = 2; //Error, x has been already declared
Hussein Zaki
@Hussein90
Oct 21 2018 16:35
i want the both at the same time @cmccormack
Christopher McCormack
@cmccormack
Oct 21 2018 16:35
@Hussein90 then please read up on Promise.all
sent the link it has plenty of examples
Hussein Zaki
@Hussein90
Oct 21 2018 16:35
@cmccormack but not with react
Christopher McCormack
@cmccormack
Oct 21 2018 16:36
@Hussein90 this is not a react problem
The React code looks fine as far as I saw, but if you want both fetch calls to be done simultaneously you need a way to handle that, Promise.all does this well
Hussein Zaki
@Hussein90
Oct 21 2018 16:38
@cmccormack can it work with more than 2 fetch calls
Christopher McCormack
@cmccormack
Oct 21 2018 16:38
Please go read the article, it explains it very well
I wouldn't recommend it if it wasn't useful :)
I'm out to go to breakfast good luck!
Hussein Zaki
@Hussein90
Oct 21 2018 16:39
@cmccormack sorry again :)
Aditya
@ezioda004
Oct 21 2018 16:40
async function fetchAll(url1, url2){
  let data = await Promise.all([fetch(url1).then(data => data.json()), fetch(url2).then(data => data.json())]);
  //setState here with data
}
Hussein Zaki
@Hussein90
Oct 21 2018 16:53
@ezioda004 put this under
let url1="http://localhost:3001/categories"
   let url2="http://localhost:3001/posts"
right or wrong
Aditya
@ezioda004
Oct 21 2018 16:59
@Hussein90 Seems fine
Hussein Zaki
@Hussein90
Oct 21 2018 17:00
 return(
               <div key={index}>
               <ul>
               <li>
               UserName: {category.name}
               </li>
               <li>
               UserID: {category.id}
               </li>
               </ul>
               </div>
)
and about return where to added it it was under
fetch(url)
   .then(resp => resp.json())
   .then(data =>{
    let categories = data.map((category, index) =>{return()}
Hussein Zaki
@Hussein90
Oct 21 2018 17:10
here is the updated code
import React, { Component } from 'react';
import './App.css';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categories:[],
      posts:[]
    };
  }
  componentDidMount(){
   let url1="http://localhost:3001/categories"
   let url2="http://localhost:3001/posts"
   async function fetchAll(url1, url2){
  let data = await Promise.all([fetch(url1).then(data => data.json()), fetch(url2).then(data => data.json())]);
  //setState here with data 
  this.setState({data: data});
}
            return(
               <div key={index}>
               <ul>
               <li>
               UserName: {category.name}
               </li>
               <li>
               UserID: {posts.id}
               </li>
               <li>
               UserID: {category.id}
               </li>
               </ul>
               </div>
)
          })


  })
 }


  render() {
    return (
      <div className="App" >
       {this.state.data}

      </div>
    );
  }
}

export default App;
Hussein Zaki
@Hussein90
Oct 21 2018 17:32
here is the updated code
import React, { Component } from 'react';
import './App.css';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categories:[],
      posts:[]
    };
  }
  componentDidMount(){
   let url1="http://localhost:3001/categories"
   let url2="http://localhost:3001/posts"
   async function fetchAll(url1, url2){
  let data = await Promise.all([fetch(url1).then(data => data.json()), fetch(url2).then(data => data.json())]);
  //setState here with data 
  this.setState({data: data});
}
            fetchAll(url1, url2);
          }


  }



  render() {
    console.log(this.state.data)
}
    return (
      <div className="App" key={index}>
       <ul>
               <li>
               UserName: {category.name}
               </li>
               <li>
               UserID: {posts.id}
               </li>
               <li>
               UserID: {category.id}
               </li>
               </ul>
      </div>
    );
  }
}

export default App;
and on the browser that appear
./src/App.js
  Line 27:  Parsing error: Unexpected token, expected ";"

  25 | 
  26 | 
> 27 |   render() {
     |            ^
  28 |     console.log(this.state.data)
  29 | }
  30 |     return (
how to make it work
Hussein Zaki
@Hussein90
Oct 21 2018 17:58
@all can anyone help me
Christopher McCormack
@cmccormack
Oct 21 2018 18:43
May want to fix your indentation to be consistent, most likely you didn't close a tag
Hussein Zaki
@Hussein90
Oct 21 2018 19:07
@cmccormack here is my updated code
import React, { Component } from 'react';
import './App.css';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categories: [],
      posts: []
    };
  }
  componentDidMount() {
    let url1 = "http://localhost:3001/categories"
    let url2 = "http://localhost:3001/posts"
    async function fetchAll(url1, url2) {
      let data = await Promise.all([fetch(url1).then(data => data.json()), fetch(url2).then(data => data.json())]);
      //setState here with data 
      this.setState({ data: data });
    }
    fetchAll(url1, url2);
  }
render()  {
  console.log(this.state.data)

  return (
    <div className="App" key={index}>
      <ul>
        <li>
          UserName: {category.name}
        </li>
        <li>
          UserID: {posts.id}
        </li>
        <li>
          UserID: {category.id}
        </li>
      </ul>
    </div>
  )

};

export default App;
Christopher McCormack
@cmccormack
Oct 21 2018 19:11
@Hussein90 are you using any kind of editor? It's good to use an editor that can help highlight where you may have issues. In this case it looks like your App class doesn't have a closing curly brace
Hussein Zaki
@Hussein90
Oct 21 2018 19:12
sublime
@cmccormack here it is the updated code
import React, { Component } from 'react';
import './App.css';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categories: [],
      posts: []
    };
  }
  componentDidMount() {
    let url1 = "http://localhost:3001/categories"
    let url2 = "http://localhost:3001/posts"
    async function fetchAll(url1, url2) {
      let data = await Promise.all([fetch(url1).then(data => data.json()), fetch(url2).then(data => data.json())]);
      //setState here with data 
      this.setState({ data: data });
    }
    fetchAll(url1, url2);
  }
render()  {
  console.log(this.state.data)

  return (
    <div className="App" key={index}>
      <ul>
        <li>
          UserName: {category.name}
        </li>
        <li>
          UserID: {posts.id}
        </li>
        <li>
          UserID: {category.id}
        </li>
      </ul>
    </div>
  )

}
};
export default App;
Christopher McCormack
@cmccormack
Oct 21 2018 19:15
@Hussein90 After you fix your braces, you may need to actually reference your state in your render method, you're rendering undelcared variables. You are also not using your Promise.all correctly, setState will be called prior to any of your fetch promises resolving. you should call .then on your Promise.all
Hussein Zaki
@Hussein90
Oct 21 2018 19:15
@cmccormack can you tell me how
to do it
Christopher McCormack
@cmccormack
Oct 21 2018 19:16
Sure
There are some great examples in there. Notice how .then is called on Promise.all, and the arguments to the callback are the data from each of the Promises that you would have accessed via the .then of each promise
var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});
looks like you're almost there, you just need to call .then on your promise.all, store promise response in its own property in state with setState (possibly data.category, data.posts, up to you)
Hussein Zaki
@Hussein90
Oct 21 2018 19:21
i see that but i don't know how to put it in the fuction i have
Christopher McCormack
@cmccormack
Oct 21 2018 19:22
oh I didn't see you had await on your promise.all
if you log data, what do you see?
Sorry about that
Hussein Zaki
@Hussein90
Oct 21 2018 19:23
i don't see anything now only this error
./src/App.js
  Line 25:  'index' is not defined     no-undef
  Line 28:  'category' is not defined  no-undef
  Line 31:  'posts' is not defined     no-undef
  Line 34:  'category' is not defined  no-undef

Search for the keywords to learn more about each error.
here is the updated code
Christopher McCormack
@cmccormack
Oct 21 2018 19:23
stop
look at the errors
fix the errors
Hussein Zaki
@Hussein90
Oct 21 2018 19:23
import React, { Component } from 'react';
import './App.css';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categories: [],
      posts: []
    };
  }
  componentDidMount() {
    let url1 = "http://localhost:3001/categories"
    let url2 = "http://localhost:3001/posts"
    async function fetchAll(url1, url2) {
      let data = await Promise.all([fetch(url1).then(data => data.json()), fetch(url2).then(data => data.json())]);
      //setState here with data 
      this.setState({ data: data });
    }
    fetchAll(url1, url2);
  }
render()  {
  console.log(this.state.data)

  return (
    <div className="App" key={index}>
      <ul>
        <li>
          UserName: {category.name}
        </li>
        <li>
          UserID: {posts.id}
        </li>
        <li>
          UserID: {category.id}
        </li>
      </ul>
    </div>
  )

}
};
export default App;
Christopher McCormack
@cmccormack
Oct 21 2018 19:23
index is not defined
define index
category isn't defined, define category (probably this.state.data.category
the errors are telling you what is wrong, read them, research them, fix them
if you really don't understand them you can ask about it, but you should try to resolve them first on your own as much as you can
Hussein Zaki
@Hussein90
Oct 21 2018 19:25
i want also to get data from posts not only categories
Christopher McCormack
@cmccormack
Oct 21 2018 19:25
data will probably be an array of objects, one being your categories, the next being your posts
Hussein Zaki
@Hussein90
Oct 21 2018 19:26
look here is the db of json
Christopher McCormack
@cmccormack
Oct 21 2018 19:26
I"m not sure without seeing the logged data though, so maybe comment out any offending lines for now, see if you can get far enough to log data, and see what to do from there
Hussein Zaki
@Hussein90
Oct 21 2018 19:26
{
  "posts": [
    {
      "title": "CopyRight Automatico",
      "tags": "[JS]",
      "id": 1,
      "userId": 1,
      "name": "Shopping",
      "dueDate": null,
      "priority": "high",
      "categoryId": 1
    },
    {
      "title": "HtmlWebpackPlugin Multiples HTML files",
      "tags": "[JS, webpack]",
      "id": 2,
      "userId": 1,
      "name": "Cooking",
      "dueDate": null,
      "priority": "low",
      "categoryId": 1
    }
  ],
  "categories": [
    {
      "id": 1,
      "name": "Personal"
    },
    {
      "id": 2,
      "name": "Work"
    }
  ]
}
Christopher McCormack
@cmccormack
Oct 21 2018 19:26
@Hussein90 this is data, or this is one of your endpoint responses?
Hussein Zaki
@Hussein90
Oct 21 2018 19:27
this is json data and one of my endpoints i have endpoints in categories and posts
Christopher McCormack
@cmccormack
Oct 21 2018 19:28
not sure what you mean, this looks like a single JSON object that has both
why do you need two fetch calls?
Hussein Zaki
@Hussein90
Oct 21 2018 19:29
one for call the categories and the other to call the posts
in the same time i making a table
Christopher McCormack
@cmccormack
Oct 21 2018 19:30
The JSON above
that includes both categories and posts
Hussein Zaki
@Hussein90
Oct 21 2018 19:30
yes
Christopher McCormack
@cmccormack
Oct 21 2018 19:30
what does the other endpoint return?
I think I lost you
you have two endpoints
let url1 = "http://localhost:3001/categories"
let url2 = "http://localhost:3001/posts"
the JSON file above, which one of these endpoints resolve it?
Hussein Zaki
@Hussein90
Oct 21 2018 19:33
yes
the both
if i call one of them using fetch() it get the data from the JSON file above and also the other
doing that
Christopher McCormack
@cmccormack
Oct 21 2018 19:35
The same file?
Hussein Zaki
@Hussein90
Oct 21 2018 19:35
yes
Christopher McCormack
@cmccormack
Oct 21 2018 19:36
You don't need to do two fetch calls, just store the result of the one fetch in your state, and access them using the object properties posts and categories
Hussein Zaki
@Hussein90
Oct 21 2018 19:36
can you fix it in my code
@cmccormack
Christopher McCormack
@cmccormack
Oct 21 2018 19:42
Here I made an example using your JSON data. Codepen
That's as much as I'm willing to help though, it seems you may need to read up more on JSON and JavaScript objects to make sure you understand how to solve these problems in the future. You may also want to read up on how to access state from your render method in React
Hussein Zaki
@Hussein90
Oct 21 2018 19:45
okay thanks ,
i have more question
@cmccormack
this methond any get object properties
from more than 2 right
Christopher McCormack
@cmccormack
Oct 21 2018 19:47
Can you rephrase your question please?
Hussein Zaki
@Hussein90
Oct 21 2018 19:48
if i added more than one in the json this is still work with it
like i have posts and categories what if i added other one it will still work or no
Christopher McCormack
@cmccormack
Oct 21 2018 19:49
Sure
those are all just properties on an object
so when you fetch the JSON file, you're fetch an object, which has each of those items as a property on that object
A JSON file can also be an array, so you should know the type of the object you are pulling down prior so you can properly handle it
Hussein Zaki
@Hussein90
Oct 21 2018 19:55
@cmccormack
Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
let url = "./db.json";
Christopher McCormack
@cmccormack
Oct 21 2018 19:57
Usually that means your file isn't a valid JSON file
Hussein Zaki
@Hussein90
Oct 21 2018 19:58
it run in the localhost:3001
@cmccormack it works only when i put your link
Christopher McCormack
@cmccormack
Oct 21 2018 20:00
My link is valid json
make sure yours is as well
not sure you can actually fetch json locally like that though
Hussein Zaki
@Hussein90
Oct 21 2018 20:06
Because of that I make a local server http to call
But it works with objects in title
Like ‘local host:3001/posts’
@cmccormack
Christopher McCormack
@cmccormack
Oct 21 2018 20:07
Are you running create-react-app in dev mode?
Hussein Zaki
@Hussein90
Oct 21 2018 20:07
i am running create-react-app
Christopher McCormack
@cmccormack
Oct 21 2018 20:09
is db.json different than the file we were working with before? Make sure the file is vali
Hussein Zaki
@Hussein90
Oct 21 2018 20:12
no
it is the same
here it is
{
  "posts": [{
      "title": "CopyRight Automatico",
      "tags": "[JS]",
      "id": 1,
      "userId": 1,
      "name": "Shopping",
      "dueDate": null,
      "priority": "high",
      "categoryId": 1
    },
    {
      "title": "HtmlWebpackPlugin Multiples HTML files",
      "tags": "[JS, webpack]",
      "id": 2,
      "userId": 1,
      "name": "Cooking",
      "dueDate": null,
      "priority": "low",
      "categoryId": 1
    }
  ],
  "categories": [{
      "id": 1,
      "name": "Personal"
    },
    {
      "id": 2,
      "name": "Work"
    }
  ]
}
and also i want to call of the data at same time i mean i want when i run the app i get for example
categories name(personal,work) appear on the screen like when i was using the .map method
@cmccormack \
sorry i am bother you
Christopher McCormack
@cmccormack
Oct 21 2018 20:15
Get the json file working, you may need to do some research into your error. There are JSON validation tools online you can use to validate the file, and you can use your browser dev tools to see if you are actually loading the correct file. Often times if your relative path is wrong, the file you load is actually a different file, possibly your index.html
Hussein Zaki
@Hussein90
Oct 21 2018 20:17
the path is right
what about the other question
and also i want to call of the data at same time i mean i want when i run the app i get for example
categories name(personal,work) appear on the screen like when i was using the .map method @cmccormack
i working now on making it vaild
Christopher McCormack
@cmccormack
Oct 21 2018 20:18
@Hussein90 one step at a time. There are great guides online on how to iterate over an Array to display React components
I believe FreeCodeCamp may even have an exercise or two on that
Hussein Zaki
@Hussein90
Oct 21 2018 21:48

i fixed the json problem
the path was wrong
i just changed it now to that

http://localhost:3001/db

and it work
like magic

lwears
@lwears
Oct 21 2018 21:54
hey guys, i cannot get the media query to pass the test on this. can anyone assist?