Get the value from the JSON file using React Native

Question

I have my JSON file in the DocumentDirectoryPath, JSON file looks like

{
    "name": {
        "en_EN": "Epic App Dev Self"
    },
    "description": {
        "en_EN": ""
    },
    "type": "course",
    "id": "epicdevself",
    "value": {
        "version": "1.0.1",
        "series_prefix": "eds"
    },
    "uid": "epicdevself/1.0.1",
    "children": [{
        "name": {
            "en_EN": "Level 1"
        },
        "description": {
            "en_EN": ""
        },
        "type": "level",
        "id": "level1",
        "value": {
            "cover": {
                "targetLanguage": ""
            }
        },
        "uid": "epicdevself/1.0.1/level1",
        "children": [{
            "name": {
                "en_EN": "Unit 1"
            },
            "description": {
                "en_EN": ""
            },
            "type": "unit",
            "id": "unit1",
            "value": {
                "cover": {
                    "teacher": "https://origin-dashboard.com/CDN/ProdStore/EPIC_APP/packets.zip",
                    "targetLanguage": ""
                }
            },
            "uid": "epicdevself/1.0.1/level1/unit1",
            "children": [{
                    "name": {
                        "en_EN": "Lesson 1"
                    },
                    "description": {
                        "en_EN": ""
                    },
                    "type": "lesson",
                    "id": "lesson1",
                    "value": {
                        "targetLanguage": ""
                    },
                    "uid": "epicdevself/1.0.1/level1/unit1/lesson1",
                    "children": [{
                            "name": {
                                "en_EN": "Listening and speaking"
                            },
                            "description": {
                                "en_EN": ""
                            },
                            "type": "resource_group",
                            "id": "skill2",
                            "value": {
                                "display_mode": "icons"
                            },
                            "uid": "epicdevself/1.0.1/level1/unit1/lesson1/skill2",
                            "children": [{
                                "name": {
                                    "en_EN": "Listening activity"
                                },
                                "description": {
                                    "en_EN": ""
                                },
                                "type": "activity",
                                "id": "activity3",
                                "value": {
                                    "header": "",
                                    "learningObject": null,
                                    "iconUrl": "",
                                    "teachingNotes": "",
                                    "tincanIri": "",
                                    "activityRubric": "",
                                    "audioScript": "",
                                    "activityUri": "",
                                    "pageBook": "",
                                    "time": 0
                                },
                                "uid": "epicdevself/1.0.1/level1/unit1/lesson1/skill2/activity3",
                                "children": [

                                ]
                            }]
                        },
                        {
                            "name": {
                                "en_EN": "Conversation"
                            },
                            "description": {
                                "en_EN": ""
                            },
                            "type": "resource_group",
                            "id": "skill3",
                            "value": {
                                "display_mode": "icons"
                            },
                            "uid": "epicdevself/1.0.1/level1/unit1/lesson1/skill3",
                            "children": [{
                                "name": {
                                    "en_EN": "Conversation Activity"
                                },
                                "description": {
                                    "en_EN": ""
                                },
                                "type": "activity",
                                "id": "activity4",
                                "value": {
                                    "header": "",
                                    "learningObject": null,
                                    "iconUrl": "",
                                    "teachingNotes": "",
                                    "tincanIri": "",
                                    "activityRubric": "",
                                    "audioScript": "",
                                    "activityUri": "",
                                    "pageBook": "",
                                    "time": 0
                                },
                                "uid": "epicdevself/1.0.1/level1/unit1/lesson1/skill3/activity4",
                                "children": [

                                ]
                            }]
                        },
                        {
                            "name": {
                                "en_EN": "Vocabulary"
                            },
                            "description": {
                                "en_EN": ""
                            },
                            "type": "resource_group",
                            "id": "skill1",
                            "value": {
                                "display_mode": "icons"
                            },
                            "uid": "epicdevself/1.0.1/level1/unit1/lesson1/skill1",
                            "children": [{
                                    "name": {
                                        "en_EN": "Vocabulary Activity A"
                                    },
                                    "description": {
                                        "en_EN": ""
                                    },
                                    "type": "activity",
                                    "id": "activity1",
                                    "value": {
                                        "header": "",
                                        "learningObject": {
                                            "uri": "",
                                            "source": null
                                        },
                                        "iconUrl": "",
                                        "teachingNotes": "",
                                        "tincanIri": "",
                                        "activityRubric": "",
                                        "audioScript": "",
                                        "activityUri": "",
                                        "pageBook": "",
                                        "time": 0
                                    },
                                    "uid": "epicdevself/1.0.1/level1/unit1/lesson1/skill1/activity1",
                                    "children": [

                                    ]
                                },
                                {
                                    "name": {
                                        "en_EN": "Vocabulary Activity B"
                                    },
                                    "description": {
                                        "en_EN": ""
                                    },
                                    "type": "activity",
                                    "id": "activity2",
                                    "value": {
                                        "header": "",
                                        "learningObject": {
                                            "uri": "",
                                            "source": null
                                        },
                                        "iconUrl": "",
                                        "teachingNotes": "",
                                        "tincanIri": "",
                                        "activityRubric": "",
                                        "audioScript": "",
                                        "activityUri": "",
                                        "pageBook": "",
                                        "time": 0
                                    },
                                    "uid": "epicdevself/1.0.1/level1/unit1/lesson1/skill1/activity2",
                                    "children": [

                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "name": {
                        "en_EN": "Lesson 2"
                    },
                    "description": {
                        "en_EN": ""
                    },
                    "type": "lesson",
                    "id": "lesson2",
                    "value": {
                        "teacher": "https://origin-dashboard.com/CDN/ProdStore/EPIC_APP/packets.zip",
                        "targetLanguage": ""
                    },
                    "uid": "epicdevself/1.0.1/level1/unit1/lesson2",
                    "children": [

                    ]
                },
                {
                    "name": {
                        "en_EN": "Lesson 3"
                    },
                    "description": {
                        "en_EN": ""
                    },
                    "type": "lesson",
                    "id": "lesson3",
                    "value": {
                        "teacher": "https://origin-dashboard.com/CDN/ProdStore/EPIC_APP/packets.zip",
                        "targetLanguage": ""
                    },
                    "uid": "epicdevself/1.0.1/level1/unit1/lesson3",
                    "children": [

                    ]
                },
                {
                    "name": {
                        "en_EN": "Audio"
                    },
                    "description": {
                        "en_EN": ""
                    },
                    "type": "lesson",
                    "id": "audio1",
                    "value": {
                        "targetLanguage": ""
                    },
                    "uid": "epicdevself/1.0.1/level1/unit1/audio1",
                    "children": [

                    ]
                },
                {
                    "name": {
                        "en_EN": "Video"
                    },
                    "description": {
                        "en_EN": ""
                    },
                    "type": "lesson",
                    "id": "video1",
                    "value": {
                        "targetLanguage": ""
                    },
                    "uid": "epicdevself/1.0.1/level1/unit1/video1",
                    "children": [

                    ]
                }
            ]
        }]
    }]
}

From this i need to print the key https://origin-dashboard.com/CDN/ProdStore/EPIC_APP/packets.zip , How to get this key from the above JSON

Can you show the code explaining how to trying to access this JSON — Rohan Kangale
– Rohan Kangale, Commented Aug 18, 2017 at 7:02
You don't need React Native to do that. Pure JS already has everything you need. — Michał Urbaniak
– Michał Urbaniak, Commented Aug 18, 2017 at 7:14
I am developing a hybrid app using react native I dont no how to do it in react — Mahalakshmi Saravanan
– Mahalakshmi Saravanan, Commented Aug 18, 2017 at 7:19

Syauqi Rahmat Sugara · Accepted Answer · 2017-08-18 08:02:38Z

4

You need to import file.json first, you can try like this :

import React, { Component } from 'react';
import { View,Text} from 'react-native';
import data  from './file.json';

export default class App extends React.Component {

  render(){
    return (
      <View>
        <Text>
          {data.children[0].children[0].value.cover.teacher}
        </Text>
      </View>
    );
  }
}

I hope this answer can help you.

answered Aug 18, 2017 at 8:02

Syauqi Rahmat Sugara

6795 silver badges12 bronze badges

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

4 Comments

Mahalakshmi Saravanan Over a year ago

My JSON file path is : var path = RNFS.DocumentDirectoryPath + '/test.json' How to import this file?

Syauqi Rahmat Sugara Over a year ago

Have you set up the configuration on the react-native-fs documentation?

Syauqi Rahmat Sugara Over a year ago

From github.com/itinance/react-native-fs#basic , i think you need to use readDir(RNFS.DocumentDirectoryPath) method and return promise to read your file from your directory. I am sorry can't help you more because I have never used this library, so I need to learn about it first.

Mahalakshmi Saravanan Over a year ago

How to execute it using loop to print all the key value presented in JSON file?

Collectives™ on Stack Overflow

Get the value from the JSON file using React Native

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related