Agfdhyk

I have a json file named autofill.json and it's created to autofill a search bar when pressed on.

the autofill.json is a test file that's why it looks like this.

        [

  {

    "a": {

      "apple": {

        "name": "apple",

        "href": "https://www.apple.com/"

      },

      "armadillo": {

        "name": "armadillo",

        "href": "https://www.armadillo.com/"

      }

    },

    "b": {

      "box": {

        "name": "apple",

        "href": "https://www.berserk.com/"

      },

      "berserk": {

        "name": "berserk",

        "href": "https://www.berserk.com/"

      }

    }

  }

]

    import fetch from 'isomorphic-fetch'



const FetchAndParseResults = (url) => {

  return fetch(url).then(response => {

    const parsedJson = response.json()

    return parsedJson

  })

}



export default FetchAndParseResults

    import React from 'react'

import Searchbar from './index.js'

import FetchAndParseResults from './FetchAndParseResults.js'



class SearchContainer extends React.Component {

    state = {

      results: 

    }



    performSearch = event => {

      return FetchAndParseResults('static/autofill.json').then(data => {

        this.setState({ results: data })

      })

    }



    render () {

      console.log('performSearch event', this.performSearch)

      console.log('data inside performSearch', this.state.results)

      return (

        <Searchbar

          performSearch={this.performSearch}

          results={this.state.results}

        />

      )

    }

    }



export default SearchContainer

    import React from 'react'

import PropTypes from 'prop-types'

import Styles from './searchbar.scss'



const AutoFill = (props) => {

  console.log('proppppppsss', props)

  const results = props.results || 



  return (

    <ul className={Styles.searchUl}>

      {results.map(({ name, href }) => (

        <li className={Styles.searchLi} key={href}>

          <a className={Styles.searchA} href={href} target='_blank' rel='noopener noreferrer' key={href}>

            {name}

          </a>

        </li>

      ))}

    </ul>

  )

}



AutoFill.propTypes = {

  results: PropTypes.array

}



export default AutoFill

import React from 'react'

import Styles from './searchbar.scss'

import Icon from '../../components/icon/icon'

import Search from '../../components/form-input/search'

import AutoFill from './autofill'

import PropTypes from 'prop-types'



export default class Searchbar extends React.Component {

  constructor (props) {

    super(props)

    this.state = {

      className: Styles.input,

      icon: Styles.icon__wrapper,

      value: 

    }

    this.input = React.createRef()

  }



  openInput = () => {

    this.setState({

      className: Styles.input__active,

      icon: Styles.iconWidth

    }, () => {

      this.input.focus()

    })

    this.props.onOpen && this.props.onOpen()

  }



  closeInput = () => {

    this.setState({

      className: Styles.input,

      icon: Styles.icon__wrapper

    })

    this.props.onClose && this.props.onClose()

  }



  handleChange = event => {

    let value = event.target.value

    this.setState({ value })

    this.props.performSearch(value)

  }



  handleSubmit = event => {

    event.preventDefault()

  }



  render () {

    console.log('results', this.props.results)

    console.log('state.value', this.state.value)

    return (

      <div>

        <form onSubmit={this.handleSubmit} className={Styles.search}>

          <div className={this.state.icon}>

            <Icon className={Styles.icon__wrapper} iconName='faSearch' onClick={this.openInput} />

          </div>

          <Search autoComplete='off' value={this.state.value} onChange={this.handleChange} id='search' tabIndex='0' myref={input => { this.input = input }} className={this.state.className} onBlur={this.closeInput} placeholder='Search' />

        </form>

        <div>

          <AutoFill results={this.props.results} />

        </div>

      </div>

    )

  }

}



Search.propTypes = {

  performSearch: PropTypes.func,

  results: PropTypes.array

}

GET http://localhost:3000/[object%20Object] 404 (Not Found)

And

about:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON
at position 0

The second error is fixed by doing

const parsedJson = response.text(

instead of

const parsedJson = response.json()

to get more information where/what the error takes place. But by doing this i receive the error,

searchcontainer.js:12 Uncaught (in promise) TypeError: Cannot read property 'results' of undefined

I've tried to run it from npm build instead of running it in a dev environment which didn't fix it.

I read that a mock url should work but then again i want to acces it from a file and not from a url?

Any help would be highly appreciated and looked into.

The problem is most likely in the fetch call. If you look at the error message GET http://localhost:3000/[object%20Object] 404 (Not Found)
You can see that it is trying to append an object to the URL localhost:3000/.

You are getting the Unexpected token < in JSON at position 0 error because the response of your fetch request is probably a 404 page. The < is most likely the first char of <html>

To access the JSON object in your React files, you can simply do an importation like so;

import * as autofillData from 'autofill.json';

It will be returned as a JSON object.

I believe you are using the isomorphic-fetch package wrongly, if you look at their source code, https://github.com/matthew-andrews/isomorphic-fetch/blob/master/fetch-npm-node.js#L5 , they are accepting a URL to make a call to the API URL which will return a promise or a JSON object depending on the implementation of the API that you are calling.

If you were to dive deeper into the open-source code here (https://github.com/matthew-andrews/isomorphic-fetch/blob/master/fetch-npm-node.js#L8) , you will notice that isomorphic-fetch package is using another package node-fetch to do their fetch call, which accepts the API URL and the method request options to call the API with. (As stated here; https://github.com/bitinn/node-fetch/blob/master/src/index.js#L34)

To continue with your test, perhaps this might be the solution you'd prefer?

import fetch from 'isomorphic-fetch';

import * as autofillData from 'autofill.json'; //test data



const FetchResults = event => {

  return fetch('/https://jsonplaceholder.typicode.com/todos/1'') //mockURL, to be replaced with real API

    .then(response => {

      // const parsedJson = response.json(); // TODO: un-comment this line when the real API url is usable

      const parsedJson = autofillData; // TODO: remove this line when mocking is done and the real API URL is ready

      return parsedJson;

    })

}



export default FetchResults;

To have a mock URL placeholder, I would suggest https://jsonplaceholder.typicode.com/ to prevent your fetch result to return an unexpected error during test mocking.

Hope this is helpful.

The question has been solved, The main issue was with defining const names such as const results = which should've been const results = props.results || .

The code has been updated incase you have problems aswell.