Добрый день! Знания React'а довольно скудные, в процессе изучения и выполнения заданий возник вопрос.
Задача стоит в следующем:
необходимо сделать список контактов с мгновенным search bar'ом. Сложность для меня заключается в том, что данные (контакты) находятся в отдельном файле .json , я не знаю как правильно его "внедрить" в документ .html, как правильно обращаться к массивам и объектам внутри них конкретно в этой ситуации. Смотрела множество примеров реализации мгновенного поиска контактов в списке, но все данные контактов были помещены в переменную и находились непосредственно в документе .html .
Вот, собственно , недокод, который должен выводить имена списком из документа .json
import React from 'react'
import {render} from 'react-dom'
import JSON from 'clients'
var ClientsData = JSON.parse(fs.readFileSync('./clients.json'));
var ClientsList = React.createClass({
render: function() {
return(
<div>
<ul>
{
ClientsData.map( function(el){
return <li> {el.firstName} </li>;
})
}
</ul>
</div>
);
}
});
ReactDOM.render(
<ClientsList />,
document.getElementById("clients_list")
);
В html это выглядит так:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css1.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<script src="clients.json"></script>
</head>
<body>
<div id="clients_list"></div>
<script type="text/babel">
/ далее скрипт, что выше
А это, собственно, данные из .json
[
{
"general": {
"firstName": "Masha",
"lastName": "Ivanova",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"
},
"job": {
"company": "Eva",
"title": "Seller"
},
"contact": {
"email": "maxa_ivanova@gmail.com",
"phone": "(895) 135-0678"
},
"address": {
"street": "Karla Marksa, 35",
"city": "Dnepr",
"zCode": "48155",
"country": "Ukraine"
}
},
{
"general": {
"firstName": "Ira",
"lastName": "Ivchenko",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/andysolomon/128.jpg"
},
"job": {
"company": "ATB",
"title": "cahier"
},
"contact": {
"email": "ira_ivchenko_95@yahoo.com",
"phone": "375-45-15"
},
"address": {
"street": "Gagarina, 48",
"city": "Zaporozhie",
"Code": "145-25-178",
"country": "Ukraine"
}
},
{
"general": {
"firstName": "Arnold",
"lastName": "Black",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/holdenweb/128.jpg"
},
"job": {
"company": "Gorillaz",
"title": "manager"
},
"contact": {
"email": "arnold_bl@hotmail.com",
"phone": "305-47-26"
},
"address": {
"street": "Left-bank street",
"city": "Grodno",
"Code": "546-32-96",
"country": "Belarus"
}
}
]
Возлагаю надежды на вашу помощь
