React iterate through object nested in array

React iterate through object nested in array
0

#1

I’m working with some JSON data in a React app using Axios and I am having trouble iterating through an object nested in an array. I think some variation of .map or Object.keys would work but I am stuck.

I’ve made a Stack Overflow post

Any ideas on how to fix this?


#2

for (const result of results) console.log(result)

or

`for (const {data, links, href} of results) …

or

results.forEach(({data, links, href) =>

etc.

I assume you don’t just want to log though, map is normally what you’d use. You need to provide a bit more context, because you have the data and it’s easy to iterate over, so assuming there may be another issue?


#3

I want to access the data in the object and then create a div that displays the data.


#4

Maybe something like

class ResultsDisplay extends React.Component {
  render() {
    return (
      <React.Fragment>
      {this.props.results.map(({data, links, href}) => <Result data={data} links={links} href={href} />)}
      </React.Fragment>
    )
  }
}

And then Result would be a div, and in that you render out data/links/href however. Or you use a <ul> rather than a fragment and each Result is a <li> or whatever


#5
import React, { Component } from 'react';
import Autosuggest from 'react-autosuggest';
import axios from 'axios';
import {list} from './SearchSuggestions';

// Importing list const that contains search terms to suggest

// Teach Autosuggest how to calculate suggestions for any given input value.
const getSuggestions = value => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;

  return inputLength === 0 ? [] : list.filter(searchTerm =>
    searchTerm.name.toLowerCase().slice(0, inputLength) === inputValue
  );
};

// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
const getSuggestionValue = suggestion => suggestion.name;

// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
  <div>
    {suggestion.name}
  </div>
);

class SearchBar extends Component {
  constructor() {
    super();

    // Autosuggest is a controlled component.
    // This means that you need to provide an input value
    // and an onChange handler that updates this value (see below).
    // Suggestions also need to be provided to the Autosuggest,
    // and they are initially empty because the Autosuggest is closed.
    this.state = {
      value: '',
      suggestions: [],
      results: []
    };
  }

  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
  };

  // Autosuggest will call this function every time you need to update suggestions.
  // You already implemented this logic above, so just use it.
  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      suggestions: getSuggestions(value)
    });
  };

  // Autosuggest will call this function every time you need to clear suggestions.
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };


  loadSearchResults = (event) => {
    event.preventDefault();
    var search = this.state.value;

    axios.get(`https://images-api.nasa.gov/search?q=` + `search`)
      .then(res => res.data.collection.items)
        .then(json => {
          json.map(obj => this.setState({ results: Object.values(obj) }))
    })
  }

  render() {
    const { value, suggestions } = this.state;

    // Autosuggest will pass through all these props to the input.
    const inputProps = {
      placeholder: 'Search for space related topic...',
      value,
      onChange: this.onChange
    };


    const searchResults = Object.keys(this.state.results).map(key =>
      <item key={key} value={key}>{this.state.results[key]}</item>
    )


  console.log(this.state.results);

    // Finally, render it!
    return (
      <div>
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={getSuggestionValue}
        renderSuggestion={renderSuggestion}
        inputProps={inputProps}
      />

      <button onClick={this.loadSearchResults.bind(this)}>Search</button>

      <div>{searchResults}</div>
      </div>
    );
  }
}

export default SearchBar;

Still can’t get this working. This code is resulting in an error: Objects are not valid as a React child (found: object with keys {href, rel, render}). If you meant to render a collection of children, use an array instead.

Can anyone explain the common approach/design pattern that applies to displaying Object data in React? There doesn’t seem to be any method to the madness. I’ve had people on StackOverflow say use Object.keys, Object.value, Arr.map, etc… and nothing works in my program.


#6

I don’t think this has anything to do with React, rather a misunderstanding re iterating over things in JavaScript. Can you explain what you expect to get here?


#7

Honestly I’m not even sure. The two then() sections are from a response I got on StackOverflow. I just want to be able to grab the data in the object nested within the array and display it in html on the page.


#8
  • is the query string correct? You’re literally searching for https://images-api.nasa.gov/search?q=search every time.
  • res.data.collection.items: that is already an array of items. What do you expect to be in that array that means you need to map over it then generate an array for every value?

I think you’re copy pasting answers without thinking; people are trying to answer a half-formed question here


#9

No it doesn’t search for q=search, it takes what the user input in the searchbar and passes that string to the query.

i.e. if the user types “mars” it sends an API request to https://images-api.nasa.gov/search?q=mars

If you look at how that JSON is structured it has multiple layers of objects nested inside arrays. I am able to access the array data but not the object data. For example check out this part of the JSON:

items": [
      {
        "links": [
          {
            "rel": "captions",
            "href": "https://images-assets.nasa.gov/video/50 Years of Mars Exploration /50 Years of Mars Exploration .srt"
          }
        ],
        "href": "https://images-assets.nasa.gov/video/50 Years of Mars Exploration /collection.json",
        "data": [
          {
            "nasa_id": "50 Years of Mars Exploration ",
            "title": "50 Years of Mars Exploration ",
            "media_type": "video",
            "date_created": "2015-08-20T00:00:00Z",
            "center": "HQ",
            "keywords": [
              "Mars"
            ],
            "description": "2015 marks 50 years of successful NASA missions to Mars starting with Mariner 4 in 1965. Since then, a total of 15 robotic missions led by various NASA centers have laid the groundwork for future human missions to the Red Planet. The journey to Mars continues with additional robotic missions planned for 2016 and 2020, and human missions in the 2030s."
          }
        ]
      },

I can access the items array but not the objects inside it. How would I, for example, pull the data from the description key/value pair?

“description”: “2015 marks 50 years of successful NASA missions to Mars starting with Mariner 4 in 1965. Since then, a total of 15 robotic missions led by various NASA centers have laid the groundwork for future human missions to the Red Planet. The journey to Mars continues with additional robotic missions planned for 2016 and 2020, and human missions in the 2030s.”


#10

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#11

items[0].data[0].description in that instance but if you’re mapping over the items then - the items


#12

If the json looks like:

{
  "items": [
      {
        "links": [
          {
            "rel": "captions",
            "href": "https://images-assets.nasa.gov/video/50 Years of Mars Exploration /50 Years of Mars Exploration .srt"
          }
        ],
        "href": "https://images-assets.nasa.gov/video/50 Years of Mars Exploration /collection.json",
        "data": [
          {
            "nasa_id": "50 Years of Mars Exploration ",
            "title": "50 Years of Mars Exploration ",
            "media_type": "video",
            "date_created": "2015-08-20T00:00:00Z",
            "center": "HQ",
            "keywords": [
              "Mars"
            ],
            "description": "2015 marks 50 years of successful NASA missions to Mars starting with Mariner 4 in 1965. Since then, a total of 15 robotic missions led by various NASA centers have laid the groundwork for future human missions to the Red Planet. The journey to Mars continues with additional robotic missions planned for 2016 and 2020, and human missions in the 2030s."
          }
        ]
      },
      {
        // another object
      },
      {
        // another object
      },
      {
        // another object
      },
      {
        // another object
      }      
   ]
}

then the following would reference the description property’s value (assuming json is the object above).

json.items[0].data[0].description

#13

I ended up getting it to work like this. In the render method I set const data = this.state.results;

Then I mapped through it in the return function like this:

 <div className="container">
      {data.map(function(d, index){
         return (
           <div>
           <li key={index}>{d.data[0].title}</li>
           <li key={index}>{d.data[0].description}</li>
           <li key={index}>{d.data[0].date_created}</li>
           <li key={index}>{d.data[0].keywords}</li>
           <br/>
           </div>
         )
       })}
</div>

But I’m still running into the “object within an array” issue when I try to access the images where are located inside the link object within the array.


#14

You sure it’s an image? In the example response you’ve shown here, it’s a video and the link field is for subtitle files. If it’s images, what do you expect the data to look like?