Unable to fetch search results via fetch - Github API

github search api
github api list repositories
github api get list of all users
github api example
github api python
github api v4
github api authentication
github api endpoints

I am trying to search users via a search String using Github API I am using fetch with the url but unable to access the result json.

This is where I am fetching the data

componentDidMount() {
    console.log(this.props.searchString);
    let furl = 'https://api.github.com/search/users?q='.concat(
      this.props.searchString
    );
    console.log(furl);
    fetch(furl)
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          user: json
        });
      });
    console.log(this.state.user);
    console.log(this.state.user.total_count);
}

render() {
    var { isLoaded, user } = this.state;
    if (!isLoaded) {
      return <div>Loading ....</div>;
    } else {
      return (
        <Fragment>
          <Switch>
            <Route
              exact
              path="/"
              render={() => (
                <Fragment>
                  <div className="list-User">
                    <ul className="user-unordered-list">
                      {user.map(user => (
                        <li key={user.id}>
                          <div className="user-info">
                            <img src={user.avatar_url} />
                            <h1> {user.login}</h1>
                            <p>
                              <a href={user.html_url}>Github Profile</a>
                            </p>
                          </div>
                        </li>
                      ))}
                    </ul>
                  </div>
                </Fragment>
              )}
            />
            <Route
              path="/search"
              render={({ history }) => (
                <Fragment>
                  <UserSearch searchString={this.state.query} />
                </Fragment>
              )}
            />
            <Route
              path="/user/m"
              render={({ history }) => (
                <div className="user-profile">
                  <User />
                </div>
              )}
            />
            }
          </Switch>
        </Fragment>
      );
    }

The output from the console is as follows

ddd
UserSearch.js:19 https://api.github.com/search/users?q=ddd
UserSearch.js:29 []length: 0__proto__: Array(0)
react-dom.development.js:57 Uncaught Error: Objects are not valid as a React child (found: object with keys {login, id, node_id, avatar_url, gravatar_id, url, html_url, followers_url, following_url, gists_url, starred_url, subscriptions_url, organizations_url, repos_url, events_url, received_events_url, type, site_admin, score}). If you meant to render a collection of children, use an array instead.
    in div (at UserSearch.js:86)
    in UserSearch (at App.js:201)
    in Route (at App.js:151)
    in Switch (at App.js:150)
    in App (at src/index.js:9)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:8)
    at invariant (react-dom.development.js:57)
    at throwOnInvalidObjectType (react-dom.development.js:13607)
    at createChild (react-dom.development.js:13834)
    at reconcileChildrenArray (react-dom.development.js:14080)
    at reconcileChildFibers (react-dom.development.js:14430)
    at reconcileChildren (react-dom.development.js:14817)
    at updateFragment (react-dom.development.js:14983)
    at beginWork (react-dom.development.js:16009)
    at performUnitOfWork (react-dom.development.js:19102)
    at workLoop (react-dom.development.js:19143)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:18350)
    at renderRoot (react-dom.development.js:19261)
    at performWorkOnRoot (react-dom.development.js:20165)
    at performWork (react-dom.development.js:20075)
    at performSyncWork (react-dom.development.js:20049)
    at requestWork (react-dom.development.js:19904)
    at scheduleWork (react-dom.development.js:19711)
    at Object.enqueueSetState (react-dom.development.js:12936)
    at UserSearch.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:356)
    at UserSearch.js:23
invariant @ react-dom.development.js:57
throwOnInvalidObjectType @ react-dom.development.js:13607
createChild @ react-dom.development.js:13834
reconcileChildrenArray @ react-dom.development.js:14080
reconcileChildFibers @ react-dom.development.js:14430
reconcileChildren @ react-dom.development.js:14817
updateFragment @ react-dom.development.js:14983
beginWork @ react-dom.development.js:16009
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
replayUnitOfWork @ react-dom.development.js:18350
renderRoot @ react-dom.development.js:19261
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
(anonymous) @ UserSearch.js:23
Promise.then (async)
componentDidMount @ UserSearch.js:21
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
interactiveUpdates$1 @ react-dom.development.js:20337
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5083
index.js:1446 The above error occurred in one of your React components:
    in div (at UserSearch.js:86)
    in UserSearch (at App.js:201)
    in Route (at App.js:151)
    in Switch (at App.js:150)
    in App (at src/index.js:9)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:8)

Consider adding an error boundary to your tree to customize error handling behavior.

function.console.(anonymous function) @ index.js:1446
logCapturedError @ react-dom.development.js:16764
logError @ react-dom.development.js:16800
update.callback @ react-dom.development.js:17814
callCallback @ react-dom.development.js:11743
commitUpdateEffects @ react-dom.development.js:11783
commitUpdateQueue @ react-dom.development.js:11773
commitLifeCycles @ react-dom.development.js:17055
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
(anonymous) @ UserSearch.js:23
Promise.then (async)
componentDidMount @ UserSearch.js:21
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
interactiveUpdates$1 @ react-dom.development.js:20337
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5083
react-dom.development.js:57 Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {login, id, node_id, avatar_url, gravatar_id, url, html_url, followers_url, following_url, gists_url, starred_url, subscriptions_url, organizations_url, repos_url, events_url, received_events_url, type, site_admin, score}). If you meant to render a collection of children, use an array instead.
    in div (at UserSearch.js:86)
    in UserSearch (at App.js:201)
    in Route (at App.js:151)
    in Switch (at App.js:150)
    in App (at src/index.js:9)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:8)
    at invariant (react-dom.development.js:57)
    at throwOnInvalidObjectType (react-dom.development.js:13607)
    at createChild (react-dom.development.js:13834)
    at reconcileChildrenArray (react-dom.development.js:14080)
    at reconcileChildFibers (react-dom.development.js:14430)
    at reconcileChildren (react-dom.development.js:14817)
    at updateFragment (react-dom.development.js:14983)
    at beginWork (react-dom.development.js:16009)
    at performUnitOfWork (react-dom.development.js:19102)
    at workLoop (react-dom.development.js:19143)
    at renderRoot (react-dom.development.js:19228)
    at performWorkOnRoot (react-dom.development.js:20165)
    at performWork (react-dom.development.js:20075)
    at performSyncWork (react-dom.development.js:20049)
    at requestWork (react-dom.development.js:19904)
    at scheduleWork (react-dom.development.js:19711)
    at Object.enqueueSetState (react-dom.development.js:12936)
    at UserSearch.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:356)
    at UserSearch.js:23
invariant @ react-dom.development.js:57
throwOnInvalidObjectType @ react-dom.development.js:13607
createChild @ react-dom.development.js:13834
reconcileChildrenArray @ react-dom.development.js:14080
reconcileChildFibers @ react-dom.development.js:14430
reconcileChildren @ react-dom.development.js:14817
updateFragment @ react-dom.development.js:14983
beginWork @ react-dom.development.js:16009
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
(anonymous) @ UserSearch.js:23
Promise.then (async)
componentDidMount @ UserSearch.js:21
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
interactiveUpdates$1 @ react-dom.development.js:20337
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5083

The json file at https://api.github.com/search/users?q=ddd

{
  "total_count": 3056,
  "incomplete_results": false,
  "items": [
    {
      "login": "ddd",
      "id": 400620,
      "node_id": "MDQ6VXNlcjQwMDYyMA==",
      "avatar_url": "https://avatars0.githubusercontent.com/u/400620?v=4",
      "gravatar_id": "",
      "url": "https://api.github.com/users/ddd",
      "html_url": "https://github.com/ddd",
      "followers_url": "https://api.github.com/users/ddd/followers",
      "following_url": "https://api.github.com/users/ddd/following{/other_user}",
      "gists_url": "https://api.github.com/users/ddd/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/ddd/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/ddd/subscriptions",
      "organizations_url": "https://api.github.com/users/ddd/orgs",
      "repos_url": "https://api.github.com/users/ddd/repos",
      "events_url": "https://api.github.com/users/ddd/events{/privacy}",
      "received_events_url": "https://api.github.com/users/ddd/received_events",
      "type": "User",
      "site_admin": false,
      "score": 104.69152
    },
    {
      "login": "dddaisuke",
      "id": 96539,
      "node_id": "MDQ6VXNlcjk2NTM5",
      "avatar_url": "https://avatars2.githubusercontent.com/u/96539?v=4",
      "gravatar_id": "",
      "url": "https://api.github.com/users/dddaisuke",
      "html_url": "https://github.com/dddaisuke",
      "followers_url": "https://api.github.com/users/dddaisuke/followers",
      "following_url": "https://api.github.com/users/dddaisuke/following{/other_user}",
      "gists_url": "https://api.github.com/users/dddaisuke/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/dddaisuke/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/dddaisuke/subscriptions",
      "organizations_url": "https://api.github.com/users/dddaisuke/orgs",
      "repos_url": "https://api.github.com/users/dddaisuke/repos",
      "events_url": "https://api.github.com/users/dddaisuke/events{/privacy}",
      "received_events_url": "https://api.github.com/users/dddaisuke/received_events",
      "type": "User",
      "site_admin": false,
      "score": 74.155464
    },

What am i doing wrong here,please tell ?

You might be using as following(assuming from your error):

<div>{user.items[0]}</div>

As shown in you json file, items is object. You cannot have object as children, only string or number can be children. You can do this instead:

<div>
   <p>login: {user.items[0].login}</p>
   // other items as well
</div>

Search, To satisfy that need, the GitHub Search API provides up to 1,000 results for each For requests using Basic Authentication, OAuth, or client ID and secret, you can For example, your search will fail if your query includes repo: , user: , or org:  Using Fetch for optimizing requests to the GitHub API by Alejandro Gomez • February 28, 2019 • scala • fetch • scala libraries | 13 minutes to read. We’ve just released version 1.0.0 of Fetch, an open source library for simple and efficient data access for Scala and Scala.js.

This code works. But you need to paste your string to q parameter.

function App() {
  return (
    <div className="App">
      <Some />
    </div>
  );
}

class Some extends React.Component {
 state = {
    isLoaded: false,
    users: {},
    total: 0
  };

  componentDidMount() {
    let furl = "https://api.github.com/search/users?q=ddd";
    fetch(furl)
      .then(res => res.json())
      .then(({items, total_count}) => {
        this.setState(() => ({
          isLoaded: true,
          users: items,
          total: total_count
        }));
      });
  }

  renderUsers = users =>
    users.map(({ id, login, avatar_url }) => (
      <div key={id}>
        <img src={avatar_url} />
        <p>{login}</p>
      </div>
    ));

  render() {
    const { users, isLoaded } = this.state;
    console.log(users);

    return <div>{isLoaded ? this.renderUsers(users) : null}</div>;
  }
}

// Render it
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

JavaScript Fetch API Examples · GitHub, fetch('https://api.github.com/orgs/nodejs') .then(response => response.json()) .​then(data => { console.log(data) // Prints result from `response.json()` in we will use URLSearchParams to encode the data like a query string. When i am sending files to the server or just updating json file using the front-end fetch() , do i need  brasseld changed the title [API doc] Unable to fetch API doc from URL [management] Unable to fetch API doc from URL Jul 10, 2019 Copy link Quote reply Author

GitHub API v3, Here, we fetch the list of repositories owned by the octokit organization: Notice: GitHub will discontinue authentication to the API using query parameters. Failed login limit Sending invalid JSON will result in a 400 Bad Request response. I'm experiencing an intermittent issue with the download API. During test runs, I'm unable to fetch the downloaded file using the selenoid download URL. At first I thought the files were not downloading correctly in the browser, so to verify I mounted the /users/selenium/Downloads directory to the host server.

Issues, You can read more about the use of media types in the API here. Note: If an issue is opened via a GitHub App, the response will include the You can use the filter query parameter to fetch issues that are not necessarily assigned to sort, string, What to sort results by. Lock will fail if you don't use one of these reasons: If we used await Promise.all(names.map(name => fetch())), and call .json() on the results, then it would wait for all fetches to respond. By adding .json() directly to each fetch, we ensure that individual fetches start reading data as JSON without waiting for each other.

Valid response returning "TypeError: Failed to fetch" · Issue , For anyone with this issue that is using AWS API Gateway's custom authorizers, see this AWS thread - this has been an issue for over a year  The above test was using GetMessage(), I ran one test using Fetch(0,0, MessageSummaryItems.BodyStructure) for both the folders. Attached protocol log - ProtocolLogger.log. I'm starting to wonder if copy-pasting an email between folders in Outlook windows client could be changing the email and not keeping the text/plain part of it.

Unable to fetch/pull, getting 'Unable to lookup error' · Issue , Description I am getting following error on fetch/pull (As seen on JS console)): `git -c origin` exited with an unexpected code: 1. fatal: unable to look up git.kernel.​dk (port 9418) (Either the applica Clone the mentioned Repo separately using Git. Contact GitHub · Pricing · API · Training · Blog · About. ssingh28 changed the title Unable to fetch User Profile properties using rest api in webpart Unable to fetch User Profile properties using rest api in spfx webpart Oct 11, 2017 This comment has been minimized.

Comments
  • Whats in your render method?
  • added the render method
  • {user.map(user => ( should be {user.items.map(user => (, I don't know if this fixes the problem though.
  • Just for checking wherther the q parameter is added to url i have done console.log(furl) and the output has q parameter
  • yes, but for testings I hadnt props as you have. answer which you selected can't be right, because its using first element from array, I wrote you code which you will use in your app and it will work in proper way..
  • U are right about the fact that above answer was using first parameter, but it gave the idea that I have to iterate over the object as an array and it worked
  • why it cant be possible in React ? :)
  • Uncaught Error: Objects are not valid as a React child - read your error message thats why its not possible. You need to make it "string", either by stringifying it, or .toString()
  • can you please elaborate on this, i tried using JSON.stringify but that did not help
  • @SID using this answer, replace {this.state.user} with {JSON.stringify(this.state.user)}, but this is only to see if you are getting the correct info of your object. You will then have to do something with its properties, for example iterate with map, or use each property in a <span>, etc, depending on your needs.