How to read and display JSON

Question

I am trying to open a local JSON file and have the information displayed on my app.

The code seems to run but the JSON information doesn't display. How do I get the JSON information, name & age fields to display?

JSON file:

[
    {
        "name": "George",
        "age": "25"
    },
    {
        "name": "Sarah",
        "age": "42"
    }
]

App.js:

import * as myfile from './myfile.json'

const name = myfile.name;
const age = myfile.name;

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>This is name: {name} This is age: {age}
        </Text>
      </View>
    );
  }
}

possible dup of https://stackoverflow.com/questions/47206924/angular-5-service-to-read-local-json-file — AZ_, Mar 27 '19 at 06:36

score 4 · Accepted Answer · answered Mar 27 '19 at 06:43

4

So you are accessing an array, there is no myfile.name to assign to const name, you can, however, do something like this; const name = myfile[0].name for George's information only.

Conclusively, you are not extracting information properly from JSON.

P.S., if you can tell me what is the expected behavior, I can help you out.

answered Mar 27 '19 at 06:43

Sania Khushbakht Jamil

812
6
16

Amazing! If I were to continue this JSON file with 100 entries, would I then simply continue the count to the corresponding entry? e.g [1],[2],[3]-[100] – axell2017 Mar 27 '19 at 07:30
1

Yes, you will have to extract that information. You can do in the following way: https://codesandbox.io/s/1vn9okn8kj – Sania Khushbakht Jamil Mar 27 '19 at 07:38
@axell2017 try it now. – Sania Khushbakht Jamil Mar 27 '19 at 07:42
Very good method. Will the JSON file require the "const JSON ="[ within it? Is there a way to do it without declaring any javascript in the JSON file? Thanks! – axell2017 Mar 27 '19 at 08:05

score 0 · Answer 2 · answered Mar 27 '19 at 06:43

That's because your myFile isn't an object but array.

Use the map array method:

...
 <View style={styles.container}>
       {myFile.map(({ name, age }) => (
        <Text>This is name: {name} This is age: {age}
        </Text>
       )}
 </View>
...

Hope that helped!

How to read and display JSON

2 Answers2