1

So I am using react with a news api that gives me the news info in JSON. I want to be able to get the various different components of the JSON news such as the author of the title. The object or json or array( I am confused) looks like this:

[{
"status": "ok",
"totalResults": 20,
-"articles": [
-{
-"source": {
"id": "techcrunch",
"name": "TechCrunch"
},
"author": "Catherine Shu",
"title": "After report on “appalling” conditions, Foxconn will investigate plant that makes Amazon devices",
"description": "Foxconn Technology Group says it is investigating a factory it operates that makes Amazon devices, including Kindles, after an in-depth report by advocacy group China Labor Watch criticized its “appalling working conditions,” including excessive hours and ove…",
"url": "https://techcrunch.com/2018/06/10/after-report-on-appalling-conditions-foxconn-will-investigate-plant-that-makes-amazon-devices/",
"urlToImage": "https://techcrunch.com/wp-content/uploads/2018/06/GettyImages-477662146.jpg?w=657",
"publishedAt": "2018-06-11T05:15:08Z"
},
-{
-"source": {
"id": "the-washington-post",
"name": "The Washington Post"
},
"author": null,
"title": "Owners of Detroit's old train station to discuss its future",
"description": "Owners of the vacant, hulking 105-year-old Michigan Central Station are planning to make an announcement about its future.",
"url": "https://www.washingtonpost.com/national/owners-of-detroits-old-train-station-to-discuss-its-future/2018/06/10/cc5f2680-6d2b-11e8-b4d8-eaf78d4c544c_story.html",
"urlToImage": "https://www.washingtonpost.com/resizer/2CjPNwqvXHPS_2RpuRTKY-p3eVo=/1484x0/www.washingtonpost.com/pb/resources/img/twp-social-share.png",
"publishedAt": "2018-06-11T03:59:18Z"
},
-{
-"source": {
"id": null,
"name": "Newsbtc.com"
},
"author": "JP Buntinx",
"title": "Bitcoin Took a Beating but Should be Bouncing Back",
"description": "Bitcoin has taken a serious beating in the last 48 hours with significant drops happening in two legs plunging the price from just above $7,600 to $6,784 at the time of writing according to livecoinwatch.com.",
"url": "https://www.newsbtc.com/2018/06/11/bitcoin-took-beating-bouncing-back/",
"urlToImage": "https://s3.amazonaws.com/main-newsbtc-images/2018/06/11033811/shutterstock_790702930.jpg",
"publishedAt": "2018-06-11T03:45:38Z"
},
-{
-"source": {
"id": null,
"name": "Wgntv.com"
},
"author": "https://www.facebook.com/wgnnews",
"title": "SONIC brings back 'signature' pickle-flavored snow cone slushes",
"description": "OKLAHOMA CITY-- Starting Monday, June 11, SONIC locations will start serving up frozen snow cone slushes made with pickle juice, and other \"signature\" flavors.\r\n\nIn a release, the company says news the signature slush flavor would be returning \"nearly broke t…",
"url": "http://wgntv.com/2018/06/10/sonic-brings-back-signature-pickle-flavored-snow-cone-slushes/",
"urlToImage": "https://tribwgntv.files.wordpress.com/2018/06/pickle.jpg?quality=85&strip=all&w=1200",
"publishedAt": "2018-06-11T03:39:00Z"
},
-{
-"source": {
"id": null,
"name": "Dailycaller.com"
},
"author": null,
"title": "Twitter CEO Caves To Liberal Backlash, Says He Was Wrong To Eat Chick-Fil-A",
"description": "'Please delete this'",
"url": "http://dailycaller.com/2018/06/10/twitter-ceo-chick-fil-a-gay-marriage/",
"urlToImage": "http://cdn01.dailycaller.com/wp-content/uploads/2018/06/Twitter-CEO-Jack-Dorsey-e1528681520236.jpg",
"publishedAt": "2018-06-11T03:16:24Z"
},
-{
-"source": {
"id": null,
"name": "Forbes.com"
},
"author": "Russell Flannery",
"title": "Wuxi Biologics To Open US Plant Amid Tough Trade Talk",
"description": "Investment may involve $60 million",
"url": "https://www.forbes.com/sites/russellflannery/2018/06/10/wuxi-biologics-to-open-u-s-plant-amid-tough-trade-talk/",
"urlToImage": "https://thumbor.forbes.com/thumbor/600x315/https%3A%2F%2Fi.forbesimg.com%2Fmedia%2Fassets%2Fforbes_1200x1200.jpg",
"publishedAt": "2018-06-11T00:54:00Z"
},
-{
-"source": {
"id": "the-washington-post",
"name": "The Washington Post"
},
"author": null,
"title": "Goodbye to net neutrality. Hello to an even-bigger AT&T?",
"description": "Two developments this week could dramatically expand the power of major telecom companies.",
"url": "https://www.washingtonpost.com/business/economy/goodbye-to-net-neutrality-hello-to-an-even-bigger-atandt/2018/06/10/e7c67f56-6cc0-11e8-bf86-a2351b5ece99_story.html",
"urlToImage": "https://www.washingtonpost.com/resizer/8KmT7MObORQyPc-zaJ37y2eo8yM=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/Q3LQNWTLJAI6RHRYETTJHM4GG4.jpg",
"publishedAt": "2018-06-11T00:26:54Z"
},
-{
-"source": {
"id": null,
"name": "Newsbtc.com"
},
"author": "https://www.facebook.com/profile.php?id=100012831007659",
"title": "Bitcoin (BTC) Price Technical Analysis (June 11, 2018)",
"description": "Yesterday we saw BTC prices literally crashing after shedding more than five percent. It might be a reactionary move after CFTC Bitcoin Futures investigations but what is important is how prices react at key support lines. Those levels stand at $7,000 and $7,…",
"url": "https://www.newsbtc.com/2018/06/11/bitcoin-btc-price-technical-analysis-june-11-2018/",
"urlToImage": "https://s3.amazonaws.com/main-newsbtc-images/2018/06/08073847/bitcoins.jpg",
"publishedAt": "2018-06-11T00:15:37Z"
},
-{
-"source": {
"id": "reuters",
"name": "Reuters"
},
"author": "Shinichi Saoshiro",
"title": "Asia stocks wobble after G7; Trump-Kim summit, central bank meetings eyed",
"description": "Asia stocks shook off initial modest losses and edged up on Monday ahead of an historic U.S.-North Korea summit that investors hope might pave the way to ending a nuclear stand-off on the Korean peninsula.",
"url": "https://www.reuters.com/article/us-global-markets/asia-stocks-wobble-after-g7-trump-kim-summit-central-bank-meetings-eyed-idUSKBN1J7007",
"urlToImage": "https://s2.reutersmedia.net/resources/r/?m=02&d=20180611&t=2&i=1271269745&w=1200&r=LYNXMPEE5A004",
"publishedAt": "2018-06-11T00:09:27Z"
},
-{
-"source": {
"id": "bloomberg",
"name": "Bloomberg"
},
"author": "Catherine Bosley",
"title": "Swiss Reject Plan That Would Have Revolutionized Banking",
"description": "Switzerland dismissed a proposal to radically change the way banks lend money, a victory for the financial establishment including central bank chief Thomas Jordan.",
"url": "https://www.bloomberg.com/news/articles/2018-06-10/swiss-reject-plan-that-would-have-revolutionized-banking-ji9fmz44",
"urlToImage": "https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iI1kN9CmjjT8/v0/1200x839.jpg",
"publishedAt": "2018-06-10T23:01:00Z"
},
-{
-"source": {
"id": "reuters",
"name": "Reuters"
},
"author": "Reuters Editorial",
"title": "Indian billionaire jeweler Nirav Modi flees to UK, claiming political asylum: FT",
"description": "Nirav Modi, the billionaire jeweler at the heart of a more than $2 billion fraud case in India, has fled to the UK, where he is claiming political asylum, the Financial Times reported on Sunday, citing Indian and British officials.",
"url": "https://www.reuters.com/article/us-britain-india-nirav-modi/indian-billionaire-jeweler-nirav-modi-flees-to-uk-claiming-political-asylum-ft-idUSKBN1J610T",
"urlToImage": "https://s3.reutersmedia.net/resources/r/?m=02&d=20180610&t=2&i=1271236652&w=1200&r=LYNXMPEE590XP",
"publishedAt": "2018-06-10T21:35:03Z"
},
-{
-"source": {
"id": "the-wall-street-journal",
"name": "The Wall Street Journal"
},
"author": "Jacob Bunge",
"title": "A Stampede of Meatless Products Overrun Grocery Store Meat Cases",
"description": "Furious cattlemen see the meat section as their turf, a private reserve of steaks and chops with one thing in common—a butchered animal carcass.",
"url": "https://www.wsj.com/articles/a-stampede-of-meatless-products-overrun-grocery-store-meat-cases-1528653236",
"urlToImage": "https://images.wsj.net/im-13667/social",
"publishedAt": "2018-06-10T17:57:15Z"
},
-{
-"source": {
"id": "fortune",
"name": "Fortune"
},
"author": "David Z. Morris",
"title": "Tyson Foods Recalls Frozen Chicken for Possible Plastic Contamination",
"description": "",
"url": "http://fortune.com/2018/06/10/tyson-chicken-recall-plastic/",
"urlToImage": "https://fortunedotcom.files.wordpress.com/2017/06/tyson-chicken-breaded.jpg",
"publishedAt": "2018-06-10T15:35:23Z"
},
-{
-"source": {
"id": "the-verge",
"name": "The Verge"
},
"author": "Elizabeth Lopatto",
"title": "I have a Boring Company Not-A-Flamethrower",
"description": "The flamethrower started as what seemed like a throwaway joke on Twitter, but Elon Musk and The Boring Company did actually make it. I was among the first 1,000 to pick up my very own.",
"url": "https://www.theverge.com/2018/6/10/17445838/boring-company-flamethrower-elon-musk-tweets-party",
"urlToImage": "https://cdn.vox-cdn.com/thumbor/4fUBJXdApyq46NJbbg-dHfMlb_A=/0x0:2040x1068/fit-in/1200x630/cdn.vox-cdn.com/uploads/chorus_asset/file/11510275/llopatto_180609_2658_0068.jpg",
"publishedAt": "2018-06-10T15:09:00Z"
},
-{
-"source": {
"id": "cnbc",
"name": "CNBC"
},
"author": "Jeff Cox",
"title": "The Fed has a surprise in store that could mean an early end to interest rate hikes",
"description": "The Federal Reserve could have a surprise in store for investors next week, even if everyone already knows the central bank is raising interest rates. The policymaking Federal Open Market Committee is expected to announce another change that would signal an e…",
"url": "https://www.cnbc.com/2018/06/08/fed-has-surprise-that-could-mean-early-end-to-interest-rate-hikes.html",
"urlToImage": "https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2018/03/21/105080472-RTS1ONSL.1910x1000.jpg",
"publishedAt": "2018-06-10T13:02:17Z"
},
-{
-"source": {
"id": null,
"name": "Latimes.com"
},
"author": "Meg James",
"title": "Brian Roberts has been the force behind Comcast's growth. Now he's in the hunt for Fox",
"description": "Comcast CEO Brian Roberts is determined to bulk up his company — and that might mean scooping up much of Rupert Murdoch's media empire. \"This is very personal for Brian,\" said his longtime lieutenant Steve Burke.",
"url": "http://www.latimes.com/business/hollywood/la-fi-ct-brian-roberts-comcast-20180610-htmlstory.html",
"urlToImage": "http://www.latimes.com/resizer/dDO6-HPJ9ju6TSMYIrp048Gbu4M=/1200x0/arc-anglerfish-arc2-prod-tronc.s3.amazonaws.com/public/5OIJLZ662BCJ7BBHFTHEWL2PFM.jpg",
"publishedAt": "2018-06-10T12:01:13Z"
},
-{
-"source": {
"id": null,
"name": "Fool.com"
},
"author": "Keith Speights",
"title": "3 Investing Tips From Warren Buffett That You Shouldn't Ignore",
"description": "Great investing advice from one of the greatest investors of all time.",
"url": "https://www.fool.com/investing/2018/06/10/3-investing-tips-from-warren-buffett-that-you-shou.aspx",
"urlToImage": "https://g.foolcdn.com/image/?url=https%3A%2F%2Fg.foolcdn.com%2Feditorial%2Fimages%2F484681%2Fwarren-buffett-tmf-photo-2.jpg&h=630&w=1200&op=resize",
"publishedAt": "2018-06-10T10:32:25Z"
},
-{
-"source": {
"id": null,
"name": "Shropshirestar.com"
},
"author": null,
"title": "G7 members sign joint communique despite US trade tensions",
"description": "Canadian PM Justin Trudeau said the seven leaders had reached agreement on ‘consensus language’.",
"url": "https://www.shropshirestar.com/news/world-news/2018/06/09/g7-members-sign-joint-communique-despite-us-trade-tensions/",
"urlToImage": "https://www.shropshirestar.com/resizer/0Kp-727irloUzDQ7S4rsHNpQnfA=/1200x0/filters:quality(100)/https%3a%2f%2farc-anglerfish-arc2-prod-shropshirestar-mna.s3.amazonaws.com%2fpublic%2fCGU7SHMC7VHA3FBBZ6OPW755KU.jpg",
"publishedAt": "2018-06-09T22:59:13Z"
},
-{
-"source": {
"id": "the-new-york-times",
"name": "The New York Times"
},
"author": "https://www.nytimes.com/by/cade-metz",
"title": "Mark Zuckerberg, Elon Musk and the Feud Over Killer Robots",
"description": "As the tech moguls disagree over the risks presented by something that doesn’t exist yet, all of Silicon Valley is learning about unintended consequences of A.I.",
"url": "https://www.nytimes.com/2018/06/09/technology/elon-musk-mark-zuckerberg-artificial-intelligence.html",
"urlToImage": "https://static01.nyt.com/images/2018/06/10/business/10MUSK/10MUSK-facebookJumbo.gif",
"publishedAt": "2018-06-09T09:00:15Z"
},
-{
-"source": {
"id": "cbs-news",
"name": "CBS News"
},
"author": "AP",
"title": "Kia recalls more than 500000 vehicles -- air bag may not inflate",
"description": "U.S. safety regulators says four people were killed and others injured following front-end crashes",
"url": "https://www.cbsnews.com/news/kia-recalls-more-than-500000-vehicles-air-bag-may-not-inflate/",
"urlToImage": "https://cbsnews1.cbsistatic.com/hub/i/r/2016/06/17/43ec7b9a-f7a8-40a3-9c58-d6c1d92d56de/thumbnail/1200x630/6e37f23635d706b05ceca3838187cb97/gettyimages-451098743.jpg",
"publishedAt": "2018-06-08T17:29:00Z"
}
]
}]

When I do <Text>{this.state.articles}</Text> (which is the variable with the info idk if it is an object or array I am so confused). It gives me the error

Objects are not valid as a React child( found: object with keys {source, author, title... }

I have no idea how to manipulate that giant amount of information. If you could please tell me how to get the title, author and that separate information or direct me to a tutorial that can help me I would be very happy.

Thank you, The Troubled Programmer

2
  • Your JSON is not valid, Please check your JSON Data. Commented Jun 11, 2018 at 7:19
  • if you have save whole json in articles it not a string to be shown in a text view Commented Jun 11, 2018 at 7:21

2 Answers 2

1

this.state.articles is an array and it not convertible to string
but if want have list of news you should use flatlist for easily working with data

<FlatList
                        showsVerticalScrollIndicator={false}
                        style={{width: 75 * vw, }}
                        data={this.state.articles}
                        ListEmptyComponent={this.renderEmpty}
                        scrollEventThrottle={16}
                        removeClippedSubviews={true}

                        renderItem={({item}) =>
                            <ItemView
                                keyExtractor={this._keyExtractor}
                                title={item.title}
                                description={item.description}
                                url={item.url}
                               }
                    />

and you should define ItemView in other place and import it for more info https://facebook.github.io/react-native/docs/flatlist.html

Sign up to request clarification or add additional context in comments.

Comments

0

As shown in the API, articles will have a list of individual article which is a type of object. It has keys of author,title,description and so on.

When you put <Text>{this.state.articles}</Text>, it means you are throwing an array into a Text Component, which is the reason why you are getting the error.

Since articles is an array of objects, what you can instead do is <Text>{this.state.articles[0].author}</Text> for author and so on.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.