How to properly set an empty map to a parsed json (which is a new map)?

Question

I have declared this empty map mapA = {} but for some reason when I set it to a parsed json mapA = parsedJSON would result in an error of same or duplicate keys.

The json which I fetched is something like this [{a:1},{a:2},{a:3}], just to clarify...this is a json right? Cause its also kind of an array right?

But I fetched this as a json string and then parse it and then I receive the error I mentioned.

However, mapA = [{a:1},{a:2},{a:3}] works for me but this is hard coded. What part is wrong in here actually?

EDIT1:

Here is a sample data which I used

[{"location_id":1,"flight_location":"KUL","description":"Kuala Lumpur","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":2,"flight_location":"KIX","description":"Osaka-Kansai","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":3,"flight_location":"PEK","description":"Beijing","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":4,"flight_location":"HGH","description":"Hangzhou","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":5,"flight_location":"PVG","description":"Shanghai","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":6,"flight_location":"SZX","description":"Shenzhen","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":7,"flight_location":"DPS","description":"Bali","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":8,"flight_location":"CGK","description":"Jakarta","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":9,"flight_location":"DMK","description":"Bangkok","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0}]

Here is my code:

let fakeData = [{"location_id":1,"flight_location":"KUL","description":"Kuala Lumpur","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":2,"flight_location":"KIX","description":"Osaka-Kansai","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":3,"flight_location":"PEK","description":"Beijing","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":4,"flight_location":"HGH","description":"Hangzhou","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":5,"flight_location":"PVG","description":"Shanghai","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":6,"flight_location":"SZX","description":"Shenzhen","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":7,"flight_location":"DPS","description":"Bali","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":8,"flight_location":"CGK","description":"Jakarta","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":9,"flight_location":"DMK","description":"Bangkok","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0}];

let flights = {};


fetch(link) //link is the api link which I use to fetch the data
    .then(function(response) {
      return response.json(); //In here I parse it
    }).then(function(json) {
        /*flights = fakeData;     Causes same error. Run this only to test when api is down */  
        flights = json; // Same error. Set our flights map to the parsed json which is the map     
    }).catch(function(ex) {
      console.log('parsing failed', ex);
    });

Console output:

This is from the React library. Btw , I'm not really familiar with the codes in their library.

My components:

FlightList

const FlightList = ({flights, deleteFlight}) => {
    return (
        <table className="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Location</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                {flights.map(flight =>
                    <FlightListRow key={flight.location_id} flight={flight}/>
                )}
            </tbody>
        </table>
    );
};

FlightListRow

const FlightListRow = ({flight}) => {
    return (
        <tr>
            <td><Link to={'/editflight/' + flight.location_id}>{flight.location_id}</Link></td>
            <td><Link to={'/editflight/' + flight.location_id}>{flight.flight_location}</Link></td>
            <td><Link to={'/editflight/' + flight.location_id}>{flight.description}</Link></td>
        </tr>
    );
};

A valid `JSON` have the property sorrounded with quotes like this: `[{"a":1},{"a":2},{"a":3}]` . So this is normal that parsing it fails. To check the validaty of your `JSON, you can use a website like this one: http://json.parser.online.fr/ — ADreNaLiNe-DJ, Jul 04 '16 at 07:38
my json is valid, I just checked. So I set it to my `mapA` and still getting the same or duplicate key error. Here's my result: http://i.imgur.com/760Dy9w.png?1 — Joshua Rajandiran, Jul 04 '16 at 07:42
please add the relevant data in **text form** to the question. — Nina Scholz, Jul 04 '16 at 07:44
For the sake of being explicit, @ADreNaLiNe-DJ I would like to add to your comment: http://stackoverflow.com/questions/949449/json-spec-does-the-key-have-to-be-surrounded-with-quotes — Riaan van Zyl, Jul 04 '16 at 07:54
@JoshuaRajandiran Could you post exact console output with the error message. It doesn't seem like any data you have posted could cause the error. Actually `JSON.parse` is tollerant to duplicate keys `JSON.parse('{"a": 1, "a": 2}'); //no error` — Yury Tarabanko, Jul 04 '16 at 08:33
@JoshuaRajandiran Well, now it is obvious the error has nothing to do with the code you have posted. It comes from somewhere else where you are using the data. And react requires your keys to be unique but your data has the same `flight_id` which I assume you were using as a key. — Yury Tarabanko, Jul 04 '16 at 08:40

Piyush.kapoor · Accepted Answer · 2016-07-04T09:07:11.173

1

This is a react error , this means in your react component , you have an array of components and you are using same key on two or more components

       {flights.map((flight,index) =>
            <FlightListRow key={index} flight={flight}/>
        )}

edited Jul 04 '16 at 09:07

answered Jul 04 '16 at 08:42

Piyush.kapoor

6,715
1
21
21

I've added the components that I use. Which part does my error come from? – Joshua Rajandiran Jul 04 '16 at 08:53
I am sure location_id must be duplicating You can replace it index – Piyush.kapoor Jul 04 '16 at 09:05
I've tried your suggestion. Got an error that says 'index' is not defined. – Joshua Rajandiran Jul 04 '16 at 09:14
See the updated code, you need it add index to map function too – Piyush.kapoor Jul 04 '16 at 09:22
1

Thanks, it worked. Was having a headache for days and I remember a 100k rep guy kept asking me too much questions and he downvoted my old question because he expects me to know everything. I'm glad you helped with in solving this problem I had. Thanks again :) – Joshua Rajandiran Jul 04 '16 at 09:27

How to properly set an empty map to a parsed json (which is a new map)?

1 Answers1