Loading external local json into React and rendering

Question

I have another react newbie question, I am trying to load some json data from an external, local, file called intro.json But I am getting the error default.map is not a function. Any ideas on what I am doing wrong here?

My data looks like this

{
    "company": "test",
    "employees":[
    {
          "firstName":"John",
          "lastName":"Doe"
    },
    {
        "firstName":"Anna",
        "lastName":"Smith"
    }
    ]
}

I am importing like so, which I thought might work because i'm doing something similar elsewhere but not as an external file.

import React, {PropTypes} from 'react';
import data from './intro.json';

var dataList = data.map(function(dl, index) {
    return (
       <li key={index}>{dl.company}</li>
    )
});

....

Igorsvee · Accepted Answer · 2016-07-20 11:18:57Z

0

Use json-loader and the imported data will be an Object instance: Object {company: "test", employees: Array[2]} To traverse and map:

  Object.entries(data).map(([key,value])=> {
  if (Array.isArray(value)) {
    //return array value representation
    ...
  } else {
    //return normal value representation
    return (
        <div>{key} : {value}</div>
    );
  }
})

edited Jul 20, 2016 at 11:18

answered Jul 20, 2016 at 9:35

Igorsvee

4,2111 gold badge29 silver badges22 bronze badges

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

4 Comments

Ash Over a year ago

Thanks but I am already using json-loader, I have it set up in my webpack config, it does not fix the issue I am having.

Igorsvee Over a year ago

Because data represents an object not an array. And to traverse an object you could use Object.entries for instance, I'll update the answer with code.

Ash Over a year ago

Oh right! I see, object.entries isn't supported in ES2015 though right?

Igorsvee Over a year ago

Nope, only in ES7. You can make it work with transform-runtime babel plugin though

Collectives™ on Stack Overflow

Loading external local json into React and rendering

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related