Функция 1, которая возвращает массив JSON.
function allPlans()
{
var all_plans = {
'Option1' : {
'free':{status:true,plantext:"5 Per Month"},
'premium':{status:true,plantext:"Unlimited"},
'vip':{status:true,plantext:"5 Per Month"}
},
'Option2' : {
'free':{status:true,plantext:"Unlimited"},
'premium':{status:true,plantext:"Unlimited"},
'vip':{status:true,plantext:"Unlimited"}
},
'Option3' : {
'free':{status:true,plantext:"Unlimited"},
'premium':{status:true,plantext:"Unlimited"},
'vip':{status:true,plantext:"Unlimited"}
},
'Option4':{
'free':{status:true,plantext:"-"},
'premium':{status:true,plantext:"Full Access"},
'vip':{status:true,plantext:"Full Access"}
},
'Option5' : {
'free':{status:true,plantext:"-"},
'premium':{status:true,plantext:"3 Per Month"},
'vip':{status:true,plantext:"3 Per Month"}
},
'Option6' : {
'free':{status:true,plantext:"-"},
'premium':{status:true,plantext:"-"},
'vip':{status:true,plantext:"1 Portfolio"}
},
'Option7' : {
'free':{status:true,plantext:"-"},
'premium':{status:true,plantext:"-"},
'vip':{status:true,plantext:"1 Per Month"}
},
}
return all_plans;
}
Другая функция "rendercolumn ()" для возврата вида планов.
function rendercolumn()
{
const options = allPlans();
var isrowclass = false;
var getrowclass = "";
const plansMap = Object.keys(options).reduce((acc, title) => {
if (props.planname == 'free')
{
var plans = options[title]["free"];
}
else if(props.planname == 'premium')
{
var plans = options[title]["premium"];
}
else if(props.planname == 'vip')
{
var plans = options[title]["vip"];
}
Object.keys(plans).forEach(plan =>
{
if (!acc[plan])
{
acc[plan] = [];
}
if(isrowclass == true)
{
isrowclass = false;
getrowclass = plan_item_gray;
}
else
{
isrowclass = true;
getrowclass = plan_item;
}
acc[plan].push({
title,
status: plans.status,
text: plans.plantext,
rowclass: getrowclass,
})
});
return acc;
}, {})
return (
<div>
{Object.keys(plansMap).map(plan => (
<Column key={plan} data={plansMap[plan]} />
))}
</div>
)
}
После этого вызывается компонент «Столбец»
const Column = ({data}) => (
<div>
{data.map(option => (
<div className={option.rowclass}>{option.text}</div>
))}
</div>
)
И, наконец, я вызвал "{rendercolumn ()}" для отображения данных наview.
Теперь во всем приведенном выше коде я получаю строки, как и ожидалось, но он показывает детали дважды.
Я получаю результат как:
Я хочу получить результат как:
Чтоизменения должны быть сделаны в приведенном выше коде?