Getting the name of many properties inside a json file with reactjs - json

Question

I have a functional component that looks like this:
import React from 'react'
import PropTypes from 'prop-types'
import Styles from './searchbar.scss'
const AutoFill = (props) => {
const results = props.results || {}
return (
<ul className={Styles.searchUl}>
{Object.entries(results).map(([key, value]) => {
console.log('VALUE', value)
console.log('VALUENAME', value.apple.name)
return (
<li className={Styles.searchLi}>
<a className={Styles.searchA} href={value.apple.href} target='_blank' rel='noopener noreferrer' key={value.href}>
{value.apple.name}
</a>
</li>
)
})}
</ul>
)
}
AutoFill.propTypes = {
results: PropTypes.array
}
export default AutoFill
I also have a Json file that looks like this:
{
"results": {
"apple": {
"name": "apple",
"href": "https://www.apple.com/"
},
"armadillo": {
"name": "armadillo",
"href": "https://www.armadillo.com/"
},
"box": {
"name": "box",
"href": "https://www.box.com/"
},
"berserk": {
"name": "berserk",
"href": "https://www.berserk.com/"
}
}
}
With console.log('Resultsssssss', (results[key].apple.name)) i get the specified name of apple only which returns obv apple.
So i want to know how i can return the name of all the objects at once, To show them in a UL under a searchbar for a autoFill when typed a everything of a should appear as suggestions: https://gyazo.com/006e856190e8e063934a07eb0725926e
Any answer will be highly appreciated and looked into.

Answer 1

First, you want to get all the values of the object. Object.values(results) will return an array that looks like this:
[
{
"name": "apple",
"href": "https://www.apple.com/"
},
{
"name": "armadillo",
"href": "https://www.armadillo.com/"
},
{
"name": "box",
"href": "https://www.box.com/"
},
{
"name": "berserk",
"href": "https://www.berserk.com/"
}
]
Now you can use map to get the names: Object.values(results).map(x => x.name). This will return an array of names: ['apple', 'armadillo', ...].

Answer 2

When you passed 2 arguments in your map function, first one is general key of your json file, results in your case and second argument is content under this key.
Try this:
const AutoFill = (props) => {
const results = props.results || []
return (
Object.entries(results).map(([name, content]) => {
for (const key in content) {
if (content.hasOwnProperty(key)) {
console.log('Resultsssssss', (content[key].name))
}
}
})
)
}

Answer 3

You can simply return all properties within from within the map function without the for loop which you have in your code
const data = {
"results": {
"apple": {
"name": "apple",
"href": "https://www.apple.com/"
},
"armadillo": {
"name": "armadillo",
"href": "https://www.armadillo.com/"
},
"box": {
"name": "box",
"href": "https://www.box.com/"
},
"berserk": {
"name": "berserk",
"href": "https://www.berserk.com/"
}
}
}
const res = Object.entries(data.results).map(([key, value]) => {
return value.name;
});
console.log(res);
What you need for render is to restructure your HTML a little bit
const data = {
"results": {
"apple": {
"name": "apple",
"href": "https://www.apple.com/"
},
"armadillo": {
"name": "armadillo",
"href": "https://www.armadillo.com/"
},
"box": {
"name": "box",
"href": "https://www.box.com/"
},
"berserk": {
"name": "berserk",
"href": "https://www.berserk.com/"
}
}
}
const Styles = {}
const AutoFill = (props) => {
const results = props.results || {}
return (
<ul className={Styles.searchUl}>
{Object.entries(results).map(([key, value]) => {
return (
<li className={Styles.searchLi}>
<a className={Styles.searchA} href={value.href} target='_blank' rel='noopener noreferrer' key={value.href}>
{value.name}
</a>
</li>
)
})}
</ul>
)
}
ReactDOM.render(<AutoFill results={data.results} />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app" />