arrange information retrieved from an api

Question

arrange information retrieved from an api

Hey there! I'm currently diving into the world of JavaScript, and it's been quite a journey these past 3 days as I've been attempting to get everything up and running. Despite its apparent simplicity, I can't seem to make things click.

My current challenge involves organizing data that I fetch from an API.

I'm making API requests using axios

axios.get('url').then(function (response) {
  console.log(response.data)
})

The JSON response I receive looks like this

[{
  "item_id": "item_1",
  "city": "city_1",
  "quality": 2,
  "sell_price": 1000,
  "sell_price_date": "2020-05-05T01:20:00"
},
// More JSON objects
]

My goal is to structure the data in the following format:

[{
  "item_id": "item_1",
  "qualities": [
    {
      "quality": 2,
      "cities": [
        // City details
      ]
    },
    // More quality levels
  ],
},
// More item entries
]

After organizing the data, my plan is to create HTML elements dynamically based on the structured data (pseudo code)

<ul class="items" >
  ${db.forEach(item => {
      <li class="item">
        <p class="item_title">item.item_id</p>
        <ul class="item_qualities">

          ${item.qualities.forEach(qual => {
            <li class="quality">
              <p class="quality_title">qual.quality</p>
              <ul class="cities">

                ${qual.cities.forEach(city => {
                <li class="city">
                  <p class="city_title">city.city</p>
                  <ul class="prices">
                    <li class="sell_price">
                      <p class="sell_price_title">city.sell_price</p>
                    </li>
                    <li class="sell_price_date">
                      <p class="sell_price_date_title">city.sell_price_date</p>
                    </li>
                  </ul>
                </li>
              })}

              </ul>
            </li>
          })}

        </ul>
      </li>
  })}
</ul >

In conclusion
As a newbie in the realm of programming and JavaScript, I'm eager to learn by working with real-world APIs. Any guidance or tutorials you could recommend regarding JSON and database handling would be greatly appreciated!

javascript json

Answer 1

Answer №1

Could you clarify the concept of GROUP here? I noticed that the group's primary level is identified by item_id in your provided code snippet, but I'm curious to know what determines the secondary level grouping for qualities.

let database = []
array.forEach(element1 => {
    if (database.every(element2 => element2.item_id != element1.item_id)) {
        database.push({
            item_id: element1.item_id,
            qualities: [{
                quality: element1.quality,
                cities: [{
                    city: element1.city,
                    sell_price: element1.sell_price,
                    sell_price_date: element1.sell_price_date
                }]
            }]
        })
    } else {
        for (let index = 0; index < database.length; index++) {
            if (database[index].item_id === element1.item_id) {
                let currentQualities = database[index].qualities
                let foundMatch = false
                for (let j = 0; j < currentQualities.length; j++) {
                    if (currentQualities[j].quality === element1.quality) {
                        currentQualities[j].cities = currentQualities[j].cities || []
                        currentQualities[j].cities.push({
                            city: element1.city,
                            sell_price: element1.sell_price,
                            sell_price_date: element1.sell_price_date
                        })
                        foundMatch = true
                        break
                    }
                }
                if (!foundMatch) {
                    database[index].qualities.push({
                        quality: element1.quality,
                        cities: [{
                            city: element1.city,
                            sell_price: element1.sell_price,
                            sell_price_date: element1.sell_price_date
                        }]
                    })
                    break
                }
            }
        }
    }
})

Answer 2

Could you clarify the concept of GROUP here? I noticed that the group's primary level is identified by item_id in your provided code snippet, but I'm curious to know what determines the secondary level grouping for qualities.

let database = []
array.forEach(element1 => {
    if (database.every(element2 => element2.item_id != element1.item_id)) {
        database.push({
            item_id: element1.item_id,
            qualities: [{
                quality: element1.quality,
                cities: [{
                    city: element1.city,
                    sell_price: element1.sell_price,
                    sell_price_date: element1.sell_price_date
                }]
            }]
        })
    } else {
        for (let index = 0; index < database.length; index++) {
            if (database[index].item_id === element1.item_id) {
                let currentQualities = database[index].qualities
                let foundMatch = false
                for (let j = 0; j < currentQualities.length; j++) {
                    if (currentQualities[j].quality === element1.quality) {
                        currentQualities[j].cities = currentQualities[j].cities || []
                        currentQualities[j].cities.push({
                            city: element1.city,
                            sell_price: element1.sell_price,
                            sell_price_date: element1.sell_price_date
                        })
                        foundMatch = true
                        break
                    }
                }
                if (!foundMatch) {
                    database[index].qualities.push({
                        quality: element1.quality,
                        cities: [{
                            city: element1.city,
                            sell_price: element1.sell_price,
                            sell_price_date: element1.sell_price_date
                        }]
                    })
                    break
                }
            }
        }
    }
})

Answer 3

Answer №2

When working with JSON data, it's important to analyze the attributes you receive and determine which ones are necessary for your database. By understanding these requirements, you can then design the structure of your database including the appropriate field types.

After setting up your database, you can begin extracting data from the API. This involves iterating through the incoming entries and inserting each one into your database accordingly.

Answer 4

When working with JSON data, it's important to analyze the attributes you receive and determine which ones are necessary for your database. By understanding these requirements, you can then design the structure of your database including the appropriate field types.

After setting up your database, you can begin extracting data from the API. This involves iterating through the incoming entries and inserting each one into your database accordingly.

Answer 5

Answer №3

Your discussion is not specifically related to databases but rather focuses on transforming data obtained from an API into a more usable format. In this scenario, a database would be utilized for storing the transformed data once it has been processed.

One approach is to utilize the JavaScript forEach() method to iterate through each element and apply your custom logic to populate the transformed dataset accordingly.

var transformedData = []    
response.data.forEach(item => {
  ...custom logic to add or update items in the transformed set
})

To get started, you should first check whether the item already exists in the transformedData set before making any modifications.

Best of luck with your transformation process!

Answer 6

Your discussion is not specifically related to databases but rather focuses on transforming data obtained from an API into a more usable format. In this scenario, a database would be utilized for storing the transformed data once it has been processed.

One approach is to utilize the JavaScript forEach() method to iterate through each element and apply your custom logic to populate the transformed dataset accordingly.

var transformedData = []    
response.data.forEach(item => {
  ...custom logic to add or update items in the transformed set
})

To get started, you should first check whether the item already exists in the transformedData set before making any modifications.

Best of luck with your transformation process!

Answer 7

Answer №4

Existing Status :

function fetchData() {
  console.log("initiating data retrieval !")

  axios.get('url')
    .then(function (response) {
      response.data.forEach(e1 => {

        if (db.every(e2 => e2.item_id != e1.item_id)) {

          console.log("item not found, creating new one")
          db.push(
            {
              item_id: e1.item_id,
              qualities: [{
                quality: e1.quality,
                cities: [{
                  city: e1.city,
                  sell_price_min: e1.sell_price_min,
                  sell_price_min_date: e1.sell_price_min_date
                }]
              }]
            })

        } else {

          console.log("item located, editing it")
          item_index = db.indexOf(e1.item_id)
          console.log(item_index)

          if (db[item_index].qualities.every(e3 => e3.quality != e1.quality)) {

            console.log("quality not found, creating new one")
            db[item_index].qualities.push(
              {
                quality: e1.quality,
                cities: [{
                  city: e1.city,
                  sell_price_min: e1.sell_price_min,
                  sell_price_min_date: e1.sell_price_min_date
                }]
              })

          } else {

            console.log("quality found, modifying it")
            quality_index = db[item_index].qualities.indexOf(e1.quality)
            console.log(quality_index)

            if (db[item_index].qualities[quality_index].cities.every(
              e4 => e4.city != e1.city)) {

              console.log("city not found, creating new one")
              db[item_index].qualities[quality_index].cities.push(
                {
                  city: e1.city,
                  sell_price_min: e1.sell_price_min,
                  sell_price_min_date: e1.sell_price_min_date
                })

            } else {

              console.log("city found, modifying it")
              city_index = db[item_index].qualities[quality_index].cities.indexOf(e1.city)
              console.log(city_index)

              db[item_index].qualities[quality_index].cities[city_index].city = e1.city;
              db[item_index].qualities[quality_index].cities[city_index].sell_price_min = e1.sell_price_min;
              db[item_index].qualities[quality_index].cities[city_index].sell_price_min_date = e1.sell_price_min_date;

            }
          }

        }

      });

      console.log("data retrieval completed")
      console.log(db)
    })
}

The issue encountered

Uncaught (in promise) TypeError: Cannot read property 'qualities' of undefined
    at index.js:33
    at Array.forEach (<anonymous>)
    at index.js:9

Answer 8

Existing Status :

function fetchData() {
  console.log("initiating data retrieval !")

  axios.get('url')
    .then(function (response) {
      response.data.forEach(e1 => {

        if (db.every(e2 => e2.item_id != e1.item_id)) {

          console.log("item not found, creating new one")
          db.push(
            {
              item_id: e1.item_id,
              qualities: [{
                quality: e1.quality,
                cities: [{
                  city: e1.city,
                  sell_price_min: e1.sell_price_min,
                  sell_price_min_date: e1.sell_price_min_date
                }]
              }]
            })

        } else {

          console.log("item located, editing it")
          item_index = db.indexOf(e1.item_id)
          console.log(item_index)

          if (db[item_index].qualities.every(e3 => e3.quality != e1.quality)) {

            console.log("quality not found, creating new one")
            db[item_index].qualities.push(
              {
                quality: e1.quality,
                cities: [{
                  city: e1.city,
                  sell_price_min: e1.sell_price_min,
                  sell_price_min_date: e1.sell_price_min_date
                }]
              })

          } else {

            console.log("quality found, modifying it")
            quality_index = db[item_index].qualities.indexOf(e1.quality)
            console.log(quality_index)

            if (db[item_index].qualities[quality_index].cities.every(
              e4 => e4.city != e1.city)) {

              console.log("city not found, creating new one")
              db[item_index].qualities[quality_index].cities.push(
                {
                  city: e1.city,
                  sell_price_min: e1.sell_price_min,
                  sell_price_min_date: e1.sell_price_min_date
                })

            } else {

              console.log("city found, modifying it")
              city_index = db[item_index].qualities[quality_index].cities.indexOf(e1.city)
              console.log(city_index)

              db[item_index].qualities[quality_index].cities[city_index].city = e1.city;
              db[item_index].qualities[quality_index].cities[city_index].sell_price_min = e1.sell_price_min;
              db[item_index].qualities[quality_index].cities[city_index].sell_price_min_date = e1.sell_price_min_date;

            }
          }

        }

      });

      console.log("data retrieval completed")
      console.log(db)
    })
}

The issue encountered

Uncaught (in promise) TypeError: Cannot read property 'qualities' of undefined
    at index.js:33
    at Array.forEach (<anonymous>)
    at index.js:9

arrange information retrieved from an api

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Exploring Node.js: Managing Memory Consumption for Efficiency

The new pop-up window appears smaller than expected in Internet Explorer

The program suddenly halts during the second loop without displaying any error messages

Issue with executing .then() after Promise.all() in Node.js

Retrieving URL from AJAX Request in Express JS

Unclear when notifying div content

Can an unresolved promise lead to memory leaks?

"npm ci is triggered, raising a warning due to an invalid entry in the tar file, ultimately

Coordinating multiple API requests for optimal performance

Analyzing the values provided as input (using setState)

301 redirection will be implemented on the upcoming static export

Modifying a table row in real-time with the power of JQuery/JavaScript

How can I incorporate a personalized SVG path to serve as a cursor on a webpage?

Performing asynchronous ajax calls with jQuery

The bundle.js file is displaying HTML code instead of JavaScript

Ways to determine if the property of a document has been altered?

Checking connectivity in an Ionic application

Scrolling up or down in an HTML webpage using a script

Develop a JavaScript function to generate a multiple selection form

Is Snowflake misinterpreting the timestamp information?