How to I import an array (in js formating) from a json file?

Question

I want import an array from a json file which only contains this array. in this app, I want to perform a search on this array. so it must be recieved in the array formating.

this is a part of long array exsisting in cities.json :

cities.json:

[ "Aberdeen", "Abilene", "Akron", "Albany", "Albuquerque", "Alexandria", "Allentown", "Amarillo", ..., ..., ..., "Yonkers", "York", "Youngstown" ]

enter image description here

In App code, I have displayed the input of the JSON file inside the p tag, Just to see what I get.

index.jsx:

import React from "react"; import ReactDOM from "react-dom"; import text from "./cities.json"; class App extends React.Component{ constructor(props) { super(props); this.state = { value: '', hint: '' } } handleChange = (e) => { this.setState({ value: e.target.value }); } render() { return ( <div> <p>{text}</p> <input value={this.state.value} placeholder={this.state.hint} onChange={this.handleChange}/> </div> ); } } ReactDOM.render(<App/>, document.getElementById("root"));

But I see output is only a text.

enter image description here

How to I recieved that in the array form?

Spankied · Accepted Answer · 2021-12-11 17:53:28Z

It may already be in array form, that's probably just how react renders arrays. Try an array operation on the value.

text.filter(city => city.startsWith('A'))

If that doesnt work you may need to parse the JSON first.

let parsedText = JSON.parse(text) parsedText.filter((city) => city.startsWith("A"));

Why "A"? whole items not begined with "A"! what do you mean?
Because multiple items begin with A. If you to match a single, whole, item u can do '''text.filter(city => city === "Albuquerque")'''

Omid Ebrahimi · Accepted Answer · 2021-12-13 07:26:31Z

1

It's already an array. If you want to see it in array format you can use the console.log(text) out of the render function.

Alternatively, you can show it on the page using <p>{JSON.stringify(text)}</p>

answered Dec 13, 2021 at 7:26

Omid Ebrahimi

1,2003 gold badges20 silver badges39 bronze badges

2 Comments

Arman Ebrahimi Over a year ago

Is it to this mean that if I to recieve "text" with 'JSON.stringify', still is in the array formating? and I can performe search on it?

Omid Ebrahimi Over a year ago

@ArmanEbrahimi No. JSON.stringify converts the array to plain text but the text will look like the original array. If you want to perform array operations you can use the original array named text in your question. Actually text is a bit confusing name in this code. It should be something more clear like cities.

Aviad · Accepted Answer · 2021-12-12 06:22:54Z

Due to the fact "text" is an array, you have to be specific about the value you are presenting.

So it this case:

{text} // array

So you are trying to render the array itself.

If you want to check first if it's working, try to render

{text[0]}

If it's working, you can map, filter or make any operation you want on the array.

Let me know if it helps

oooh yes so thanks. it worked. but I was surprised. how do? If react sees this in the array form, why in output not was "," between items, when that I displayed whole text?
Im pretty sure its due to the nature of jsx. Because if you provide an array, jsx doesn't know how to handle the render. Same for objects as well (but im not 100% sure)

Collectives™ on Stack Overflow

How to I import an array (in js formating) from a json file?

3 Answers 3

2 Comments

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Related