React onClick listItem显示来自JSON的选定listItem的数据 [英] React onClick listItem display the data of selected listItem from JSON

问题描述

我是编码世界的新手.学习react和json.我正在研究链接在一起的三个不同的面板.我想在第三个面板上显示清单答案.

I am new to coding world. Learning react and json. I am working on three different panels which are linked together. I want to display checklist answer on the third panels.

第一面板:
显示:所有esn("4667"，"4668")
在第一个esn:"4667"上单击时，它将在第二个面板上显示esn:"4667"的所有gmtdatetime.
第二个面板:
显示:esn的所有gmtdatetime:"4667"('2018-08-31 03:22:16'，'2018-08-30 03:12:16')
onclick在第一个gmtdatetime'2018-08-31 03:22:16'上，它应该在该gmtdatetime'2018-08-31 03:22:16'的第三个面板上显示问题+答案.
第三面板:
它应该以这种格式显示第一个gmtdatetime的所有值(问题+ answer).我要显示是或否，而不是是或否.
问题答案
问题1是==是"
问题2是==是"
问题3否==否"
问题4是==是"

First panel:
Display: all the esn ("4667","4668")
onclick on first esn:"4667" it should display all the gmtdatetime of esn:"4667" on the second panel.
Second panel:
Displaying: All the gmtdatetime of esn:"4667" ('2018-08-31 03:22:16','2018-08-30 03:12:16')
onclick on the first gmtdatetime '2018-08-31 03:22:16' it should show question + answers on the third panel of that gmtdatetime '2018-08-31 03:22:16'.
Third panel:
It should display all the value (question +answer) of the first gmtdatetime in this format. I want to display yes or not rather than true or false.
Question answer
question 1 true == "YES"
question 2 true == "YES"
question 3 false == "NO"
question 4 true == "YES"

原始代码:反应编辑器

Original code: react-editor

输出

  onClick on ESN ("4667") =>
                          onClick Date & Time ("2018-08-31 03:22:16") =>  
                                               Checklist (Question + Answer)
                                              "question 1"  true == "YES"
                                              "question 2"  true == "YES"
                                              "question 3"  false == "NO"
                                              "question 4"  true == "NO"

我的json数据如下所示

My json data looks like this

    [
    {
        esn: '4667',
        completed_checklists: [
            {
                gmtdatetime: '2018-08-31 03:22:16',
                answers: ['true','true','false','true']
            },
            {
                gmtdatetime: '2018-08-30 03:12:16',
                answers: ['false','true','true','true']
            }
        ],
        question: ['question 1','question 2','question 3','question 4']
    },
    {
        esn: '4668',
        completed_checklists: [
            {
                gmtdatetime: '2017-08-31 03:22:16',
                answers: ['true','false','false','true']
            },
            {
                gmtdatetime: '2017-08-31 03:23:16',
                answers: ['true','false','false','true']
            }
        ],
        question: ['question 1','question 2','question 3','question 4']

    },

]

问题 提取第二个面板和第三个面板上的所有数据.

Issue fetching all the data on the second panel and the third panel.

谢谢

推荐答案

您好，我在这里整理您的代码，我想这就是您

Hi there I have fork your code, I think this is what you are after here

这篇关于React onClick listItem显示来自JSON的选定listItem的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！