Как распарсить такой объект json?

Question

[Валерий Жмышенко]

Добрый день!
Приходит с сервера json, дальше я его через JSON.parse() перевожу в объект. Потом вот так хочу отобразить его содержимое: Object.keys(this.state.students).map(function (val){return });
Но на деле рендерится один пустой елемент, и выдается ошибка "Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `RenderStudent`".

Answer 1

[Роман Александрович]

папробуйте так

Object.keys(this.state.students).map(
   (el, ind)=>{
       <div key={el.id}>{el.name}</div>
   }
);

Comments

[Валерий Жмышенко]

с индексом помогло, а остальные данные не выводятся
Object.keys(this.state.students).map(function (val, ind) {
return
})

[Роман Александрович]

kiril_murr, ну так выведите в консоль значение val и посмотрите что в нем к каким ключам обращаться

[Роман Александрович]

kiril_murr, стоп
у вас this.state.students это массив

this.state.students.map(function (val, ind) {
return <div key={ind}>{val.name}</div>
})

[Валерий Жмышенко]

Роман Александрович, не понял вашего последнего сообщения...

[LS Timer]

kiril_murr, Вы пытаетесь создать Object из Array

[Роман Александрович]

kiril_murr, посмотрите на скрин что вы выложили у вас this.state.students это массив а не объект. А вы пытаетесь его распечатать как объект. По этому нужно

this.state.students.map(function (val, ind) {
return <div key={ind}>{val.name}</div>
})

таким образом у вас val это и будет объект в котором вы можете обратиться к ключу

[Валерий Жмышенко]

Роман Александрович, у меня получаетстак что я делаю из приходящего json - объект, далее у меня есть заготовленая переменная let students = [];
и я делаю так

var data = JSON.parse(this.responseText);
    students = data;

и получается такая дичь, что после загрузки json и перевода его в "массив" способом который выше,
и вызываю Object.keys(this.state.students).map());
и когда я пробую добавить туда новое поле с формы то выходит такое:

как я понял я не правильно присваиваю полученный объект в массив.
Как это сделать правильно?

[Валерий Жмышенко]

Роман Александрович, у меня получилось массив в массиве

[Роман Александрович]

kiril_murr, уууух ты у вас тут весело
у вас кроме id нет одинаковых ключей
вы не правы. это массив объектов
покажите весь код

[Валерий Жмышенко]

Роман Александрович, тут дело не в ключах, их я поправлю(делал на скорую руку). Тут получается 0: обект, 1: массив обектов с json. Я не знаю как мне с обьекта сделать массив

[Роман Александрович]

kiril_murr, а какой тип у вас this.responseText
выведите в консоль и покажите

[Валерий Жмышенко]

Роман Александрович, string

[Валерий Жмышенко]

Роман Александрович,

[Роман Александрович]

kiril_murr, так вы правильно делаете
var data = JSON.parse(this.responseText);
покажите data в консоли

[Валерий Жмышенко]

Роман Александрович,

[Роман Александрович]

kiril_murr, а теперь data.students

[Валерий Жмышенко]

Роман Александрович,

[Роман Александрович]

kiril_murr, вот вам массив с которым нужно работать
дальше вы хотите соединить 2 массива?

[Валерий Жмышенко]

один пустой а другой data.students, а потом в объединенный дописывать данные

[Роман Александрович]

тогда это лучше делать так

var students = data.students
students.push( ваш новый объект )

сделайте и пришлите скрин

[davidnum95]

kiril_murr, не используйте в качестве ключей индексы, как из совета выше. Это может быть чревато тем, что реакт будет неверно обновлять список. Нужно использовать уникальный параметр, например id:

this.state.students.map(student => <div key={student.id}>{student.name}</div>)

[Валерий Жмышенко]

Роман Александрович, Спасибо, заработало.

[Валерий Жмышенко]

davidnum95, и еще один вопрос как сделать чтобы по загрузке страницы сразу отображало список из массива.

let students = [];
getInitialState: function () {
        return {
            students: students,
        };
    },
componentDidMount: function(){
        var oReq = new XMLHttpRequest();
        oReq.onload = reqListener;
        oReq.onerror = reqError;
        oReq.open('get', 'http://devbiz.net//personal-office/students, true');
        oReq.send();

        this.setState({
            students: students
        });

не срабатывает

[Роман Александрович]

getInitialState: function () {
        return {
            students: [],
        };
    },

а в рендере написать проверку

this.state.students.length!==0
?
this.state.students.map(student => <div key={student.id}>{student.name}</div>)
:null

[Валерий Жмышенко]

Роман Александрович, тоже самое, я имел ввиду отобразить сразу массив полученный из json

[Роман Александрович]

var students = data.students
this.state.students.map(student => <div key={student.id}>{student.name}</div>)

[davidnum95]

kiril_murr, вы по какому туториалу изучаете? Есть чувство, что он знатно так устарел.... И вам бы основы js подучить, прежде чем в реакт лезть.

[Роман Александрович]

davidnum95, 100%

[Валерий Жмышенко]

у меня data.students доступно только в функции

function reqListener() {
    var data = JSON.parse(this.responseText);
    students = data.students;
    console.log(data.students);
}

function reqError(err) {
    console.log('Error :-S', err);
}

let students = [];

const RenderStudent = React.createClass({
    getInitialState: function () {
        return {
            students: students,
        };
    },
    handleRefresh: function () {
       this.setState({
           students: students
       });
       console.log("Students json: ");
       console.log(students);
    },
    componentDidMount: function(){
        var oReq = new XMLHttpRequest();
        oReq.onload = reqListener;
        oReq.onerror = reqError;
        oReq.open('get', 'http://devbiz.s-host.net//personal-office/students/get-all-data-about-students', true);
        oReq.send();

        this.setState({
            students: students
        });
    },
    render: function () {
        let onEditStudent = this.props.onEdit;
        return (
            <div>
            <Refresh handleRefresh={this.handleRefresh}/>
                {
                    this.state.students.map(function (val) {
                        return <Student
                            key={val.id}
                            firstName={val.name}
                            secondName={val.surname}
                            telephone={val.telephone}
                            onEditStudent={onEditStudent.bind(null, val)}
                        />
                    })
                }
                <nav className="pag">
                    <PaginationPanel handleRefresh={this.handleRefresh}/>
                </nav>
            </div>
        );
    }
});

[davidnum95]

kiril_murr, тут все плохо, советую учить основы js

[Валерий Жмышенко]

davidnum95, спасибо