How to loop through an array using for loop in react native?

Question

I'm trying to loop over json data in react native.I want to create a new array with different key and values will be the looped json result.I've tried the following but nothing is working as expected.The format of json response will be the following.

json

 0: {key: 0, id: 0, type: "section", title: "A1. India's Economic Development", duration: 0, …}
    1: {key: 1, id: "1", type: "unit", title: "1. India as a Developing Economy", duration: 0, …}
    2: {key: 2, id: "2", type: "unit", title: "2. Understanding India’s economic transition", duration: 0, …}
    3: {key: 17, id: 0, type: "section", title: "A2. National Income", duration: 0, …}
    4: {key: 18, id: "5", type: "unit", title: "1. India in the global economy", duration: 0, …}
    5: {key: 19, id: "6", type: "unit", title: "2. China, India and the rise of Asia", duration: 0, …}

I want an array like this

const dataArray = [
  {
    title: "India's Economic Development",
    content:
      "India as a Developing Economy",
      "Understanding India’s economic transition"

  },
  {
    title: "National Income",
    content:
      "India in the global economy",
      "China, India and the rise of Asia"
  }
]

Following is the looping I've done but nothing is coming.Please help

.then((response) => response.json())
.then((responseData) => {

    responseData.map(detail => {

        let resultk = [];
        //console.log( detail.data.curriculum);
        for (var i = 0, j = 0; i < detail.data.curriculum.length; i++) {
            curr = detail.data.curriculum;
            console.log(curr.title);
            if (curr.type === "section") {
                resultk['title'] = curr.title;
                this.result[j++] = resultk;

            } else if (curr.type === "unit") {
                resultk['content'] = curr.title;
            }
        }
        console.log(resultk)
    })
})

define resultk as let resultk={}

user4171365
– user4171365

2019-01-02 12:49:45 +00:00
Commented Jan 2, 2019 at 12:49 — user4171365
– user4171365, Commented Jan 2, 2019 at 12:49

tomitheninja · Accepted Answer · 2019-01-02 13:39:11Z

2

const resp = [
    {key: 0, id: 0, type: "section", title: "A1. India's Economic Development", duration: 0},
    {key: 1, id: "1", type: "unit", title: "1. India as a Developing Economy", duration: 0},
    {key: 2, id: "2", type: "unit", title: "2. Understanding India’s economic transition", duration: 0},
    {key: 17, id: 0, type: "section", title: "A2. National Income", duration: 0},
    {key: 18, id: "5", type: "unit", title: "1. India in the global economy", duration: 0},
    {key: 19, id: "6", type: "unit", title: "2. China, India and the rise of Asia", duration: 0},
]

If resp is an object with a length and 0, 1, 2, ... keys, use Array.from(obj) to convert it to an object

If the resp is sorted (each unit belongs to the previous section)

const result = []
resp.forEach(item => {
    if (item.type === 'section') { // create a new collection
        result.push({
            title: item.title,
            content: []
        })
    } else if (item.type === 'unit') {
        if (result.length === 0) throw new Error('No section specified yet')
        result[result.length - 1].content.push(item.title)
    } else {
        throw new TypeError('Invalid data type')
    }
})

To trim the first word from the title use

function removeFirstWord(str) {
    return str.replace(/^[^\s]+\s/, '')
}

The /symbols/ thing is called regular expression

The string starts with (first ^ sign) any character expect a
whitespace (whitespace=\s, [^something] means not something)
the plus sign means the last part can repeat 1 or more times

so far it finds the first word

the \s means also replace the space after the word

edited Jan 2, 2019 at 13:39

answered Jan 2, 2019 at 13:30

tomitheninja

5372 silver badges13 bronze badges

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

2 Comments

Anu Over a year ago

How do I list the content array?.I want to map over that

tomitheninja Over a year ago

If its not an array, but something like this: { 0: object, 1: object, 2: object, length: 3, } Use Array.from(arrayLike) to convert it to an array If that what you ask for Or if you are asking how do I access the results, its the result array, use it after my script

brk · Accepted Answer · 2019-01-02 14:08:18Z

1

Use reduce function and a variable to track the index of the accumulator array

Check it type is section then in the accumulator array push the value and update the variable value by 1.

If the type is unit then add the value in the content which is at the index defined by currIndex variable

let value = [{
    key: 0,
    id: 0,
    type: "section",
    title: "A1. India's Economic Development",
    duration: 0
  },
  {
    key: 1,
    id: "1",
    type: "unit",
    title: "1. India as a Developing Economy",
    duration: 0
  },
  {
    key: 2,
    id: "2",
    type: "unit",
    title: "2. Understanding India’s economic transition",
    duration: 0
  },
  {
    key: 17,
    id: 0,
    type: "section",
    title: "A2. National Income",
    duration: 0
  },
  {
    key: 18,
    id: "5",
    type: "unit",
    title: "1. India in the global economy",
    duration: 0
  },
  {
    key: 19,
    id: "6",
    type: "unit",
    title: "2. China, India and the rise of Asia",
    duration: 0
  }
]

let currIndex = -1;
let k = value.reduce((acc, curr) => {

  if (curr.type === 'section') {
    acc.push({
      title: curr.title.split('.')[1].trim(),
      content: []
    })
    currIndex += 1
  } else {
    acc[currIndex].content.push(curr.title)
  }

  return acc;


}, []);
console.log(k)

answered Jan 2, 2019 at 14:08

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

Anu Over a year ago

I tried your code and I found that it is more efficient than the other.Thank you so much.

Kirankumar Dafda · Accepted Answer · 2019-01-02 13:27:48Z

Here is a complete example code of what you want, try changing your data with the final loop and you will get your desire output :

testingggg = () => {
    var data = {
        0: {key: 0, id: 0, type: "section", title: "A1. India's Economic Development", duration: 0},
        1: {key: 1, id: "1", type: "unit", title: "1. India as a Developing Economy", duration: 0},
        2: {key: 2, id: "2", type: "unit", title: "2. Understanding India’s economic transition", duration: 0},
        3: {key: 17, id: 0, type: "section", title: "A2. National Income", duration: 0},
        4: {key: 18, id: "5", type: "unit", title: "1. India in the global economy", duration: 0},
        5: {key: 19, id: "6", type: "unit", title: "2. China, India and the rise of Asia", duration: 0}
    }

    var keys = [];
    for(var k in data) keys.push(k);

    //alert("total " + keys.length + " keys: " + keys);

    var dataArray = [] 

    for(i=0;i<keys.length;i++)
    {
        var newObj = { // Change your required detail here
            type: data[i].type,
            title: data[i].title
        }
        dataArray.push(newObj);
    }
    console.log(dataArray);
}

Andrew Felder · Accepted Answer · 2019-01-02 14:08:55Z

Here is one possible solution. If I understand the question correctly you want to reformat and combine the section as the title and the unit(s) as the content...

var data = {
    0: { key: 0, id: 0, type: "section", title: "A1. India's Economic Development", duration: 0 },
    1: { key: 1, id: "1", type: "unit", title: "1. India as a Developing Economy", duration: 0 },
    2: { key: 2, id: "2", type: "unit", title: "2. Understanding India’s economic transition", duration: 0 },
    3: { key: 17, id: 0, type: "section", title: "A2. National Income", duration: 0 },
    4: { key: 18, id: "5", type: "unit", title: "1. India in the global economy", duration: 0 },
    5: { key: 19, id: "6", type: "unit", title: "2. China, India and the rise of Asia", duration: 0 }
};

var keys = Object.keys(data);

var dataArray = [];
var push = true;
var toPush = null;

for (var i = 0; i < keys.length; i++) {

    var key = keys[i];
    var obj = data[key];

    switch (obj.type) {
        case "section":
            if (toPush !== null) {
                dataArray.push({ ...toPush });
            }
            toPush = {};
            var titleText = obj.title.split(".")[1].trim();//if there is always a "." in the title string this will clean that up;
            toPush.title ? toPush.title += `, ${titleText}` : toPush.title = titleText;
            push = true;
            break;
        case "unit":
            push = false;
            var contentText = obj.title.split(".")[1].trim();//if there is always a "." in the title string this will clean that up;
            toPush.content ? toPush.content += `, ${contentText}` : toPush.content = contentText;
            break;
        default: break;
    }
}

//push the last one
dataArray.push({ ...toPush });

console.log(JSON.stringify(dataArray, null, 2));

//result =>
[
  {
    "title": "India's Economic Development",
    "content": "India as a Developing Economy, Understanding India’s economic transition"
  },
  {
    "title": "National Income",
    "content": "India in the global economy, China, India and the rise of Asia"
  }
]

Collectives™ on Stack Overflow

How to loop through an array using for loop in react native?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related