How to convert huge Json to Array by ReactJs

Asked
Active3 hr before
Viewed126 times

7 Answers

arrayreactjsconvert
90%

So you want three separate arrays? Well, let's do that:,You want to extract values from an existing array somehow? Well, let's do that with a forEach:,Hmm, what do we do in our loop? Well, let's just push() a new value into the three arrays we made earlier:

So you want three separate arrays? Well, let's do that:

const cities = [];
const lats = [];
const longs = [];

You want to extract values from an existing array somehow? Well, let's do that with a forEach:

// Assuming myJson.cities is the array in the "cities" field
myJson.cities.forEach((eaCity) => {
   // do something here
});

Hmm, what do we do in our loop? Well, let's just push() a new value into the three arrays we made earlier:

myJson.cities.forEach((eaCity) => {
   cities.push(eaCity.city);
   lats.push(eaCity.lat);
   longs.push(eaCity.long);
});

This all assumes that you already have the JSON data in your app. If you don't, most React app configs (webpack or Parcel) will already be set up to load JSON files:

import myJson from '../path/to/myJson.json';

Let's put it all together:

import myJson from '../path/to/myJson.json';

const cities = [];
const lats = [];
const longs = [];

myJson.cities.forEach((eaCity) => {
   cities.push(eaCity.city);
   lats.push(eaCity.lat);
   longs.push(eaCity.long);
});

Edit: Looking at your update it seems what you actually want to do is map over an array to render something in JSX. That is a different question entirely and not really what the first part of your question is about at all. But it should probably look something like this:

return (
    <div>
        <select
          name="city"
          ref={this.props.form.register}
          value={this.state.selectedValue}
          onChange={(event) => {
            this.setState({selectedValue: event.target.value});
          }}
        >
          <option value="">Select...</option>
          {
            myJson.cities.map((eaCity) => {
                return (
                  <option
                    key={eaCity.city}
                    value={`${eaCity.city} ${eaCity.lat} ${eaCity.long}`}
                  >
                    {eaCity.city}
                  </option>
                );
            })
          }
       </select>
   </div>
);
load more v
88%

Convert JSON to Array from Local File,It may be possible that the JSON file needs to get used from the local source, and it also may contain an array of items or objects.,Both the ways of consuming JSON data and, more specifically, an array of items or objects gets integrated easily using parse() and map() functions.

1 JSON.parse(JSON_source)
load more v
72%

Pretag
 Pretag team - issue, fix, solve, resolve
65%

A stream based implementation of JSON.parse and JSON.stringify for big POJOs,Similarly, when retrieving stored JSON from disk or over the network, if the JSON stringified representation of the object exceeds the string length limit, the process will throw when attempting to convert the Buffer into a string.,An async JSON.parse using the same underlying stream implementation. If a callback is not passed, a promise is returned.

const fs = require('fs');
const path = require('path');
const json = require('big-json');
const readStream = fs.createReadStream('big.json');
const parseStream = json.createParseStream();
parseStream.on('data', function(pojo) { // => receive reconstructed POJO}); readStream.pipe(parseStream);
load more v
75%

Use my tips after use map() other wish show error on your browser.,when import after use map() method to loop all the items in the JSON file.,Interesting fact map() method used only for the array but in our JSON file Format object type you Say Rajdeep you are wrong. No Buddy…

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Then, since you're sending data to an API, you'd need to turn your newJoke object literal into a JSON string.,Fortunately, JavaScript includes a super helpful method to do just that – JSON.stringify():,If you're working with JSON in the browser, you're probably receiving or sending data through an API.

{
   "name": "Jane Doe",
   "favorite-game": "Stardew Valley",
   "subscriber": false
}
load more v
22%

It should be stored in a db somewhere and looked up when needed. Keep your application and payload lightweight to the user. They don’t need to be downloading all of that.,Side note: I'm an amateur engineer so I would imagine there are better ways to solve this issue, but I have done this in the past to solve a similar problem.,I saved this large (18mb) file in my project and noticed that it makes the initial render a good bit slower and I imagine load times when searching and parsing the json file will be just as long if not longer.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "array-reactjs" queries related to "How to convert huge Json to Array by ReactJs"